在Vue中安装Mint-UI方法

在Vue中安装Mint-UI方法

全部导入组件

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

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

按需导入Mint-UI中的组件

比如导入Header组件，在main.js中写入：

import 'mint-ui/lib/Header/style.css'
import {Header} from 'mint-ui'
Vue.component(Header.name, Header)

由于上面这种引入方法要单独引入相应的 CSS 文件。这很不方便，尤其当你使用按需引入的方法引入多个组件时。为了避免这个问题，可以使用babel-plugin-component插件。
安装：npm i babel-plugin-component -D
然后在 .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"]
  }
  }
 }

此时，按需导入就可简化为：

import {Header} from 'mint-ui'
Vue.component(Header.name, Header)