vue按需引入ui库、同时引入两种组件库

按需要引入 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 文件。这很不方便，尤其当你使用按需引入的方法引入多个组件时。

1. 使用插件, 首先当然是安装它：

 cnpm i babel-plugin-component -D

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

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

　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 文件！

参考：在vue项目中安装使用Mint-UI

官方参考：https://mint-ui.github.io/docs/#/en2/quickstart

Element-ui按需引入

element UI组件的单独使用（第一种方法）：
    1、cnpm install babel-plugin-component -D    
    2、找到.babelrc 配置文件
        plugins改为： 

  {
          "plugins": [
            [
              "component",
              {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
              }
            ]
          ]
        }

    3、
    import { Button, Select } from 'element-ui';

    Vue.use(Button)
    Vue.use(Select)

element UI组件的单独使用（第二种方法）：

    import { Button, Select } from 'element-ui';

    Vue.use(Button)
    Vue.use(Select)

    引入对应的css

import 'element-ui/lib/theme-chalk/index.css';

同时引入两种ui库（思路）

1.采用单独的样式，手动引入控件

2.名字相同的控件起个别名

//引入element-ui的Button控件
import {Button} from 'element-ui';
import 'element-ui/lib/theme-chalk/button.css';

Vue.use(Button);

//引入mint-ui的Actionsheet控件，Actionsheet里面用到了Button
import {Actionsheet} from 'mint-ui';
//名字相同的控件起个别名,这里用MyButton代表mint-ui的Button
import MyButton from 'mint-ui/lib/button';
import 'mint-ui/lib/actionsheet/style.css'
import 'mint-ui/lib/button/style.css'

Vue.component(Actionsheet.name, Actionsheet);
Vue.component(MyButton.name, MyButton);

使用mint-ui的ActionSheet：

<mt-button @click.native="sheetVisible = true" size="large">点击上拉 action sheet</mt-button>
    <mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>

使用element-ui的Button：

<el-button type="success">成功按钮</el-button>