您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)Vant 在vue-cli 4.x中如何實現(xiàn)按需加載,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
在vue-cli 4.x中使用vant出現(xiàn)的問題,在這里記錄一下
一. 如果使用按需加載,需要下載babel-plugin-import轉(zhuǎn)換一下,下載 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",{ "libraryName":"vant", "style":true } ] ] }
接下來重啟項目一下。
補充知識:vue cli 3 升級到 vue cli 4 方法步驟及升級點總結(jié)
官方升級英文文檔,中文文檔相對滯后。
簡介:vue cli 4 官方已經(jīng)更新有一段時間了,現(xiàn)在是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 執(zhí)行成功,但是執(zhí)行 vue -V 輸出的還是3.5.6(我以前安裝的版本),
于是又重新執(zhí)行 npm install -g @vue/cli,顯示成功,執(zhí)行 vue -V 輸出的還是3.5.6,
一臉懵逼 ,然后重啟電腦,再執(zhí)行vue -V 輸出 @vue/cli 4.0.5,解決 。
二.在項目根目錄下執(zhí)行
vue upgrade
然后出現(xiàn)
提示 繼續(xù)升級這些插件嗎? 輸入 Y 即可.
三.等步驟二 執(zhí)行完會發(fā)現(xiàn)主要有 2 個文件被修改
1.文件 babel.config.js
主要是 babel 的預(yù)設(shè)由@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', // 這行 [ '@babel/preset-env', { 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 導(dǎo)致的
它把 sass-loader由 ^7.x.x 的版本升級到了 ^8.0.0,而我項目中使用的是^7.1.0
所以升級一下自己項目的 sass-loader 就好了
執(zhí)行下面命令即可
npm i sass-loader@8.0.0 -D
2.然后第二個錯說沒有安裝core-js
vue cli 4把 core-js由 ^2.x.x 的版本升級到了 ^3.x.x
于是安裝一下
npm i core-js
然后重啟項目還是不行,看了下官方文檔和 babel 有關(guān)
main.js 代碼中
import '@babel/polyfill'
隱藏這個代碼
重啟好了
然后把 @babel/polyfill 換成 babel-polyfill 即可
npm i babel-polyfill
main.js 代碼中 改為
import 'babel-polyfill'
五.vue cli 4 主要升級點總結(jié)
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.默認目錄結(jié)構(gòu)已更改
src/store.js 改為 src/store/index.js
src/router.js 改為 src/router/index.js
14.由于兼容性原因,仍支持 router&routerHistoryMode 選項 preset.json
但是現(xiàn)在建議使用它來 plugins: { '@vue/cli-plugin-router': { historyMode: true } }
獲得更好的一致性
15.api.hasPlugin('vue-router')不再受支持,現(xiàn)在 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)
上述就是小編為大家分享的Vant 在vue-cli 4.x中如何實現(xiàn)按需加載了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。