今回は、vue-cli スキャフォールディングの初期化の使い方と、vue-cli スキャフォールディングを使用する際の 注意事項 を説明します。実際のケースを見てみましょう。
vue-cli は、Vue が提供する公式コマンド ライン ツールで、大規模なシングルページ アプリケーションを迅速に構築するために使用できます。このツールは、すぐに使えるビルド ツール構成を提供し、最新のフロントエンド開発プロセスをもたらします。ホット リロード、保存時の静的チェック、運用準備が整ったビルド構成を備えたプロジェクトの作成と起動には、わずか数分しかかかりません。 vue-cli の使用には次の大きな利点があります:次に、vue-cli
# 必须全局安装vue-cli，否则无法使用vue命令 # 安装完成之后使用vue -V检查vue-cli是否安装成功及版本信息 $ npm install -g vue-cli $ vue -V
# 项目创建完之后需要执行npm install安装依赖 $ vue init webpack vuedemo $ npm install
[index.html]
index.html およびその他の htmlファイルも同様ですが、通常は空のルート ノードのみが定義されます。main.js で定義されたインスタンスはルート ノードの下にマウントされ、すべてのマウント要素が DOM によって置き換えられるため、コンテンツが埋められます。 Vue によって生成されるため、インスタンスを に直接マウントすることはお勧めできません。 <html> 或者 <body>
は、新しい Vue インスタンスを作成し、このインスタンスをルート ノードにマウントするために使用されます。 Vue プラグイン
'el' オプション: ページ上に既に存在する DOM 要素を Vue インスタンスのマウント ターゲットとして指定します。これは、index.html
' の ID が 'app' のノードです。 router' オプション: ルーター インスタンスが Vue ルート インスタンスに挿入され、その各サブコンポーネントが $router (ルーター インスタンス) および $route (現在アクティブ化されているルーティング情報オブジェクト) にアクセスできるようになります
'template' オプション: 文字列テンプレートを次のように使用しますVue インスタンス ロゴは
'components' を使用します: ルート コンポーネント
[App.vue]プロジェクトのルート コンポーネント。コンポーネント ツリーを形成する他のサブコンポーネントを含めることができます
には子ノードを 1 つだけ含めることができます。つまり、最上位の p は 1 つだけ存在できます (図に示すように、「app」という ID を持つ p 要素には兄弟ノードがありません)。
<script></script>通常は es6 Write を使用し、エクスポートにはエクスポートデフォルトを使用します
スコープを定義する必要がある場合は、デフォルトのスタイルが影響します。このコンポーネントの下でのみ機能するため、ラベルにスコープを追加する必要があります、
routing設定ファイル、コンポーネントをルートにマップして、コンポーネントをどこにレンダリングするかを知ることができます
この記事のケースを読んだことがあるはずです。この方法をマスターしました。さらにエキサイティングな情報については、php 中国語 Web サイトの他の関連記事に注目してください。 ！
推奨読書:
以上がvue-cli スキャフォールディング初期化の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
