vue項目按需引入Element-UI遇到的問題及解決辦法

1.

按需引入

借助 babel-plugin-component，我們可以只引入需要的組件，以達到減小項目體積的目的。

首先，安裝 babel-plugin-component：

npm install babel-plugin-component -D

2.在項目的src文件夾下新建.babelrc文件

，將 .babelrc 修改為：

{
  "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }

3.輸入npm run serve 命令重啟項目，遇到了以下問題

由此可見是找不到babel-preset-es2015這個模塊。
解決辦法：

1.安裝@babel/preset-env；項目目錄下，運行命令行

npm i @babel/preset-env -D

或cnpm i @babel/preset-env -D

如果使用cnpm ,需要提前安裝cnpm,命令為npm install cnpm -g --registry=https://r.npm.taobao.org。
2.修改.babelrc文件，把es2015改成@babel/preset-env

{
"presets": [["@babel/preset-env", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
3.重跑項目 npm run serve
4.在出現以上錯誤的同時，也報了以下錯誤

百度發現：

 

 檢查我的webpack版本，輸入命令：npm info webpack

 

 

發現此時我的版本已經是最新版本，應該不是版本的問題。

 

 5.由此可見，我的問題應該就是第一條，缺少依賴

babel-preset-es2015。執行步驟1到步驟3即可解決。
6.在main.js中引入element-ui,以及css樣式。

 

 

7.接下來就是引入項目所需要的部分組件
比如 Button 和 Select,注意需要Element-UI的每個組件都需要引入

 

 這樣vue和Element-UI的環境就搭建好了