vue使用element-ui按需引入時的坑怎么解決

這篇文章主要講解了“vue使用element-ui按需引入時的坑怎么解決”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue使用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);

感謝各位的閱讀，以上就是“vue使用element-ui按需引入時的坑怎么解決”的內容了，經過本文的學習后，相信大家對vue使用element-ui按需引入時的坑怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！