vue-cli按需引入Element UI组件

时间:2023-03-09 08:43:09
vue-cli按需引入Element UI组件

一、环境

  使用vue-cli搭建的环境

二、安装 babel-plugin-component

  npm install babel-plugin-component -D

三、修改.babelrc文件,可以直接拷贝一下的配置,红色部分是在原来基础上添加的。

 {
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [
"transform-vue-jsx",
"transform-runtime",
14 [
15 "component",
16 {
17 "libraryName": "element-ui",
18 "styleLibraryName": "theme-chalk"
19 }
20 ]
],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}

四、在main.js文件添加所需的组件即可,例如添加Button组件;详情请看Element UI 官网

import { Button} from 'element-ui'

Vue.use(Button)