1. vue プロジェクトを作成するには、webpack と cli に基づく2 つの方法があります。
注: バージョンの競合。あるバージョンまたはそれより前のバージョンをお持ちの場合は、アップグレードできます。
npm update -g @vue/cliこれは私のバージョンです
2. 環境: VS コード
3. まず、プロジェクトフォルダーの下に新しいプロジェクトファイルを作成します。
新しい端末
プロジェクトファイルに移動
- 方法 1: Vue init Webpack プロジェクト フォルダーの名前
- 方法 2: VSCode を開き、ターミナルを開き、ディレクトリを入力します: D:\VScodeWorkspace、vue 作成プロジェクト フォルダーの名前を入力します (yarn をインストールした後、npm の代わりにyarn を使用してプロジェクトを作成できます)
- CLIモード
vue は hello-world を作成します
ニーズに応じて選択し、通常は Enter キーを使用してデフォルトの構成を選択します。
建物：
作成が完了したら、プロンプトに従ってプロジェクトを入力し、実行します。
ディレクトリは次の図に示されています。
Vue-cli プロジェクトの各フォルダーとファイルの目的は次のとおりです。
dist フォルダー: npm run build コマンドによってパッケージ化および生成されるデフォルトの静的リソース ファイル。
本番環境
とデプロイメントに使用されます。 ファイル、CSS、JS、イメージ、およびインデックスsrc
フォルダー:参照する必要があるプロジェクトのソース コードとリソース ファイルを保存します。
api フォルダー: ajax 関連の操作のコード ファイルを置きます:index.js (関連インターフェイス)、ajax.js (カプセル化 axios、インターセプター)。一部はサービスと呼ばれます: 自己構成された vue リクエスト バックグラウンド インターフェイス メソッド
src-common フォルダー:スタイラス混合ファイル .styl、パブリックまたは
src-components フォルダーには書き込まないでください。 src -mock フォルダー: vue 開発から抽出されたいくつかのパブリック コンポーネントを保存します。
src-mock フォルダー:モック データストレージ ファイルとモック シミュレーション インターフェイス (バックグラウンド インターフェイスがない場合、またはインターフェイスが不完全な場合は、バックグラウンド インターフェイスをシミュレートできます)
src-pages フォルダー:ルーティングに関連するコンポーネント
src-router フォルダー: vue-router、router、およびルーティング設定
src-storeフォルダー:状態データを vue に保存し、vuex を使用して
App.vue ファイルを集中管理します:タグを使用して、プロジェクト全体の.vue コンポーネント main.js ファイルをレンダリングします。
vue-cli プロジェクトのエントリ ファイル
package.json ファイル:プロジェクトの開始とパッケージ化のための、node_modules リソース部門と npm コマンド管理に使用されます
。 ビルド フォルダー: Webpack 関連の設定とスクリプトを保存するために使用されます。開発中、このフォルダー内のwebpack.base.conf.js は、less や sass などの CSS プリコンパイル済みライブラリの構成、または UI ライブラリの
構成フォルダーの構成にまれにのみ使用されます。主に、開発環境を区別するために使用される構成ファイルが保存され、行に応じて異なります。環境では、このフォルダーの下の config.js で開発環境のポート番号を構成するためによく使用されます。本番環境でホット ロードを有効にするか静的リソースの相対パスを設定するかどうか、gzip 圧縮を有効にするかどうか、 npm run buildコマンド
Webpackに基づく
vue init webpack hello-world
同様に、必要に応じて設定します
同様に、プロジェクトを入力して開始する手順に従います。
プロジェクトディレクトリは次の図に示されています
- Vue-cli は webpack を内部的にカプセル化し、いくつかの外部依存関係のみを提供します。また、vue プロジェクトに適した多くの最適化が行われており、vue.config.js を使用してプロジェクトを管理できます。package.jsonは非常に新鮮です
- 結局のところ、webpack はネイティブであるため、特定のニーズにより適しています。ただし、管理もより複雑になります。ただし、コミュニティにはアップグレードがあり、最初からアップグレードの利点を得ることができます。前者は、vue-cli プロジェクトがアップグレードされるのを待つだけです。
- 一般的には vue-cli で十分ですが、vue-cli で実現できることは webpack で実現できる必要があり、そうでない場合は必ずしも実現できるわけではありません。