vue引入多个UI框架

背景

本身项目里使用antdv，由于需要选择日期区间的组件，想再引入Element。

引入antdv：

1. 初始化antdv
   $ npm i --save ant-design-vue
2. 局部引入

import 'ant-design-vue/dist/antd.css'
import {
  Button,
  ...
  DatePicker
} from 'ant-design-vue'
Vue.use(Button)
...
Vue.use(DatePicker)

或全局引用也可以。
可参考 官方文档

引入Element：

由于以antdv为主，element选择按需引入
3. 初始化element
$ npm i --save element
4. 安装 babel-plugin-component：
npm install babel-plugin-component -D
5. 修改.babelrc

  "plugins": ["transform-vue-jsx", "transform-runtime",
    ["import", { "libraryName": "antd", "style": true },
    "component", [
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]]
  ],

6. 按需引入

import { Button, Select } from 'element-ui'
Vue.use(Button)
Vue.use(Select)

两个UI框架的名字若相同，引入时需要起别名，如：

import 'element-ui/lib/theme-chalk/index.css'
import ElDatePicker from 'element-ui/lib/date-picker'
Vue.use(ElDatePicker)

可参考 官方文档