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

2022-05-20 19:02:29

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

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

熱門文章