温馨提示×

vue使用element-ui按需引入时的坑怎么解决

发布时间:2022-05-20 17:44:41 来源:亿速云 阅读:116 作者:iii 栏目:开发技术

这篇文章主要讲解了“vue使用element-ui按需引入时的坑怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue使用element-ui按需引入时的坑怎么解决”吧!

步骤:

第一步:安装 element-ui 时把 element 也安装一下,

执行命令 npm i element-ui -Snpm i element -S

第二步:安装 babel-plugin-component ,

执行命令 npm install babel-plugin-component -D

第三步 :踩坑一: element-ui文档中是修改 .babelrc 文件中的配置,实际上我们的文档中根本没有这个文件夹,所以我们需要修改的是 bable.config.js 文件中的配置。

踩坑二: element-ui文档中提示让将配置改为这样,于是就把 bable.config.js 文件配置成这样

vue使用element-ui按需引入时的坑怎么解决

但是我们启动会报错 ‘Error: Cannot find module 'babel-preset-es2015'’

这是因为缺少依赖 babel-preset-es2015 , 现在我们执行命令npm i babel-preset-es2015 --save 下载依赖,

然后启动之后还是会报错 ,于是我各种查资料文档得知:报错关于es2015,,这个是为了兼容ie(9-11),需要引入es2015,

所以需要把 babel-polyfill 和 babel-preset-es2015 两个npm 引入到package.json里(两个都要下载才可以),然后启动项目就可以了(但是这个方法容易因为版本不匹配报错,所以更推荐使用下面的方法)。

踩坑三: 可以将 es2015 换成这个 @babel/preset-env ,但是同时也需要下载依赖,执行命令npm i @babel/preset-env -D

踩坑四: 但是此时也会报错:‘# 源文本中存在无法识别的标记。。。’

那是因为 npm 无法识别 @ 符号,解决方法:只需要使用引号将要安装的依赖包名包起来就解决了。

所以最后执行的命令为: npm i '@babel/preset-env' -D

然后 bable.config.js文件的配置是这样:

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

配置的坑就完了,接下来是引入:这个引入文档上写得还是不错,

但是有一点需要注意, 踩坑五:

组件中我使用了布局容器:

    <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
    </el-container>

我认为这个都是Container 布局容器,在 main.js 中这样引入即可:

//element-ui按需引入
    import {
      Container
    } from 'element-ui'
    Vue.use(Container);

结果总是报错:&lsquo;Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. &rsquo; 无论我怎么检查都是错的,绞尽脑汁啊,终于我发现了,为什么没有报 el-container 的错,所以我成功了

每一个不同的标签都是一个不同组件,使用都需要分别引入,正确的是这样:

 //element-ui按需引入
    import {
      Container,Header,Main
    } from 'element-ui'
    Vue.use(Container);
    Vue.use(Header);
    Vue.use(Main);

感谢各位的阅读,以上就是“vue使用element-ui按需引入时的坑怎么解决”的内容了,经过本文的学习后,相信大家对vue使用element-ui按需引入时的坑怎么解决这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

推荐内容:element-ui中按需引入的实现

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

免费拨打  400 100 2938 免费拨打 400 100 2938
24小时售后技术支持 24小时售后技术支持
返回顶部 返回顶部