Vant 在vue-cli 4.x中按需載入操作
在vue-cli 4.x中使用vant出現的問題,在這裡記錄一下
一. 如果使用按需載入,需要下載babel-plugin-import轉換一下,下載 babel-plugin-import
cnpm install babel-plugin-import -D
**二. 在根目錄中找到 babel.config.js 檔案,新增欄位 **
"plugins": [
["import",{
"libraryName":"vant","style":true
}
]
]
最終我的配置是這樣的
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',],"plugins": [
["import","style":true
}
]
]
}接下來重啟專案一下。
補充知識：vue cli 3 升級到 vue cli 4 方法步驟及升級點總結
官方升級英文文件，中文文件相對滯後。
簡介：vue cli 4 官方已經更新有一段時間了，現在是4.0.5 版本，看了官方文件大概有二十幾點的更新，還是乾貨滿滿呀，值得升級一下，下面是升級步驟。
一.首先，在全域性安裝最新的 Vue CLI：
npm install -g @vue/cli # OR yarn global add @vue/cli
檢查安裝的版本
vue -V # 輸出:@vue/cli 4.x.x 說明@vue/cli 4安裝成功( vue cli 3的版本會輸出 3.x.x )
踩坑記錄
npm install -g @vue/cli 執行成功，但是執行 vue -V 輸出的還是3.5.6(我以前安裝的版本)，
於是又重新執行 npm install -g @vue/cli，顯示成功，執行 vue -V 輸出的還是3.5.6，
一臉懵逼 ，然後重啟電腦，再執行vue -V 輸出 @vue/cli 4.0.5，解決 。
二.在專案根目錄下執行
vue upgrade
然後出現
提示 繼續升級這些外掛嗎？ 輸入 Y 即可.
三.等步驟二 執行完會發現主要有 2 個檔案被修改
1.檔案 babel.config.js
主要是 babel 的預設由@vue/app 改成了@vue/cli-plugin-babel/preset
原來的
module.exports = {
presets: [
'@vue/app',// 這行
[
'@babel/preset-env',{
useBuiltIns: 'entry'
}
]
]
}
升級後的
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',{
useBuiltIns: 'entry'
}
]
]
}
2.檔案 package.json （package-lock.json 也會更改）
主要是依賴升級
原來的
{
"@vue/cli-plugin-babel": "^3.11.0","@vue/cli-plugin-eslint": "^3.11.0","@vue/cli-service": "^3.11.0"
}
升級後的
{
"@vue/cli-plugin-babel": "^4.0.5","@vue/cli-plugin-eslint": "^4.0.5","@vue/cli-service": "^4.0.5"
}
四.然後啟動專案
npm run serve
然後報下面的錯
1.第一個錯（警告）
WARN A new version of sass-loader is available. Please upgrade for best experience.
這行是 vue cli 4 升級了自己的依賴 sass-loader 導致的
它把 sass-loader由 ^7.x.x 的版本升級到了 ^8.0.0,而我專案中使用的是^7.1.0
所以升級一下自己專案的 sass-loader 就好了
執行下面命令即可
npm i [email protected] -D
2.然後第二個錯說沒有安裝core-js
vue cli 4把 core-js由 ^2.x.x 的版本升級到了 ^3.x.x
於是安裝一下
npm i core-js
然後重啟專案還是不行，看了下官方文件和 babel 有關
main.js 程式碼中
import '@babel/polyfill'
隱藏這個程式碼
重啟好了
然後把 @babel/polyfill 換成 babel-polyfill 即可
npm i babel-polyfill
main.js 程式碼中 改為
import 'babel-polyfill'
五.vue cli 4 主要升級點總結
1."@vue/cli-plugin-babel","@vue/cli-plugin-eslint","@vue/cli-service"由 v3 的版本升級到了 v4
2.sass-loader由 v7 的版本升級到了 v8
3.core-js由 v2 的版本升級到了 v3
4.webpack-chain由 v4 的版本升級到了 v6
5.css-loader由 v1 的版本升級到了 v3
6.url-loader由 v1 的版本升級到了 v2
7.file-loader由 v3 的版本升級到了 v4
8.copy-webpack-plugin由 v4 的版本升級到了 v5
9.terser-webpack-plugin由 v1 的版本升級到了 v2
10.@vue/cli-plugin-pwa由 v3 的版本升級到了 v4
11.新增外掛 vue add vuex vue add router
12.pug-plain已重新命名為pug-plain-loader
13.預設目錄結構已更改
src/store.js 改為 src/store/index.js
src/router.js 改為 src/router/index.js
14.由於相容性原因，仍支援 router＆routerHistoryMode 選項 preset.json
但是現在建議使用它來 plugins: { '@vue/cli-plugin-router': { historyMode: true } }
獲得更好的一致性
15.api.hasPlugin('vue-router')不再受支援，現在 api.hasPlugin('router')
16.lintOnSave 選項的預設值（未指定時）從 true 更改為 default
17.廢棄vue-cli-service test:e2e
18.@vue/cli-plugin-e2e-nightwatch Nightwatch.js已從0.9升級到1.x
19.@vue/cli-plugin-unit-mocha 升級到Mocha 6
20.@vue/cli-plugin-unit-jest jest由 v23 升級到v24
21.@vue/cli-plugin-typescript 更好的ts(x)支援 ，勝過js(x)
參考連結
vue cli 4 官方英文升級文件
以上這篇Vant 在vue-cli 4.x中按需載入操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。