vue按需引入element-ui

element ui 按需引入

官网链接：link.

1.安装npm

npm i element-ui -S

2.按需引入需要借助 babel-plugin-component

npm install babel-plugin-component -D

3.打开文件 babel.config.js 进行配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

4.在src文件下创建文件夹 element

5.在element文件夹下创建文件 index.js

6.index.js 写入

import {
    Button,
    MessageBox,
} from 'element-ui';
const elementUi = {
    install: function (Vue) {
        Vue.use(Button);

        Vue.prototype.$message = Message
        Vue.prototype.$confirm = MessageBox.confirm;
    },

}
export default elementUi

7.main.js入口文件中进行引入

// 引入element-ul样式
import 'element-ui/lib/theme-chalk/index.css';
// import elementUi from 'element-ui'
import elementUi from './element/index'
Vue.use(elementUi)

8.之后每使用一个新的标签 需要在index.js中进行挂载