vue2.6 element-ui 按需引入样式未生效 Error: Cannot find module ‘babel-preset-es2015解决
element-ui按需引入遇到两个问题元素会显示,但是样式没有生效编译过程中遇到错误Error: Cannot find module ‘babel-preset-es2015‘官方文档:element-ui按需引入一、样式问题:引入组件的同时,要引入样式文件main.js中:import Vue from 'vue'import App from './App.vue'import route
·
element-ui按需引入遇到两个问题
- 元素会显示,但是样式没有生效
- 编译过程中遇到错误
Error: Cannot find module ‘babel-preset-es2015‘
官方文档:element-ui按需引入
一、样式问题:
引入组件的同时,要引入样式文件
main.js中:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
//引入组件及对应的样式文件
import {Button, Table, Upload} from 'element-ui'
import 'element-ui/lib/theme-chalk/button.css'
import 'element-ui/lib/theme-chalk/table.css'
import 'element-ui/lib/theme-chalk/upload.css'
Vue.config.productionTip = false
Vue.use(Table)
Vue.use(Button)
Vue.use(Upload)
new Vue({
router,
render: h => h(App)
}).$mount('#app')
二、编译报错
官方文档中这样写:
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
npm install babel-plugin-component -D
然后,将 .babelrc 修改为:
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
解决方案:
项目中使用的vue/cli脚手架版本为4.x,babel配置文件为babel.config.js
babel.config.js可以视为与.babelrc效果相同
安装依赖
npm i @babel/preset-env -D
而且,也不再使用es2015,改成@babel/preset-env,两者都是用来编译es6语法
在babel.config.js中配置:
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
["@babel/preset-env", { "modules": false }]
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
此时项目就可以跑起来了
更多推荐
已为社区贡献6条内容
所有评论(0)