Vue プロジェクトのステップとプロセスを作成するための Vue-cli3.0 スキャフォールディング

Vue-cli 3.0 は、Vue.js をベースにした新しいスキャフォールディング ツールです。Vue プロジェクトを迅速に作成するのに役立ち、多くの便利なツールと構成を提供します。

ここでは、Vue-cli 3.0 を使用してプロジェクトを作成する手順とプロセスを段階的に紹介します。

Vue-cli 3.0 をインストールする

まず、Vue-cli 3.0 をグローバルにインストールする必要があります。これは、npm を通じてインストールできます。

npm install -g @vue/cli

インストールが完了したら、次のことができます。次のコマンドを使用して、インストールが成功したかどうかを確認します。 :

vue -V

バージョン番号が出力されれば、インストールは成功です。

Vue プロジェクトを作成する

コマンド ラインで次のコマンドを実行して、新しいプロジェクトを作成します。

vue create my-project

ここで、「my-project」はプロジェクト名です。変更する必要があります。

このコマンドを実行すると、Babel を使用するかどうか、Vuex を使用するかどうか、ESlint を使用するかどうかなど、いくつかのプロジェクト構成オプションが表示されます。必要に応じて選択できます。よくわからない場合は、Enter キーを押してデフォルトのオプションを使用できます。

選択完了後、プロジェクトのインストールが行われますが、インストールが完了するまでにある程度の時間がかかる場合があります。

プロジェクトの実行

プロジェクトのインストールが完了したら、プロジェクト フォルダーに入り、次のコマンドを使用して実行します。

cd my-project
npm run serve

このコマンドはローカル サーバーを起動します。ブラウザ経由でアクセスできます http://localhost:8080 プロジェクトの実行効果を確認します。

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

Vue-cli 3.0 を使用してプロジェクトを作成した後のプロジェクトのディレクトリ構造は次のようになります。

|--node_modules          // 存放项目运行所需的模块
|--public                // 存放静态资源文件
|  |--favicon.ico        // 网站图标
|  |--index.html         // 网站入口文件
|--src                   // 存放项目源码文件
|  |--assets             // 存放静态资源文件
|  |--components         // 存放组件文件
|  |--views              // 存放页面文件
|  |--App.vue            // 页面入口文件
|  |--main.js            // 项目入口文件
|--.gitignore            // Git 版本库忽略文件列表
|--babel.config.js       // Babel 配置文件
|--package.json          // 项目配置文件
|--README.md             // 项目说明文件
|--vue.config.js         // Vue 配置文件

このうち、 src ディレクトリはプロジェクトのソース コード ファイルです。public ディレクトリは静的リソースが保存されるフォルダーです。 main.js はプロジェクトのエントリ ファイル、App.vue はページのエントリ ファイルです。 src ディレクトリの下の assets ディレクトリには、画像やスタイル シートなどの静的リソース ファイルが保存されます。 src ディレクトリの components にはコンポーネント ファイルが保存され、views ディレクトリにはページ ファイルが保存されます。

設定ファイル

プロジェクト作成プロセス中に、Vue-cli 3.0 はいくつかのデフォルト設定ファイルも生成しました。これらはすべてプロジェクトのルート ディレクトリにあります。このうち、package.json はプロジェクト構成ファイルであり、依存関係の宣言、スクリプト コマンド、およびプロジェクトに必要なその他の情報が含まれています。 babel.config.js には、Babel の構成情報が含まれています。 vue.config.js Vue 構成情報が含まれます。

概要

Vue-cli 3.0 は、便利なツールと構成を提供することで、Vue プロジェクトの作成、開発、保守をより効率的かつ簡単にします。以上が Vue-cli 3.0 を使用して Vue プロジェクトを作成する手順とプロセスです。

以上がVue プロジェクトのステップとプロセスを作成するための Vue-cli3.0 スキャフォールディングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。