众所周知，使用element-ui，为了达到减小项目体积的目的 ，我们在实际项目中更多的是采用按需引入的方法， 下面就来讲讲那些我踩过的坑。

步骤：

第一步：安装 element-ui 时把 element 也安装一下，

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

第二步：安装 babel-plugin-component ，

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

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

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

但是我们启动会报错 ‘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);

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

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

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

你有踩过哪些坑？ 欢迎探讨交流

总结

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

猜你喜欢

• 微信小程序复选框怎么写，代码是什么

  这篇文章主要为大家详细介绍了微信小程序复选框组件使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• React实现浏览器自动刷新的方法是什么

  这篇文章主要介绍了react实现浏览器自动刷新的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• vuex数据持久化实现有什么方法？

  vuex数据持久化实现有什么方法？对于vue数据持久化的问题，下面小编通过实例来给大家分享一下实现方法，有vuex-persistedstate和vuex-persist这两种方法，下面我们来详细了解一下。

• 用JS方法怎样制作表单全选或反选的选择功能

  这篇文章主要为大家详细介绍了JavaScript实现表单全选或反选效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• JS的webpack如何配置和应用？

  本篇文章给大家带来了关于javascript的相关知识，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，下面一起来看一下JavaScript webpack5配置及使用基本介绍，希望对大家有帮助。