在vue项目中安装使用Mint-UI的方法
一、Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性: 使用文档:
二、首先要创建一个vue项目,参考前面写的 三、接着安装 Mint UI: 四、然后需要引入 Mint UI,这里有两种情况: 1. 引入全部组件 如果项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中: 2. 按需引入 如果你只需要使用某个组件,可以仅引入这个组件,Mint UI 能够保证在代码打包时,与这个组件无关的文件不会出现在最终代码里。比如需要引入 Button 组件,则在 main.js 中: 上面两种引入方法都要单独引入相应的 CSS 文件。这很不方便,尤其当你使用按需引入的方法引入多个组件时。 五、为了避免这个问题,可以使用babel-plugin-component插件。 1. 首先当然是安装它: 2. 然后在 .babelrc 中配置它: 3. 这样上述两种引入方法就可以简化为: import { Swipe,SwipeItem } from 'mint-ui'; //按需引入部分组件
Vue.component(Swipe.name,Swipe); Vue.component(SwipeItem.name,SwipeItem); 前面安装的插件会自动引入相应的 CSS 文件! 六、具体使用UI组件 -- 可以直接参考官方文档 使用的过程中发现Mint UI文档不是很详细,很多具体的用法都需要另外百度... 1.首先看下官方文档的第一种引入和用法: 这种组件引入的时候,有一行 那么接下来看一下在项目中的使用代码: 2. 然后看官网文档的第二种引入和用法: 我们可以看到这种组件引入的时候,居然没有 我参照第一种方法直接引入文档的Toast组件,然后在script里面使用,这个时候会报错: 百度了一下,好像挺多人跟我一样遇到这个问题的...... 其实我们看下Toast的使用语句,就可以知道Toast是一个方法,既然是方法,直接在js里面未定义使用就会报错,所以我们在引入该组件的时候,将该方法设置为全局变量: 设置完之后就不再报错了,再看一下页面该组件:
总结
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |