目次
1. 建設準備
- VScode/HBuilder などのフロントエンド開発ツール
- node.js&npm ローカル開発環境
2、node.jsのインストール
1. ダウンロードしてインストールします
Node.js 公式ウェブサイト: Node.js 公式ウェブサイト
インストールが成功したら、CMD コンソールに次の 2 つのコマンドを入力して、インストールが成功したかどうかを確認します。
#查看node版本
node -v
#查看npm版本
npm -v
2. デフォルトのインストールディレクトリとキャッシュログディレクトリを設定します。
①. デフォルトのインストールディレクトリとキャッシュログディレクトリを作成します（私のnode.jsディレクトリはDドライブ上にあるので、node.jsフォルダ直下に作成します）
グローバル インストール ステートメントを実行すると、インストールされたモジュールはデフォルトで C:\Users\username\AppData\Roaming\npm ディレクトリにインストールされるため、C ドライブは時間の経過とともに簡単にいっぱいになります (C ドライブはこれを無視できるほど十分な大きさです)ステップ)、そのため、C ドライブのスペースを節約するために、デフォルトのインストール ディレクトリとキャッシュされたログを他のドライブ文字に再構成します。
②. コマンドを実行して、デフォルトのインストールディレクトリとキャッシュログディレクトリを先ほど作成したフォルダーに設定します。
npm config set prefix "D:\项目配件\Node\node_global"
npm config set cache "D:\项目配件\Node\node_cache"
3. 環境変数を構成する
①. winキーを押して「システム環境変数の編集」と入力し、下の「環境変数」を開いてクリックします。
②. システム変数の下に新しい NODE_PATH 変数を作成し、デフォルトのインストール ディレクトリ node_global の下にある node_modules のパスを入力します。
D:\项目配件\Node\node_global\node_modules
③. システム変数のPathを入力し、node.jsのインストールパスを入力します。
D:\项目配件\Node\
④. ユーザー変数のPathを入力し、node.jsのデフォルトのモジュール呼び出しパスを入力します。
D:\项目配件\Node\node_global
D:\项目配件\Node\node_cache
4.タオバオミラーの設定
NPMでインストールすると海外サーバーを使用するためタイムアウトエラーが多発するため、国内のタオバオミラーに変更することでインストールを高速化できます。Taobao NPM ミラーは完全な npmjs.com ミラーであり、公式サービスとの同期を可能な限り確保するために、現在同期頻度は 10 分ごとです。
①、cnpmをインストールします
npm install -g cnpm --registry=https://registry.npm.taobao.org
②. インストールが成功したかどうかを確認する
cnpm config get registry
3. vue と Scaffolding をインストールする
1.vue.jsをインストールする
cnpm install vue -g
2. インストールが成功したことを確認します
cnpm info vue
3. Webpack モジュールをインストールする
cnpm install webpack -g
4. webpack-cli をインストールする
cnpm install --global webpack-cli
5. vue-cli 3.x をインストールする
cnpm install @vue/cli –g
4番目に、vue3プロジェクトを作成します
管理者として cmd コンソールを開き、プロジェクトを作成するディレクトリを入力して、プロジェクトの作成を開始します。
1. プロジェクトを作成する
vue create [项目名称]
2. インストールバージョンを選択します
vue2 の
デフォルト インストール vue3 の
デフォルト インストール カスタム インストール
ここでは 3 番目のカスタム インストールを選択します
3. プロジェクト要件の構成
[* は選択を表します。プロジェクトのニーズに応じて、空白スペースを選択し、選択後に Enter キーを押して確定します]
Babel (コードを下位互換性に変換する JavaScript コンパイラ)
TypeScript (プログラミング言語、大規模プロジェクトに推奨)
Progressive Web App (PWA) Support-APP は
Router (ルーティング)
Vuex (Vuex)
CSS プリプロセッサ (CSS プリプロセッサ) 処理を使用します)
リンター / フォーマッタ (コード スタイル/フォーマット)
ユニット テスト (単体テスト)
E2E テスト (e2e テスト)
4.vueのバージョンを選択します
vue3 プロジェクトを作成したいので、ここでは 3.x を選択します。
5. ヒストリールーターを使用するかどうか
Vue-Router は、ブラウザー独自のハッシュ モードと履歴モード機能を利用して、フロントエンド ルーティングを実装します (ブラウザーが提供するインターフェイスを呼び出すことによって)。 ハッシュ : ブラウザーの URL アドレス バーの # 記号 (次の URL: http:
// www .abc.com/#/hello、ハッシュ値は「#/hello」です）、ハッシュは HTTP リクエストに含まれていない（バックエンドにはまったく影響しません）ため、ハッシュを変更してもページはリロードされません
History: HTML5 History インターフェイスの新しい PushState( ) メソッドと replaceState( ) メソッドを利用します (特定のブラウザのサポートが必要です)。シングルページのクライアント アプリケーション、履歴モードではバックグラウンド構成のサポートが必要
6. CSS プリプロセッサを選択する
7.ESLintを選択します
8. 追加の Lint 機能を選択します
保存時の Lint は Lint を検出し、保存
後のコミット時に修正します
9. Bable と ESLint の設定場所
10. デフォルト設定として保存するかどうか (「はい」を選択した場合、デフォルト名を自分で作成する必要があります)
11. 正常に作成されました
5. プロジェクトを開始する
作成が成功した際のプロンプトに従って、コマンドを使用してプロジェクトを実行します
#项目运行
npm run serve
6、ディレクトリ構造の分析
