vue.js プロジェクトの作成方法

方法: まず、node と cnpm をインストールします。次に、「npm install --global vue-cli」コマンドを使用して vue-cli をインストールし、次に「vue init webpack project name」コマンドを使用してプロジェクトを作成します。最後にプロジェクト ディレクトリに入り、「cnpm i」コマンドを使用して依存関係をインストールします。

関連する推奨事項: 「vue.js チュートリアル 」

このチュートリアルの動作環境: Windows7 システム、vue2 .9 バージョン、Dell G3 コンピューター。

1. ノード環境をインストールします

1. ダウンロード アドレスは: https://nodejs.org /ja /

2. インストールが成功したかどうか確認: バージョン番号が出力されていれば、ノード環境のインストールが成功したことを意味します

3. 効率を向上させるために、タオバオのミラーを使用できます: http://npm.taabao.org/

入力: npm install -g cnpm –registry= https://registry.npm.taabao.org 、npm イメージをインストールできます。今後 npm を使用する場合は、代わりに cnpm を使用してください。

インストールが成功したか確認します:

2. vue プロジェクト環境を構築します。

1. vue-cli をグローバルにインストールします

#npm install --global vue-cli<span class="line"></span>

2. プロジェクト ディレクトリを入力し、Webpack テンプレートに基づいて新しいプロジェクトを作成します: vue init webpack プロジェクト名

Vue build ==> パッケージ化方法は Enter キーを押すだけです;

# vue-router をインストール ==> vue-router をインストールしますか? プロジェクトで使用する必要があるので Enter を押してください;

ESLint を使用してコードを lint ==> js 構文検出が必要かどうか現在 so n は必要ありません Enter;

単体テストのセットアップ ==> 単体テスト ツールをインストールするかどうか 現在は so n は必要ありません Enter;

e2e テストをセットアップしますNightwatch ==> ; Do we need end-to-end testing tools? We don't need it at the moment, so press Enter;

3. プロジェクトを入力します: cd vue-demo, install dependency

# インストールが成功すると、プロジェクト フォルダーに追加のディレクトリが作成されます：node_modules

4. npm run dev, start the project

プロジェクトは正常に開始されます:

#3. vueプロジェクトディレクトリの説明## ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ ##1. build: ビルドスクリプトディレクトリ

1) build.js ==> 本番環境ビルドスクリプト;

# 2) check-versions.js ==> npm、node.js のバージョンを確認; <br>

3) utils.js ==> ビルド関連ツールメソッド;

4) vue-loader.conf .js ==> CSS ローダーを設定し、CSS のコンパイル後にプレフィックスを自動的に追加します;

5 ) webpack.base.conf.js ==> Webpack基本設定;

<br> 6) webpack.dev.conf.js ==> webpack開発環境設定; => webpack実稼働環境の構成;

2. 構成: プロジェクト構成

1) dev.env.js ==> 開発環境変数;

2) Index.js ==> プロジェクト設定ファイル;

3 ) prod.env.js ==> 本番環境変数;

3. node_modules: npm によってロードされるプロジェクト依存モジュール

4. src: 基本的には開発したいディレクトリです必要な作業はすべてこのディレクトリにあります。これには、いくつかのディレクトリとファイルが含まれています:

1) 資産: リソース ディレクトリ。ここには、いくつかの画像やパブリック JS およびパブリック CSS が配置されます。ここのリソースは webpack によって構築されます;

2) コンポーネント: コンポーネント ディレクトリ、作成したコンポーネントはこのディレクトリに配置されます;

3) ルーター: フロントエンド ルーティング、ルーティング設定が必要です パスはindex.jsに記述されています;

4) App.vue: ルートコンポーネント;

5) main.js: エントリjsファイル;

5 . static: static 画像、フォントなどのリソース ディレクトリ。 webpack ではビルドされません。

6.index.html: ホームページのエントリ ファイル。メタ情報などを追加できます。

7. package.json: npm パッケージ構成ファイル。定義します。プロジェクトの npm スクリプト、依存関係パッケージ、その他の情報<br>

8. README.md: プロジェクト説明ドキュメント、マークダウン形式

9. .xxxx ファイル: これらは、構文設定、git 設定などを含むいくつかの設定ファイルです。

プログラミング関連の知識の詳細については、プログラミング入門を参照してください。 ！

以上がvue.js プロジェクトの作成方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。