vue 按需引入element-ui時遇到的坑

爲了減小項目體積，需要按需引入element-ui，但是按照官方步驟走的時候遇到了很多坑

官方步驟

問題出在第二步，我是用vue3.0搭建的腳手架，只有一個babel-config.js的文件夾，但是把放進這個文件夾會報錯，所以我在項目根目錄新建了一個.babelrc文件，運行時發現報錯es2015什麼的，於是運行npm install babel-preset-es2015 --save-dev 安裝es2015。

安裝完成還是報錯：plugin/preset files are not allowed to export objects, only functions

解決方法：

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

npm i @babel/preset-env -D

2.修改.babelrc文件，把es2015改成@babel/preset-env

{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3.重跑項目
其實.babelrc的配置項，可以寫入到babel.config.js文件中，之後不再需要.babelrc文件了