vue cli 3.0を使用してプロジェクトを作成する方法

一、インストール@vue/cli
vue-cliは3に更新されました.xその後、vue-cliのパッケージ名はvue-cliから@vue/cliに変更されました
以前に古いバージョンのvue-cli(1.xまたは2.x)をインストールした場合は、まずアンインストールする必要があります.

npm uninstall -g vue-cli
# or
yarn global remove vue-cli 

その後、新しいバージョンの@vue/cliを再インストールします.

npm install -g @vue/cli
# or
yarn global add @vue/cli

インストールが完了したら、vue -V(大文字のV)を使用してバージョン番号を表示できます.

$ vue -V
3.8.2

二、プロジェクトの作成方法
1.vue create
次のコマンドを実行して、新しいプロジェクトを作成します.

vue create <my-project>

presetを選択するよう求められます.基本的なBabel+ESLint設定を含むデフォルトのpresetを選択するか、「手動でプロパティを選択」を選択して必要なプロパティを選択します.
プロパティを手動で選択する場合は、操作プロンプトの最後にオプションを将来多重化可能なpresetに保存することを選択できます.次の章ではpresetとプラグインについて説明します.
~/.vuercが保存するpresetは、ユーザのホームディレクトリの次の名前が存在する.vuercのJSONファイルにあります.保存されたpreset/オプションを変更したい場合は、このファイルを編集できます.プロジェクトの作成中に、お気に入りのパッケージマネージャを選択するか、淘宝npmミラーソースを使用して依存をより迅速にインストールするよう求められます.これらの選択も記憶する~/.vuerc.
vue createコマンドには、次のコマンドを実行して検索するオプションがあります.

  ：create [options] <app-name>

      `vue-cli-service`         

  ：

  -p, --preset <presetName>                           
  -d, --default                                 
  -i, --inlinePreset <json>                   JSON        
  -m, --packageManager <command>              npm    
  -r, --registry <url>                        npm registry
  -g, --git [message]                /    git    ，             
  -n, --no-git                       git    
  -f, --force                                  
  -c, --clone                        git clone         
  -x, --proxy                                
  -b, --bare                                         
  -h, --help                              

2.グラフィカルインターフェースの使用
プロジェクトを構築し、指定したディレクトリで端末を開き、実行するグラフィック化もサポートされています.

vue ui

上記のコマンドは、ブラウザウィンドウを開き、グラフィックインタフェースでプロジェクト作成のプロセスに導きます.
3.引き出し2.xテンプレート(旧バージョン)
3.xバージョンもinitの構築方式Vue CLI>=3と旧版と同じvueコマンドを使用しているため、Vue CLI 2(vue-cli)が上書きされている.古いバージョンのvue init機能を使用する必要がある場合は、ブリッジツールをグローバルにインストールできます.

npm install -g @vue/cli-init
# `vue init`          `[email protected]`   
vue init webpack my-project

4.vue createでプロジェクトを作成
1.実行:

vue create my-project

2.ここでは2つの選択肢があります.

default(babel,eslint)デフォルトコースで、babelとeslintは

をサポートします.

Manually select featuresは自分で必要な機能を選択し、より多くの特性選択を提供します.例えばTypeScriptをサポートするには、この項目を選択する必要があります.

では、上下方向キーを使用してオプションを切り替えることができます.babelとeslintのサポートだけが必要な場合は、最初の項目を選択すると、vue初期化プロジェクトを静かに待つことができます.

vue-cli内蔵は8つの機能特性をサポートしており、複数選択できます.方向キーを使用して特性オプション間を切り替え、スペースキーを使用して現在の特性を選択し、aキーを使用してすべてを切り替え、iキーを使用してオプションを反転します.

各機能について簡単に説明します.

Type Scriptは、Type Scriptを使用してソースコード

を書くことをサポートします.

Progressive Web App(PWA)Support PWAサポート.

Routerはvue-routerをサポートします.

Vuexはvuexをサポートします.

CSS Pre-processorsはCSSプリプロセッサをサポートします.

Linter/Formatterはコードスタイルのチェックとフォーマットをサポートします.

Unit Testingサポートユニットテスト.

E 2 E TestingはE 2 Eテストをサポートします.

Router,Vuex,CSS Pre-processors,Linter/Formatter

を選びました
3.enterを押して次のステップに進み、次は前の各オプションのより詳細な選択です.

css選択SCSS/SASS

Linter/Formatter選択prettier

このステップは、プロファイルの場所を選択することです.Babel、PostCSSなどについては、独自のプロファイルを持つことができます:.babelrc 、 .postcssrcなど、packageに構成情報を置くこともできる.jsonの中.ここでは、エディタ(Visual Studio Code)の友好的なサポート(エディタは一般的にプロジェクトルートディレクトリの下でプロファイルを探す)のために、プロファイルを外に置くことを選択し、In dedicated config files

を選択します.
4.Save this as a preset for future projects?これは、現在の一連のオプション構成を保存するかどうかを尋ね、次のプロジェクトの作成時に多重化を容易にします.yを選択します.
5.選択が完了すると、vue-cliは前に選択した内容に基づいて、プロジェクトの初期化を開始します.
三、起動項目
初期完了後、プロジェクトルートディレクトリに入ります:cd my-project起動プロジェクト:npm run serveちょっと待って、ブラウザで自動的に開いているのが見えます
四、プラグインのインストール
続きます...