vue使用element-ui按需引入時踩過的那些坑

Posted on by

眾所周知，使用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按需引入時踩坑內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：