vue项目安装使用mint-ui

一、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。

二、安装mint-ui:

cnpm i mint-ui --save

三、引入mint-ui :

引入全部组件

// 在入口文件main.js文件中
import Mint from 'mint-ui';
Vue.use(Mint);
import 'mint-ui/lib/style.css';

按需引入

// 如果你只需要使用某个组件，可以仅引入这个组件，Mint UI 能够保证在代码打包时，与这个组件无关的文件不会出现在最终代码里。
import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';
Vue.component(Button.name, Button);

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

使用babel-plugin-component 插件安装

安装

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);

前面安装的插件会自动引入相应的 CSS 文件！

四、总结

有疑问的话直接在下面留言哦!(#^.^#)

I'm a little coder

发布了28 篇原创文章 · 获赞 8 · 访问量 1万+

私信关注

vue项目安装使用mint-ui

猜你喜欢