ホームページ  >  記事  >  ウェブフロントエンド  >  vue-cli3 と vue-cli2 の違いは何ですか

vue-cli3 と vue-cli2 の違いは何ですか

WBOY
WBOYオリジナル
2022-03-17 15:16:206125ブラウズ

相違点: 1. 「vue-cli3」は webpack4 に基づいて構築されますが、「vue-cli2」は webpack3 に基づいて構築されます; 2. 「vue-cli3」は静的フォルダーを削除し、パブリック フォルダーを追加します。 「index.html」を公開に移動しました。

vue-cli3 と vue-cli2 の違いは何ですか

この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

#vue-cli3 と vue-cli2 の違いは何ですか

vue-cli 3 の github ウェアハウスは、元の独立した github ウェアハウスから vue プロジェクトに移行されました

vue- cli 3 のプロジェクト アーキテクチャは、vue-cli 2 の元のアーキテクチャを完全に放棄します。 3 の設計はより抽象的かつ簡潔です (後で詳しく紹介します)

vue-cli 3 はベースになっていますwebpack 4、vue-cli 2、または webapck 3 では

#vue-cli 3 は vue ui コマンドを提供し、視覚的な設定を提供し、よりユーザーフレンドリーです

vue-cli 3 も学習しているためロールアップのゼロ構成のアイデアなので、プロジェクトが初期化されると、見慣れたビルド ディレクトリはなくなり、webpack.base.config.js、webpack.dev.config.js、 webpack.prod.config.js。

vue-cli 3 の設計原則は 0 構成です。構成ファイルのルート ディレクトリにある build ディレクトリと config ディレクトリが削除されます。

静的フォルダーが削除され、パブリック フォルダーが削除されます。そして、index.html は public に移動されました

#Vue-cli で作成されたプロジェクトのディレクトリ構造3

vue_project

-- node_modules #インストールされたライブラリの依存関係

  • -- public # vue-cli2 の static と同等、パッケージ化され、そのままの状態で dist に配置されます

  • -- src # ソースcode

  • -- .browserslistrc # ブラウザ関連の設定

  • ## -- .gitignore # git 関連の設定。設定では一部を無視できます。 files

  • -- .babel.config.js # 構成 babel

  • ## -- package.json
  • -- package-lock.json # 実際のインストール バージョンが表示されます (package.json には ~ または ^ の後にバージョン番号が続く場合があるため、異なるバージョンの依存関係がインストールされる可能性があります)
  • # -- readme.md # マークダウン ドキュメント
  • #スタートアップ プロジェクトとパッケージ化プロジェクト

  • # スタートアップ プロジェクト
  • npm run serve

    # パッケージ化プロジェクト

    npm run build
  • 注: これらのコマンドは、package.json
{
  "name": "vue3test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    # 运行项目
    "serve": "vue-cli-service serve",
    # 打包项目
    "build": "vue-cli-service build"
  },
  # 运行依赖
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
# 开发依赖
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.4.0",
    "@vue/cli-service": "^4.4.0",
    "vue-template-compiler": "^2.6.11"
  }
}

[関連する推奨事項: "

vue.js チュートリアル

"]

# のスクリプトで構成されます。

以上がvue-cli3 と vue-cli2 の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。