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

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

王林

リリース： 2023-06-09 16:08:34

オリジナル

999 人が閲覧しました

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 構成情報が含まれます。