ビルドするプロジェクトのディレクトリを開き、ターミナルを開いて、次のものをインストールします。
npm install -g @vue/cli
## 安装成功后，检查
vue --version
vue -V
# Vue和VueCLI是两回事
vue create 项目名称
デフォルトオプション：
プリセット機能を選択し（プロジェクトのニーズに応じて選択）、スペースを押して選択します
- Babel =>変換ツール、ES6をES5に変換する変換ツール、一部のブラウザはES6構文をサポートしていません
- router =>ルートマネージャー;
- VueX =>ステータス情報を保存する倉庫
- CSSプリプロセッサ=> cssプリプロセッサ、cssの書き込み効率を向上させるために、LESS、SASSがよく使用されます
- Eslint =>コード検証ツール（コードがコード仕様と統一されたコードスタイルに準拠しているかどうかを確認し、コードに構文エラーがあるかどうかを確認します）;
ESlintはプロジェクトのコーディングを標準化するために使用され、開発者はコード仕様に注意を払う必要があります。ESlintのエラーレポートに関しては、次のアドレスで表示できるエラーリファレンスがあります：https：//cn.eslint.org/docs/rules/。
学習フェーズでESlintを使用することはお勧めしません。そのため、eslintのないプロジェクトが作成されて学習されます。
- プログレッシブウェブアプリのサポートプログレッシブウェブアプリのサポート
- ユニットテスト：ユニットテスト
- E2Eテスト：エンドツーエンドのテスト
バージョン2を選択してください
ルートの作成に履歴モードが使用されていますか？＃なしでyを選択し、＃付きでnを選択します（URLのハッシュ値）
ハッシュモードと履歴モードの違い：ハッシュには＃があり、履歴には＃がありません。
ハッシュと履歴はブラウザ自体の特性です。
推奨記事：https ：//blog.csdn.net/cplvfx/article/details/107294535
- 専用の構成ファイル内：それぞれの構成ファイルに個別に保存
- package.json内：package.jsonファイルに保存します。
次回の使用のためにこの構成を記録しますか？
localhost：8080に
アクセスします。メインファイル：
main.js：プロジェクト/プログラムエントリファイル（このファイルのJavaScriptコードが実行されます）
App.vue：ルートコンポーネント（すべてのルート）
コンポーネント：カスタム機能コンポーネント
アセット：静的リソースディレクトリ（写真、ビデオ、オーディオなどは静的リソースです）
ビュー：ビューコンポーネントを格納
するvueページは通常3つの部分で構成されます：テンプレート（テンプレート）、js（スクリプト）、スタイル（スタイル）、テンプレートテンプレートには1つの親ノードのみを含めることができます（上部level divは1つだけで、兄弟ノードはありません。スタイルは、デフォルトで、
styleタグのスタイルを通じて<style></style>全世界に影響します。スコープを定義する必要がある場合は、このコンポーネントでのみ機能します<style scoped></style>。外部cssファイルをインポートするには、プロジェクトのcss-loader依存関係パッケージをインストールする必要があります。、cmdを開き、プロジェクトディレクトリに入り、
npm install css-loader
インストールが完了したら、必要なcssファイルをstyleタグの下にインポートできます。次に例を示します。
<style>
import './assets/css/index.css'
</style>
ルートコンポーネントApp.vue：<router-view/>スロットとして理解するルートがリダイレクトされると、ルートの下のページがレンダリングされてこのスロットに表示され、後者の上下に書き込まれるコンテンツはレンダリングされたコンポーネントの表示の上下になります。
変更はより直感的に表示できます。
図1：
図2：アドレスに注意する
理由：index.htmlのAPP.vueのIDが#appであることが理解され、最終的にw3c標準を満たすページが形成されます。
ルーターディレクトリのindex.js：
import Home from '../views/Home.vue'
{
path: '/',
name: 'Home',
component: Home
},
//会直接加载
//在文件main.js引入router的时候，index.js中的import就执行了 进入网站一般都会触发 '/',所以写成直接加载
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
//路由懒加载
//类似于按需导入，触发/about的时候，才去import
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
