VUE 3.0初期化VUEの足場を使用

VUE-cli3.0インストール

1あなたは以前にグローバルVUE-CLIの古いバージョン（1.xまたは2がインストールされている場合.X）を、あなたはそれをアンインストールする必要があります：
 2  
3 NPMをアンインストールしVUE-CLIを- G
 4  インストール
 5  
6 -gする@ VUEをNPMをインストール/ CLI // インストールcli3.x
 7 VUE --version // クエリバージョン3.xか
8  あなたは、CLI3 2.xのテンプレートを使用することができますcli3.xしたくない場合は、コマンドは次のとおりです。
 9つの 
10 NPMはVUE @ -gをインストール/ CLI-INIT // このモジュールのインストール
 11を // VUEのinit WebPACKの私のプロジェクト：テンプレート2.xのを使用することができます

node环境

1 3.xバージョンはNode.js8.9以上（推奨8.11.0+必要です：下のノード）は、使用前に、次のようにバージョンが注文を確認してください
 2  
3 -ノードV
 4を お使いのバージョンが十分でない場合は、あなたが使用することができます最新の安定版へのノードのバージョンを更新するには、次のコマンドライン：
 5  
6 NPMは-gnインストール//は、このモジュールは、Node.jsのバージョンを管理インストールしたり、糸を使用するように設計されたモジュールをインストールします、株式会社無料VUE @参加糸を追加/ CLI 
7安定したn-は// ノード・バージョン更新
8を 使用すると、十分な権限を要求された場合は、MACの下で、実行：
 9  
10  sudoはN-安定
 11ビューバージョン（インストールが成功した場合）：：VUE -V（大文字V）インストール後に、バージョン番号を確認することを忘れないでください

プロジェクトを作成します。

1、コマンド：

1 VUEのhello-単語を作成します

そのフォルダの中にそこにインストールする場合は、自動的に、フォルダを作成します何があった場合こんにちはワードは、フォルダの名前ではありません。

違いは、2.0テンプレートを選択するために、ここではもはやありませんが、デフォルトのプリセットということです。

注：すべての方法ダウンリストを押してキーボードの矢印キーは、デフォルト（デフォルト）を選択するか、手動（手動）、//デフォルトを選択した場合は、キャリッジリターン（注：今VUE-cli3.0のデフォルトの糸のダウンロード）を実行するために、ここで私は手動で選択します。

ラピッドプロトタイピングは、新しいプロジェクトを作成するためにここではデフォルトの設定では理想的であり、手動で設定し、彼らがより多くのプロジェクト指向の生産ニーズあり、より多くのオプションを提供しています。

カスタム設定：

選択するには、スペースを移動するには上下矢印キー、[カスタム]を選択し、決定するために入力し、カスタム設定、あなたは、これらの設定項目が表示されます。

？PRESETを選んでください：手動SELECT特徴
？必要な機能のチェックのために、あなたのプロジェクト：（すべてを切り替えるには<A>、SELECTを押して、<スペース>、<i>はレート過去に選択を変換するための）
 >（）活字体は                                  // 活字体の書き込みの使用をサポートソース 
 （）プログレッシブWebアプリケーション（PWA）のサポート           // PWAのサポート 
 （）ルータ                                      // サポートルータ-VUE 
 （）vuex                                        // サポートvuex 
 （）CSSプリプロセッサ                          // サポートCSSプリプロセッサ。
 （）リンター/フォーマッタ                          // サポートコードスタイルのチェックとフォーマット。
 （）ユニットテスト                                // サポートユニットテスト。
 （）E2Eテスト                                 // サポートE2Eテスト。
 // 注：あなたがライン上で選挙を統合したいどのような（注：スペースバーは、全体の選挙へのキーを選択してキャンセルすることです）

インストールが完了した後のVue-cli3.0は、あなたは合理化の多くに比べて2.0よりも基本的なディレクトリ構造があります。、不足している設定ディレクトリ、つまり、無ビルドをWebPACKのこれらの2つのフォルダを設定ファイル、およびそれを設定するには、プロジェクトのルートディレクトリにvue.config.jsファイルを作成する必要があります。

このアプローチの利点白のためには非常に友好的である、2つのフォルダの1まで、たくさんのファイルではないと見て大きな頭を持っています。
そして、引用されました~~コピー~~その他1つの構成、また、非常に便利です、単にうまく経由でファイルをコピーします。
文書の単一のクラスへの公的、ルータフォルダへの静的フォルダ。
カスタム構成をWebPACKの何で、私たちがする必要が新しいルートディレクトリを作成 vue.config.jsファイルを、ファイルには、オブジェクトをエクスポートし、詳細は、公式ドキュメントを参照して設定する必要があります

1  // vue.config.js 
2 module.exportsは= {
 3つの   // オプション... 
4 }

ディレクトリ説明：

グラフィカルなインターフェイスを使用します

また、グラフィカル・インターフェース・VUEのUIコマンドを使用してプロジェクトを作成して管理することができます：

1つのビューのUI

上記のコマンドは、ブラウザのウィンドウを開き、グラフィカルなインターフェイスは、プロジェクト作成のプロセスをご案内します。

起動項目

初期の完了、ルートディレクトリにプロジェクトの後：CD私のプロジェクト

コマンド

1つの NPMのRUNサーブ// NPMの実行DEVがされていない前に

、ブラウザにhttpで入力された：// localhostを：8080あなたは、ようこそ画面のVUEを見ることができます

パッケージのオンライン

VUE-CLIコマンドは、プロジェクトのルートディレクトリの下に行われ、パッケージ提供：ビルドを実行NPM
あなたが実行した後、あなたはdistディレクトリのプロジェクトのルートディレクトリより多くを見ることができ、ディレクトリがうまく静的リソース・サーバーに直接デプロイされたすべての静的リソースの良いパッケージです。

vue.config.js設定手順

あなたがインターフェイスアドレスを設定するか、以下を通じて、このmain.jsでまたは別のコンフィギュレーション・ファイル・インターフェース・アドレスで取得する際にここVUEの単純なリストは、当然のいくつかの設定項目をconfig.jsの：

1つの VAR ENV = process.env.NODE_ENV
 2  にconsole.log（ENV）
 3。 vue.config.jsファイル：
 4  
。5つの // vue.config.js設定手順
6  // この列の一部だけ、具体的な構成悲惨ああテスト原稿
7 = module.exportsは{
 8。     // baseUrlに式：{文字列}デフォルト： '/' 
。9      // ベースURLは、アプリケーションを展開する
10      // アプリケーションを展開するために、ベースURLを。
11      // デフォルトでは、VueのCLIは、アプリケーションはドメインのルートディレクトリに展開されることを想定しています。
12      // https://www.my-app.com/。アプリケーションは、サブパス上に展開されている場合は、サブ・パスを指定するには、このオプションを使用する必要があります。たとえば、
　　　　アプリケーションがデプロイされている場合// https://www.foobar.com/my-app/、baseUrlに「/マイアプリ/」に設定。
13は 
14     baseUrlに：process.env.NODE_ENV === '生産者の' '/オンライン/'：？ '/' 、
 15  
16      // outputDirの：ディレクトリタイプのファイルをビルドするときRUNビルドNPM：文字列、デフォルトは'distの' 
17  
18      // outputDirの「DIST」、
。19  
20がある     // ページ：{タイプ：オブジェクト、デフォルト：undfind} 
21がある / * 
22される   。マルチページモードアプリケーションの構築、各「ページ」のJavaScriptファイルに対応するエントリが必要です。値は次のようになります
 23    キーは、エントリの名前であり、この値はどちらかでそのエントリのテンプレートを指定し、ファイル名またはそのエントリの指定対象オブジェクト、
 24個   の文字列を、
 25    の構成でそのページを確認してください。注そうでない場合は、サービスを開始存在するファイルのディレクトリにパスとファイル名がのエラーになります
 26  * / 
27      // {：ページと
28          // インデックス：{ 
29              //ページのエントリ
30              // エントリ： 'SRC /インデックス/ main.js'、
31              // ソーステンプレート
32              // テンプレート： 'パブリック/ index.htmlを'、
33              // DISTとして出力/ index.htmlを
34              / / ファイル名：「index.htmlを」
35          // } 
36          // エントリのみの文字列形式を使用する場合、
37          // テンプレートは`パブリックであると推測される/ subpage.html` 
38          // および公衆`にフォールバック/ index.html`見つからない場合は。
39          // 出力ファイル名は`subpage.html`と推定されます。
40          // サブページ： 'SRC /サブページ/ main.js'
41は     // 、} 
42は 
43である     @    lintOnSave：{タイプ：ブールデフォルト：Q} trueにあなたがeslint使用した場合
44がある      lintOnSave：trueに、
 45      @ productionSourceMap：{タイプ：Bollean、デフォルト：trueに生産ソースマッピング} 
46      // 場合あなたは、これは偽構築物の生産をスピードアップすることができ、ソースマップで生成する必要はありません
47      ：productionSourceMap 偽、
 48      // {タイプ：：。オブジェクト属性3}のホスト、ポート、HTTPS、devserver 
49      // WebPACKの-devのをサポートしています-serverすべてのオプション
50  
51は     devserver：{
 52は          、ポート：8085、// ポート番号
53は、          ホスト： 'ローカルホスト'、
 54は、          HTTPS：falseに、// HTTPS：{型：Boolean} 
55          オープン：trueに、// 配置が自動的に起動するブラウザ
56は、         // プロキシ： 'HTTP：// localhostを：4000' //プロセス間を構成する、のみエージェント
57は         、プロキシ：{
 58              '/ API' ：{
 59                  ターゲット： '<URL>' 、
 60の                  WS：trueに、
 61は                  changeOrigin：trueに
62である             }、
 63は              '/ FOO' ：{
 64                  ターゲット： '<other_url>'
65              }
 66          }   // 複数のプロキシを設定する
67      }
 68 }