经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
按需引入element-ui报错
来源:cnblogs  作者:慕枫三生  时间:2021/6/21 10:06:38  对本文有异议

按需引入element-ui报错

项目用的脚手架是 vue-cli 3
按照官方文档按需引入组件: https://element.eleme.cn/#/zh-CN/component/quickstart

安装 babel-plugin-component

  1. npm install babel-plugin-component -D

vue-cli3搭建的项目中没有 .babelrc 文件,我是直接写在 babel.config.js文件中:

  1. module.exports = {
  2. "presets": [["es2015", { "modules": false }]],
  3. "plugins": [
  4. [
  5. "component",
  6. {
  7. "libraryName": "element-ui",
  8. "styleLibraryName": "theme-chalk"
  9. }
  10. ]
  11. ]
  12. }

运行项目,发现报错,报错信息如下:

在网上查阅资料对问题的解读是这样的:

项目是基于vue-cli 3.x的版本,并没有官网的.babelrc文件,只有babel.config.js文件,而且项目不需要引入完整的element-ui,只需要引入部分,按官网的步骤安装babel-plugin-component后在babel.config.js写入内容,报错

解决方案:

1.安装@babel/preset-env

  1. npm i @babel/preset-env -D

2.修改.babelrc文件,把es2015改成@babel/preset-env

  1. module.exports = {
  2. "presets": [["@babel/preset-env", { "modules": false }]],
  3. "plugins": [
  4. [
  5. "component",
  6. {
  7. "libraryName": "element-ui",
  8. "styleLibraryName": "theme-chalk"
  9. }
  10. ]
  11. ]
  12. }

然后重新执行 np run serve,就可以了

参考链接:https://blog.csdn.net/zy21131437/article/details/108029284

原文链接:http://www.cnblogs.com/wj-forever/p/14899606.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号