vue-cli3按需引用elementUI

Posted 2021-09-28 Shiryan

1、安装element-ui
npm i element-ui -S

2、根据官网中的按需引入的介绍，安装babel-plugin-component后，

npm install babel-plugin-component -D

3、官网介绍的是，修改.babelrc为

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

但vue-cli3中没有.babelrc，其实在balel.config.js中修改就好。但直接把上面的复制粘贴到balel.config.js中，会保错，修改为如下即可

{
  presets: ["@vue/app"],
  plugins: [
    [
        \'component\',
        {
            libraryName: \'element-ui\',
            styleLibraryName: \'theme-chalk\'
        }
    ]
  ]
}

4、在main.js中按需引入

import Vue from \'vue\';
import { Cascader } from \'element-ui\';
import \'element-ui/lib/theme-chalk/index.css\'
import App from \'./App.vue\';

Vue.component(Cascader.name, Cascader)
// Vue.use(Cascader)

new Vue({
  el: \'#app\',
  render: h => h(App)
});