ビューCLI
まず、明確にする必要があることが1つあります。Vue-CLI≠Vue、Vue-CLIはVueツールです。
1.単一ファイルコンポーネント
多くのVueプロジェクトでは、Vue.componentを使用してグローバルコンポーネントを定義してから、新しいVue（{el： '＃container'}）を使用して各ページのコンテナー要素を指定します。このアプローチは、JSが特定のビューを強化するためにのみ使用される多くの中小規模のプロジェクトでうまく機能します。しかし、より複雑なプロジェクトの場合、またはフロントエンドが完全にJSによって駆動されている場合、次の欠点が非常に明白になります。
- すべてのコンポーネントは同じhtmlファイルに配置されます
- ビルドステップはありません。npmを使用してプロジェクトを管理することはできません。
- 構文の強調表示とヒントの欠如
- 単一のコンポーネントに対するCSSスタイルのサポートはありません
上記の問題に対応して、vueフレームワークはvue-cliプロジェクト生成ツールをリリースしました。Vue-cliはVue.jsに基づく迅速な開発のための完全なシステムであり、Vueエコシステムのツール基盤の標準化に取り組んでいます。これにより、さまざまな構築ツールをスマートなデフォルト構成に基づいてスムーズに接続できるため、構成の問題に巻き込まれることに何日も費やすのではなく、アプリケーションの作成に集中できます。
2.ツールのインストール
Vue-cli 3.x以降には、Node.js 8.9以降が必要です（v10以降をお勧めします）。
ウェブサイト：http：//npmjs.com
## 安装
npm install -g @vue/cli
## 安装成功后，检查
vue --version
vue -V
# Vue和VueCLI是两回事
## 卸载 其实这个不经常使用的
npm uninstall -g @vue/cli
他のバージョンをインストールする必要がある場合
npm install -g @vue/cli@版本号は、この方法を使用してバージョンを指定できます。
最新バージョンが正常にインストールされない場合は、次の3つの方法で解決できます。
- ネットワークを切断し、ホットスポットを使用してトラフィックを共有し、インストールコマンドを実行します
- 他のバージョンをインストールする
- npmミラーソースに切り替え、taobaoに切り替えます
3.プロジェクトを作成します
# 首先需要进入到对应的目录中(英文目录不要有空格及中文),执行如下命令
# 如果当前你的终端工作路径带有中文或者空格，你可以使用`cd 路径`形式进行路径切换，切换到符合要求的路径中
vue create 项目名称(创建时会自己以对应的项目名称生成目录)
## 例
vue create myproject
# 上述命令中，可以允许变的就是`myproject`部分
以下の手順はVue CLI v4.5.6一例です。参考のために、実際の使用では、必要に応じて構成してください。
- プリセット選択
1つ目はbabelとeslintを統合するデフォルトのVue2プロジェクト、
2つ目はbabelとeslintを統合するデフォルトのVue 3（プレビューバージョン）、
3つ目はカスタムタイプです。
- プリセット機能を選択します（プロジェクトのニーズに応じて選択します）
- Vueバージョンを選択してください
ESlint構成を選択します（有効な場合）
- 追加
eslint機能を選択する
- 個別に構成するかどうか
- この操作のプリセットを保存するかどうか
- プロジェクトが正常に作成されました
4.ディレクトリ構造の概要
- src（メインディレクトリと後期の多くの操作はこのディレクトリで完了します）
- main.js：プロジェクト/プログラムエントリファイル（このファイルのJavaScriptコードが実行されます）
- App.vue：ルートコンポーネント（すべてのルート）
- コンポーネント：カスタム
功能コンポーネント - アセット：静的リソースディレクトリ（写真、ビデオ、オーディオなどは静的リソースです）
- ビュー:(作成されたばかりのプロジェクトはありません。後で使用されます）
视图コンポーネントを保存します
5.プロジェクトの運営と注意事項
### 5.1。プロジェクトの開始と停止
上の図に示すように、プロジェクトが作成された後、フォローアップ操作を求めるプロンプトが表示されます。
- コマンドラインでプロジェクトディレクトリを入力します
npm run serveコマンドを実行してプロジェクトを開始します
上記のコマンドを実行すると、次の効果が表示されます。これは、プロジェクトが正常に実行されたことを意味します。
注：デフォルトのポート番号は8080から始まります。他のプロジェクトを再度開始すると、8081、8082 ...でリッスンします。
実行中のプロジェクトを停止する必要がある場合は、次の2つの方法のいずれかを選択できます。
- ターミナルを閉じる
- ターミナル
Ctrl + Cでキーの組み合わせ（キャンセル）を押してから、選択Yして入力します回车（以下を参照）。
5.2.ESlintについて
ESlintは、プロジェクトのコーディングを標準化するために使用されます。大規模なプロジェクトは、通常、複数の人によって開発されます。個人的なプログラミングの習慣を避けるために坑自己坑别人、ESlintは、紧箍咒開発者にコード仕様に注意を払わせるためにプロジェクトで使用されます。たとえば、ESlintを使用しない場合、JSでは不変条件を宣言できますが、使用することはできません。ESlintを使用すると、上記の場合に次のエラーが報告されます。
ESlintのエラーレポートに関しては、次のアドレスで表示できるエラーリファレンスがあります：https：//cn.eslint.org/docs/rules/