在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)
        Vue.use(Message)
        
        //可使用this.$message
        Vue.prototype.$message = Message
    }
}

在main.js中引入

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

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

上一篇:webpack10:使用 babel 处理高版本的 js 语法


下一篇:脚手架手动升级记录。babel 6.x -> 7.x;eslint 4.x -> 7.x;