【遠位] VUEベース（8）（VUE-CLI足場）

取り付け足場VUE-CLI

名前によってVueのCLIパッケージ VUE-CLIは変更 VUE / CLI @ 。あなたがグローバルインストールの古いバージョンがある場合 vue-cli （1.xまたは2.xのを）、あなたは合格する必要が NPMアンVUE-CLI -g、または糸グローバル削除VUE-cliのアンインストールを。

VueのCLIは、（8.11.0+を推奨）Node.jsのバージョン8.9以降が必要です。コマンドを使用してバージョンを確認します。

C：\ Users \ユーザー管理>ノード- Vの
V12。15.0

インストールVUE-CLI：

NPM インストール -g @ VUE / CLI 
＃OR 
糸グローバル加算@vue / CLI

C：\ Users \ユーザー管理> VUE - Vの
@vue CLI / 4.2。2

VueのCLI> = 3歳以上の使用と同じ vue コマンド、CLI 2 Vueのは（そのことをvue-cli）覆われています。あなたはまだ古いバージョンを使用する必要がある場合は vue init 機能を、あなたはグローバルブリッジングツールをインストールすることができます。

NPM インストール -g @ VUE / CLI-のinit

第二に、2.xのVUE-CLIの使用

1. VUE VUEのinitプロジェクトを作成します

VUEのinitのWebPACK-シンプルMY_PROJECT

これは、（SASSが、ない場合は、Nを選択するかどうか）など、著者、プロジェクト名を確認するために、例えば、対話するために、プロンプトに応じて適切な情報を入力する必要があります。

ここのWebPACK-単純なテンプレートを使用して、我々は前に手で建てられたような足場は、次の比較を行うことができます。

あなたは次のテンプレートを使用することができVUE-CLI：

WebPACKの- > +完全に機能vue- WebPACKのローダが設けられ、熱過負荷、リンティング、CSSおよび抽出試験機能を有する
のWebPACK -シンプル- > + vue-簡単WebPACKのローダは、迅速なプロトタイピングのために提供さ 
Browserify   - - > フル機能のBrowserify、同様のWebPACKの
Browserifyの -simple - > webpack-似たシンプルな
PWA   - > vue- WebPACKのテンプレートに基づいてのPWA CLIテンプレート
シンプル   - > VUE最も簡単な設定、基本的なvue.js

私たちは、主にWebPACKのWebPACKの-シンプルなテンプレートとテンプレートを使用しています。

プロジェクトを作成した後、プロジェクトディレクトリを入力します。

2.インストールが異なり

生成されたプロジェクトのディレクトリでは、我々はpackage.jsonプロフィールを参照してください。

{
   "名"： "MY_PROJECT" 、
   "説明"： "A Vue.jsプロジェクト" 、
   "バージョン"： "1.0.0" 、
   "著者"： "leokale" 、
   "ライセンス"： "MIT" 、
   "プライベート" ：真、
   "スクリプト" ：{
     "DEV"： "クロスENV NODE_ENV =開発のWebPACK-devのサーバー--open --hot" 、
     "ビルド"：「クロスENV NODE_ENV =生産WebPACKの--progress --hide -modules " 
  }、
   "依存性" ：{
     "VUE"： "^ 2.5.11" 
  }、
   "browserslist」 ：[
     "> 1％" 、
     "最後の2つのバージョン" 、
     "ではない、すなわち<= 8" 
  ]、
  "devDependencies" ：{
     "バベルコア"： "^ 6.26.0" 、
     "バベルローダ"： "^ 7.1.2" 、
     "バベルプリセット-ENV"： "^ 1.6.0" 、
    「バベルプリセット-stage-3" ： "^ 6.24.1" 、
     "クロスENV"： "^ 5.0.5" 、
     "CSS-ローダー"： "^ 0.28.7" 、
     "ファイル・ローダー"：「^ 1.1.4 " "VUE-ローダー"： "^ 13.0.5" 、
     "VUEのテンプレートコンパイラ"： "^ 2.4.4" 、
     "WebPACKの"： "^ 3.6.0" 、
     "WebPACKの-devのサーバー"：" ^ 2.9.1"
  } 
}

我々は、多くのdevDependenciesを示していますかを確認することができますが、まだインストールしていません。

私たちは、インストールするコマンドを実行します。

（venv）D：\ pycharm_workspace \ vue_learn \ MY_PROJECT> cnpmインストール 
√インストール 12のパッケージ
√リンク 0 最新バージョン
√ラン 0 スクリプト
√すべてのインストールされたパッケージ（使用44ms（ネットワーク34ms）を、スピード0B / S、JSON 0（0B）、 tarボール0B）

3.プロジェクトを実行

（venv）D：\ pycharm_workspace \ vue_learn \ MY_PROJECT> NPM実行DEV

 > [email protected] DEV D：\ pycharm_workspace \ vue_learn \ MY_PROJECT
 >クロスENV NODE_ENV =開発のWebPACK-devのサーバー--open - ホット

プロジェクトがありますHTTPで実行されている：// localhostを：8080 / 
WebPACKの出力は/ distの/から提供される
404エラー意志フォールバックに /index.htmlが

使用した開発環境 NPM RUN devの、使用して本番環境 NPM RUNビルドを。

このとき、それは自動的にブラウザのローカルホストで開きます：8080ページ：

参照ページがVUE-CLIは正常に実行を示しています。