検索

ホームページ  >  記事  >  ウェブフロントエンド  >  vue-cli スキャフォールディング初期化の使用方法

vue-cli スキャフォールディング初期化の使用方法

php中世界最好的语言
php中世界最好的语言オリジナル
2018-03-28 14:59:011642ブラウズ

今回は、vue-cli スキャフォールディングの初期化の使い方と、vue-cli スキャフォールディングを使用する際の 注意事項 を​​説明します。実際のケースを見てみましょう。

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 で定義されたインスタンスはルート ノードの下にマウントされ、すべてのマウント要素が DOM によって置き換えられるため、コンテンツが埋められます。 Vue によって生成されるため、インスタンスを

に直接マウントすることはお勧めできません。 <html> 或者 <body>

[main.js]

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

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

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

'template' オプション: 文字列テンプレートを次のように使用しますVue インスタンス ロゴは

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

[App.vue]

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