vue-cliバージョンの表示、更新、プロジェクトの作成

vue-cliバージョンビュー

vue -V

Vue-cli 3.0+はvue-cliを使用しなくなります。3.0をインストールする場合は、次のように新しいコマンドを使用する必要があります。

npm install @vue/cli -g

vue / cli4のインストールと使用

vue-cli3より前のバージョンをインストールした場合は、最初にそれをアンインストールする必要があります。コマンドは次のとおりです。

//首先查看是否已安装过 vul-cli 和 vul-cli 的版本
vue -V
//如是有的话且版本小于3.0，就用下面命令卸载
npm uninstall vue-cli -g

vue-cli 3.0以降（現在は4.5.8）をインストールします

// 安装vue-cli  
npm install @vue/cli -g 
//也可使用cnpm 来安装 ，比较快（前提是使用了淘宝镜像）
cnpm install @vue/cli -g

プロジェクトを作成する

//1. 命令 回车
  vue create 项目名
//2.选择自定义配置
  Manually select features
//3.选择你需要的配置（用空格选中）
  Babel (必选)
  TypeScript（项目中使用ts开发的话，就勾选）
  Progressive Web App (PWA) Support  (接口缓存，优化项目)
  Router
  Vuex 
  CSS Pre-processors (css预处理器，需要)
  Linter / Formatter (代码格式，一般默认选中)
  Unit Testing (代码测试)
  E2E Testing（需求界面测试）
//4.根据你选的配置进行Y/N选择
//5.选择完之后，就可以运行项目  
npm run serve

プロジェクト構成手順の作成

babel：
es6コードを解析しますが、なぜそれを使用するのですか？一部のIEブラウザ、および他のブラウザの下位バージョンでもes6コードを認識できないためですが、vueには多くのes6コードがあります。現時点では、ツールbabelを使用してes6コードをブラウジングに変換できます。デバイスによって認識されるコード。だからあなたは選ばなければなりません。

TypeScript
がプロジェクトでTypeScriptを使用して開発されている場合は、

プログレッシブWebアプリ（PWA）
プログレッシブWebアプリ（プログレッシブWebアプリ）
は、最高のWebと最高のアプリケーションを組み合わせたエクスペリエンスです。ブラウザタブでの最初のアクセスから開始して、ユーザーにとって非常に便利であり、インストールする必要はありません。ユーザーが徐々にアプリケーションとの関係を確立するにつれて、アプリケーションはますます強力になります。スラブWebでも、すばやくロードし、関連するプッシュ通知を送信し、ホーム画面にアイコンを表示して、トップフルスクリーンエクスペリエンスとしてロードできます。

ルーター
ルーティング、必要に応じて選択、または後でインポート

Vuex
倉庫、必要に応じて選択、または後で導入

CSSプリプロセッサ
selectcssプリプロセッサ

リンター/フォーマッターの
コードスタイルとフォーマットの検証

a。エラー防止機能を備えたESLintは、
ESLint公式Webサイトを使用して推奨ルールのみを構成します

b。ESLint+ Airbnb
構成は、ESLint公式Webサイト+ Airbnbサードパーティ構成で推奨されているルールを使用します

c。ESLint+標準構成
は、ESLint公式Webサイト+標準サードパーティ構成で推奨されているルールを使用します

d。ESLint+ Prettier
は、ESLint公式Webサイト+ Prettierサードパーティ構成で推奨されているルールを使用します。Prettier
は主にスタイルの統一を目的としています。コードフォーマットツール

ユニットテスト
コードテスト

E2Eテスト
デマンドインターフェイステスト

追加のlint機能を選択します
コード検証
保存時にLint（保存
時にチェック）コミット時にLintと修正（修正とコミット時にチェック）

どこでバベルのための設定を置くことを好むか
など、PostCSS、ESLint、？ストアの構成
（別の特別な設定ファイルに保存）専用の設定ファイルで
（package.jsonの内部に保存）でのpackage.json

vue-cliバージョンの表示、更新、プロジェクトの作成

おすすめ