在Vue中按需引入elementui组件

开发环境

1. vue: 2.6.11
2. elementui: 2.15.6
3. vue/cli: 4.5.11

安装elementui

npm i element-ui -S

完整引入

根据官网指南编辑src/main.js即可。

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

按需引入

安装 babel-plugin-component

这一步按照官网文档进行操作

npm install babel-plugin-component -D

修改babel.config.js

注意：在新版的vue/cli中，生成的脚手架项目中不再包括.babelrc，而是改成了babel.config.js

默认生成的babel.config.js文件是这样的：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

修改后是这样的：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    // 官方文档中使用的是["es2015", { "modules": false }]，要替换
    ['@babel/preset-env', { 'modules': false }]
  ],
  //plugins照抄文档即可
  plugins: [
    [
      'component',
      {
        'libraryName': 'element-ui',
        'styleLibraryName': 'theme-chalk'
      }
    ]
  ]
}

引入elementui组件

在src目录下创建文件 elementui/index.js，并选择需要的组件

注意这个install关键字，其实就是定义了一个插件

import { Button, Message} from 'element-ui'
export default {
    install(Vue) {
        Vue.use(Button)
        //注意，如果使用了Message组件，并使用Vue.use(Message)的话。就掉坑里了。每次刷新页面都会弹出一个Message组件
        //Vue.use(Message)
        
        //直接使用this.$message
        Vue.prototype.$message = Message
    }
}

在main.js中引入

# 这里不需要再引入elementui的样式了
import elementui from './elementui'
Vue.use(elementui)

引入之后，就可使用相关组件了。