Vue が環境とプロジェクトを構築する方法

この記事ではVueの環境構築方法とプロジェクト構築方法を詳しく紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

1.node.jsをダウンロードしてインストールします

https://nodejs.org/zh-cn/

2. パッケージ パスを変更します

ノードのインストール ディレクトリに新しいフォルダーnode_cache およびnode_globalを作成します

• node_global グローバル パッケージのダウンロードとストレージ
• node_cache ノード キャッシュ

CMD ウィンドウは 2 つのコマンドを実行します:

npm config set prefix "D:\jnodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

3. 環境変数を設定します

パスを変更するためのユーザー変数:

NODE_PATH をシステム変数に追加します。値は D:\nodejs\node_modules です

#パスに追加します

4. インストール cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

5. vue、vue-cli スキャフォールディングのインストール

cnpm install vue -g
cnpm install vue-cli -g

vue - V または vue --version は、vue-cli のバージョンをクエリします

6。プロジェクトをビルドします

vue init webpack "项目名称"

プロジェクト ディレクトリ構造 :

• build フォルダー: 内部には、エントリ ファイル、出力ファイル、使用するモジュールなどを含む、Webpack の開発とパッケージ化に関連する設定があります;
• config フォルダー: 主に、開発およびパッケージ化における静的リソースのパス、圧縮するファイルの種類、開発に使用するポート番号、開発での仮想サーバーのクロスドメイン リクエスト API の使用などを指定します。
• node_modules: プロジェクトの依存ライブラリ;
• src フォルダー: コンポーネントの追加や変更などの主要な操作はすべてこのフォルダーで行われますが、これについては後で詳しく説明します。
• static フォルダー: 静的リソース フォルダー。変更されないリソースが配置され、最終的なパッケージング ディレクトリに直接コピーされます (デフォルトは dist/static);
• .babelrc: babel を使用した設定ファイル、トランスコーディング ルールとプラグインの設定に使用されます;
• .editorconfig: コード仕様ファイル、インデントにスペースまたはタブを使用するか、インデントの長さが 2 桁か 4 桁かなどを規定します。スタイル、使用する場合は、エディターで対応するプラグインをダウンロードする必要があります;
• .eslintignore: eslint によって無視されるファイルを指定します;
• .eslintrc: eslint の検出ルールを構成しますルールに従ってコードが記述されるように強制します;
• .gitignore: git によって無視されるファイルを指定し、すべての git 操作がそれらのファイルに対して有効になりません;
• .postcssrc:使用される CSS プリコンパイラ（デフォルトでオートプレフィクサーが設定されており、ブラウザのプレフィックスを自動的に補完します）;
• favicon.ico: ブラウザのタブ タイトルの横にある小さなアイコン（自分で貼り付ける必要があります）;
• index.html: ホームページ ファイル。プロジェクトの実行中に、src フォルダーに生成したコンポーネントがこのファイルに自動的に挿入されます。
• LICENSE: プロジェクトによって宣言されたライセンス。
• package-lock.json:node_modules または package.json が変更されたとき 自動的に生成されるファイル。このファイルの主な機能は、プロジェクト開発中に一部の依存関係で発生した更新を無視しながら、現在インストールされているパッケージの依存関係を判断し、その後の再インストール時に同じ依存関係を生成できるようにすることです。 : 運用環境で使用する必要があるプロジェクト開発および依存ライブラリを指定します。
README.md: プロジェクト開発プロセス中に注意する必要がある事項についての指示を提供するメモ ファイルに相当します。
• 
  
推奨学習:

vue.js チュートリアル

以上がVue が環境とプロジェクトを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。