按照官网的教程:按需引入需要借助:babel-plugin-component
npm install babel-plugin-component -D
//由于babel编译插件版本问题,需要安装最新的babel编译插件 “@babel/preset-env” ,执行以下安装命令:
npm install @babel/preset-env -D //
注意:官网是修改 .babelrc 文件,我这里为了方便就直接修改 babel.config.js 文件了
对应的项目根目录下的 babel.config.js 需要修改成为以下: 【官网上有出入】
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
[
"@babel/preset-env", { modules: false }
]
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
然后根据自身需要 在main.js内引入想要的组件(这里只用了 少数组件做例子)【其他组件引入 看官网】
//
import '../node_modules/element-ui/lib/theme-chalk/index.css'; // 注意要引入样式
import {Button,Select} from 'element-ui';
Vue.use( Button);
Vue.use( Select);