眾所周知，使用element-ui，為了達(dá)到減小項(xiàng)目體積的目的 ，我們?cè)趯?shí)際項(xiàng)目中更多的是采用按需引入的方法， 下面就來講講那些我踩過的坑。

步驟：

第一步：安裝 element-ui 時(shí)把 element 也安裝一下，

執(zhí)行命令 npm i element-ui -S 和 npm i element -S

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

執(zhí)行命令 npm install babel-plugin-component -D

第三步 ：踩坑一： element-ui文檔中是修改 .babelrc 文件中的配置，實(shí)際上我們的文檔中根本沒有這個(gè)文件夾，所以我們需要修改的是 bable.config.js 文件中的配置。

踩坑二： element-ui文檔中提示讓將配置改為這樣，于是就把 bable.config.js 文件配置成這樣

但是我們啟動(dòng)會(huì)報(bào)錯(cuò) ‘Error: Cannot find module 'babel-preset-es2015'’

這是因?yàn)槿鄙僖蕾?babel-preset-es2015 ， 現(xiàn)在我們執(zhí)行命令npm i babel-preset-es2015 --save 下載依賴，

然后啟動(dòng)之后還是會(huì)報(bào)錯(cuò) ，于是我各種查資料文檔得知：報(bào)錯(cuò)關(guān)于es2015，，這個(gè)是為了兼容ie（9-11），需要引入es2015，

所以需要把 babel-polyfill 和 babel-preset-es2015 兩個(gè)npm 引入到package.json里（兩個(gè)都要下載才可以），然后啟動(dòng)項(xiàng)目就可以了（但是這個(gè)方法容易因?yàn)榘姹静黄ヅ鋱?bào)錯(cuò)，所以更推薦使用下面的方法）。

踩坑三： 可以將 es2015 換成這個(gè) @babel/preset-env ，但是同時(shí)也需要下載依賴，執(zhí)行命令npm i @babel/preset-env -D ，

踩坑四： 但是此時(shí)也會(huì)報(bào)錯(cuò)：‘# 源文本中存在無法識(shí)別的標(biāo)記。。。’

那是因?yàn)?npm 無法識(shí)別 @ 符號(hào)，解決方法：只需要使用引號(hào)將要安裝的依賴包名包起來就解決了。

所以最后執(zhí)行的命令為： 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"
      }
    ]
  ]
}

配置的坑就完了，接下來是引入：這個(gè)引入文檔上寫得還是不錯(cuò)，

但是有一點(diǎn)需要注意， 踩坑五：

組件中我使用了布局容器：

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

我認(rèn)為這個(gè)都是Container 布局容器，在 main.js 中這樣引入即可：

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

結(jié)果總是報(bào)錯(cuò)：‘Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. ’ 無論我怎么檢查都是錯(cuò)的，絞盡腦汁啊，終于我發(fā)現(xiàn)了，為什么沒有報(bào) el-container 的錯(cuò)，所以我成功了

每一個(gè)不同的標(biāo)簽都是一個(gè)不同組件，使用都需要分別引入，正確的是這樣：

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

你有踩過哪些坑？ 歡迎探討交流

總結(jié)

到此這篇關(guān)于vue使用element-ui按需引入時(shí)踩坑的文章就介紹到這了,更多相關(guān)vue element-ui按需引入時(shí)踩坑內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論