在vue项目中安装使用Mint-UI的方法

日期：2020-05-11 栏目：程序人生浏览：次

一、Mint UI 是由饿了么前端团队推出的一个基于 Vue.js 的移动端组件库,具有以下特性: 使用文档：

http://mint-ui.github.io/#!/zh-cn

Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。
真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。
考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。
依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

二、首先要创建一个vue项目,参考前面写的 //www.jb51.net/article/131600.htm

三、接着安装 Mint UI：

npm i mint-ui --save

四、然后需要引入 Mint UI ,这里有两种情况:

　　1. 引入全部组件

　　　　如果项目会用到 Mint UI 里较多的组件，最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中：

import Mint from 'mint-ui';
Vue.use(Mint);
import 'mint-ui/lib/style.css';

　　2. 按需引入

　　　　如果你只需要使用某个组件，可以仅引入这个组件，Mint UI 能够保证在代码打包时，与这个组件无关的文件不会出现在最终代码里。比如需要引入 Button 组件，则在 main.js 中：

import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';
Vue.component(Button.name, Button);

　　　　上面两种引入方法都要单独引入相应的 CSS 文件。这很不方便，尤其当你使用按需引入的方法引入多个组件时。

五、为了避免这个问题，可以使用babel-plugin-component插件。

　　1. 首先当然是安装它：

npm i babel-plugin-component -D

　　2. 然后在 .babelrc 中配置它：

{
 "presets": [
 ["env", {
  "modules": false,
  "targets": {
  "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
  }
 }],
 "stage-2"
 ],
 "plugins": ["transform-runtime",["component",[
   {"libraryName":"mint-ui","style":true}
  ]]],
 "env": {
 "test": {
  "presets": ["env", "stage-2"],
  "plugins": ["istanbul"]
 }
 }
}

　　3. 这样上述两种引入方法就可以简化为：

//import Mint from 'mint-ui';
//Vue.use(Mint);
//import 'mint-ui/lib/style.css'; //不需要手动导入mint-ui样式
import Button from 'mint-ui/lib/button';
Vue.component(Button.name, Button);

import { Swipe, SwipeItem } from 'mint-ui'; //按需引入部分组件
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

转载注明出处：http://www.heiqu.com/224.html

在vue项目中安装使用Mint-UI的方法

相关推荐