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

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

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

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

1. vue-cli は成熟した Vue プロジェクト アーキテクチャ設計であり、Vue のバージョンが変更されると更新されます

2. vue-cli はローカルの Hot-cli のセットを提供しますロードテストサーバー

3. 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 の場合はその必要はありません。インスタンスを 或者 に直接マウントすることをお勧めします。

[main.js]

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

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

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

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

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

[App.vue]

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

子ノードは 1 つだけ含めることができます。つまり、最上位の p は 1 つだけです (図に示すように、「app」という ID を持つ p 要素には兄弟ノードがありません)

<script></script>通常は es6 で書かれています。デフォルトで全世界に影響を与えるスタイルをエクスポートするには、exportdefault を使用します。このコンポーネントの下でのみ機能するため、ラベルにスコープを追加する必要があります。< ;/style>

[router/index.js]

ルーティング設定ファイルは、コンポーネントをルートにマップするために使用されるため、どこでレンダリングすればよいか知っておいてください

上記は私が皆さんのためにまとめたもので、将来的に皆さんのお役に立てば幸いです。

関連記事:

Vue が次の表に従って配列を変更するとページがレンダリングされない問題の解決策

vue2.0 axios クロスドメイン レンダリングの問題

オプション オーバーレイの問題の解決Lauiuiメソッドでの選択の

以上がvue-cli スキャフォールディングを使用して Vue プロジェクトの下でプロジェクト構造を初期化する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。