ant-design-vue和ElementUIant-design-vue组件引入

一. ant-design-vue组件

npm i --save ant-design-vue

全局引入
main.js

import Vue from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false
Vue.use(Antd)
new Vue({
  render: h => h(App),
}).$mount('#app')

按需引入

1.安装babel-plugin-import：

npm install babel-plugin-import --save-dev

2.配置bable.config.js：

vue-cli2在bable.config.js添加

"plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
  ]

vue-cli3在bable.config.js添加

plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    ]
  ]

3.修改mian.js

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

二. ElementUI组件

安装 npm i element-ui -S

npm i element-ui -S

一.全局引入

修改mian.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

二.按需引入

1.安装babel-plugin-component：

npm install babel-plugin-component -D

2.配置bable.config.js：

在bable.config.js添加

 presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

3.修改mian.js

import 'element-ui/lib/theme-chalk/index.css'//引入样式
import { Table, TableColumn } from 'element-ui';
Vue.use(Table)
Vue.use(TableColumn)