VANtはvue-cli 4.xで必要に応じてロード操作を行う。

vue-cli 4.xでvantを使って発生した問題をここに記録してください。
一.必要に応じてロードする場合は、babel-plug-mportをダウンロードして、babel-plug-inmportをダウンロードしてください。
cnpm install babel-plug-i-mport-D
＊＊二.ルートディレクトリにbabel.co.fig.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方法のステップと進級点の総括に昇格します。
政府のアップグレードは英語の文書で、中国語の文書は相対的に遅れている。
あらすじ：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説明@vue/cli 4のインストール成功（vue cli 3のバージョンは3.x.xを出力します）
ログを踏む
npm install-g@vue/cliは実行に成功しましたが、vue-V出力を実行するのはまだ3.5.
そこでnpm install-g@vue/cliを再実行しました。成功を示しました。vue-V出力を実行するのはまだ3.5.
顔がぼんやりしていて、パソコンを再起動して、またvue-V出力@vue/cli 4.0.5を実行して、解決します。
二.プロジェクトルートディレクトリで実行する
vue ugrade
そして現れます

ヒントこれらのプラグインを引き続きアップグレードしますか？Yを入力すればいいです
三.手順二を実行したら、主に2つのファイルが修正されていることが分かります。
1.ファイルbabel.co.nfig.js
主にbabelのデザインを@vue/apから@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.ファイルパッケージ.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 ugrade 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]
2.そして第二の間違いはcore-jsがインストールされていないということです。
vue cli 4はcore-jsを^2.x.xのバージョンから^3.x.にアップグレードしました。
インストールします
npm i core-js
プロジェクトを再起動してもだめです。公式文書を見てbabelと関係があります。
mail.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」はv 3のバージョンからv 4にアップグレードされました。
2.sass-loaderはv 7のバージョンからv 8にアップグレードしました。
3.coree-jsはv 2のバージョンからv 3にアップグレードしました。
4.webpack-chainはv 4のバージョンからv 6にアップグレードしました。
5.css-loaderはv 1のバージョンからv 3にアップグレードしました。
6.url-loaderはv 1のバージョンからv 2にアップグレードしました。
7.file-loaderはv 3のバージョンからv 4にアップグレードしました。
8.copy-webpack-pluginはv 4のバージョンからv 5にアップグレードしました。
9.terser-webpack-pluginはv 1のバージョンからv 2にアップグレードしました。
10.@ vue/cli-plugin-pwaはv 3のバージョンからv 4にアップグレードしました。
11.プラグインvue add vue x vue add routerを追加します。
12.pug-playinはpug-pline-loaderと名前を変えました。
13.標準ディレクトリ構造が変更されました。
src/store.jsをsrc/store/index.jsに変更しました。
src/router.jsをsrc/router/index.jsに変更しました。
14.互換性のために、まだrouter＆routerHistoryModeオプションprest.jsonをサポートしています。
でも今はそれを使ってplugins:'@vue/cli-plug-router':{historyMode:true}
より良い一致を得る
15.appi.has Plugin('vue-router')はサポートされません。今はappi.has Plugin('router')
16.lintOnSaveオプションのデフォルト値(指定されていない場合)がtrueからdefaultに変更されました。
17.Vue-cli-service testを廃棄する：e 2 e
18.@ vue/cli-plugin-e 2 e-nightwatch Nightwatch.jsは0.9から1.xに昇格しました。
19.@ vue/cli-plugin-unit-mochaがMocha 6にアップグレードされました。
20.@ vue/cli-plugin-unit-just justはv 23からv 24にアップグレードする。
21.1@vue/cli-plugin-typescriptより良いts(x)のサポートは、js(x)よりも優れています。
参照リンク
vue cli 4公式英語アップグレード文書
以上のVANtはvue-cli 4.xの中で必要に応じて操作をロードします。つまり、小编は皆さんに共有する内容です。参考にしていただければと思います。どうぞよろしくお愿いします。