vue-cli スキャフォールディングを使用して Vue プロジェクトの下でプロジェクト構造を初期化する方法の詳細な説明-jsチュートリアル-php.cn

vue-cli スキャフォールディングを使用して Vue プロジェクトの下でプロジェクト構造を初期化する方法の詳細な説明

亚连

リリース： 2018-05-31 17:13:04

オリジナル

1891 人が閲覧しました

この記事では主に、vue-cli スキャフォールディングを使用して Vue プロジェクトを初期化するプロジェクト構造の詳細な説明を紹介します。

vue-cli は、Vue が提供する公式コマンドラインツールで、大規模なシングルページアプリケーションを迅速に構築するために使用できます。このツールは、すぐに使えるビルドツール構成を提供し、最新のフロントエンド開発プロセスをもたらします。ホットリロード、保存時の静的チェック、運用準備が整ったビルド構成を備えたプロジェクトの作成と起動には、わずか数分しかかかりません。

vue-cli の使用には次の大きな利点があります:

vue-cli は成熟した Vue プロジェクトアーキテクチャ設計であり、Vue のバージョンが変更されると更新されます
vue-cli はローカルの Hot-cli のセットを提供しますロードテストサーバー
vue-cliはパッケージとオンラインソリューションを統合しており、webpackやBrowserify、その他のビルドツールを使用してインストールできます

次に、vue-cliをインストールします

# 必须全局安装vue-cli，否则无法使用vue命令
# 安装完成之后使用vue -V检查vue-cli是否安装成功及版本信息

$ npm install -g vue-cli
$ vue -V

ログイン後にコピー

プロジェクトを作成します

次にvue-cliを使って新しいVueプロジェクトを作成します

# 项目创建完之后需要执行npm install安装依赖

$ vue init webpack vuedemo
$ npm install

ログイン後にコピー

作成したvuedemoフォルダに含まれるファイルは以下の通りです:

[index.html]

index.htmlは他のhtmlと同じですただし、通常は空のルートノードのみが定義されます。main.js で定義されたインスタンスはルートノードの下にマウントされ、すべてのマウント要素は vue コンポーネントによって置き換えられます。 Vue の場合はその必要はありません。インスタンスを <html> 或者 <body> に直接マウントすることをお勧めします。

[main.js]

は、新しいVueインスタンスを作成し、このインスタンスをルートノードにマウントするために使用されます。また、Vueプラグインを導入するために使用することもできます。 -ins

'el' オプション: ページ上に既に存在する DOM 要素を Vue インスタンスのマウントターゲットとして指定します。これは、index.html

'router' の ID 'app' を持つノードです。オプション: ルーターインスタンスを追加します。その各サブコンポーネントが $router (ルーターインスタンス) および $route (現在アクティブ化されているルーティング情報オブジェクト) にアクセスできるように、Vue ルートインスタンスに挿入されます。

'template' オプション: 識別子として文字列テンプレートを使用します。 Vue インスタンスの

'components' を使用します: ルートコンポーネント

[App.vue]

プロジェクトのルートコンポーネント。コンポーネントツリーを形成するために他のサブコンポーネントを含めることができます