1. VUE-CLIは何ですか

　　迅速VUEのプロジェクトテンプレートを生成するために使用される公式が提供する足場を、Vueが-CLI;

　　事前定義されたディレクトリ構造と我々はスケルトンプロジェクトを作成することができますMavenプロジェクトを作成するときのような基本的なコード、このプロジェクトは、より迅速に足場フレームワーク、私たちの開発者であり、

主な特長：

統一されたディレクトリ構造
ローカルデバッグ
ホット・デプロイ
ユニットテスト
統合されたオンラインのパッケージ

2.環境の必要性

Node.jsの： http://nodejs.cn/download/
Gitリポジトリ： https://git-scm.com/downloads

インストールが成功したかどうかを確認Nodejs：

CMDの下の入力が node -v正しく、この数の公表をすることができ印刷できる場合は、参照してください！
CMDの下の入力が npm-v正しく、この数の公表をすることができ印刷できる場合は、参照してください！

淘宝網のミラーは、Node.jsのアクセラレータ（cnpmを）インストール：

1つの ＃マウントグローバルある-g
 2  NPM CNPM -gインストール
 3。 
4。 位または低速NPMの問題を解決するためのステートメントを使用して
 5。 NPMインストール--registry = HTTPS：//registry.npm.taobao.org

インストールVUE-CLI：

1  CNPMはVUE-CLI -gインストール
 2  
3  インストールが成功したかどうか＃テスト
 4  ＃を使用して、テンプレートVUEベースのアプリケーションを作成することができるものを見るために、我々は通常、WebPACKの選択
 5 VUEリスト

前記第1のアプリケーションVUE-CLI

1.はVUEのmyvueとのWebPACKでパッケージ化パッケージ化ツールという名前のプロジェクトを作成し、フォルダにcmdを

1  ここでは＃1 myvueをすることができ、ニーズに応じて名付けられ、プロジェクトの名前である
 2 VUEのinit WebPACKのmyvueを

説明：

プロジェクト名：プロジェクト名、デフォルトにEnterキーを押します
プロジェクトの説明：プロジェクトの説明、デフォルトの入力し、Enterキーを押します
著者：著者のプロジェクトは、デフォルトの入力し、Enterキーを押します
VUE-ルータをインストールします。VUE-ルータを設置している、（手動後半を追加する必要があります）をインストールしないことを選択したn個
あなたのコードをlintの使用ESLint：ESLintは、コード検査を行う使用するかどうかを、n個（手動で追加する後者の必要性）をインストールしないことを選択
ユニットテストセットアップ：関連のユニットテストを、インストールしないことを選択N（後者必要が手動で追加されます）
ナイトウォッチでセットアップE2Eテスト：ユニットテストの関連は、インストールしないことを選択したn個（手動後半を追加する必要があります）
私たちは、プロジェクトが作成された後、あなたのためにインストールNPM実行する必要があります：直接の初期化を作成するために完了し、Nを選択し、我々は手動で行われ、オペレーティング結果を！

2.初期化とプロジェクトmyvueを実行します

1つの CD myvue
 2  NPMは、インストール
 3 NPMの実行DEVを

3.入力してインストールし、ブラウザで正常に実行：HTTP：// localhostを：8080

4.ディレクトリ構造解析VUE-CLI

ビルドと設定：WebPACKのプロフィール
node_modules：依存関係をインストールNPMストアのインストールに使用
SRC：ソースディレクトリプロジェクト
静的：静的リソースファイル
.babelrc：バベルプロファイルは、主な役割は、ES5 ES6を変換することです
.editorconfig：設定エディタ
eslintignore：文法チェッカープロファイルを無視する必要があります
.gitignore：gitのは、プロファイルを無視します
.postcssrc.js：module.exportsはNodeJSモジュラー文法内にあるCSSコンフィギュレーションファイル、
index.htmlを：ホーム、唯一のテンプレートページとして、実際の開発を使用していません
package.json：プロジェクトの設定ファイル
- 名前：プロジェクト名
- バージョン：プロジェクトのバージョン
- 説明：プロジェクトの説明
- 著者：プロジェクトの著者
- スクリプト：パッケージ一般的なコマンド
- 依存関係：依存本番環境
- devDependencies：開発環境依存

SRCディレクトリを分析5.

SRCディレクトリ：プロジェクトのソースディレクトリには、コードのすべてがここに書き込まれます

main.js：エントリファイルのプロジェクトは、我々はすべてのプログラムが入り口を持っているだろうことを知っています

1  `import`コマンドを使用して、負荷に// Vueのビルドバージョン
 2  //は、（実行時のみ、またはスタンドアロン）の別名を持つwebpack.base.confに設定されています。
3  'VUE'からインポートヴュー
 4  インポートアプリ'./App'から
 5  
6  Vue.config.productionTip =偽
 7  
8  / * eslintディセーブル無新しい* /
 9  新しいヴュー（{
 10    EL '#app'、
 11の   成分：{アプリケーション}、
 12    テンプレート： ' < アプリケーション/> '
 13 }）

説明：

mport Vue from 'vue'：ES6が書き込まれ、（「VUE」）を必要とするように変換される;（NodeJSモジュールローダを提供することにある必要）
import App from './App'：上記のように意味はなく、検索パスを指定し、/カレントディレクトリがあります。
Vue.config.productionTip = false：環境について知っているブラウザのコンソールを閉じます
new Vue({...})：Vueの例
- el: '#app'：アプリのid要素でindex.htmlを検索
- template: '<App/>'：テンプレート、内のindex.htmlの<divのid = "アプリ"> </ div>の置き換えます<アプリケーション/>
- components: { App }：「./App」アプリケーションのコンポーネント定義から輸入Appを使用して導入手段;

App.vue：でindex.htmlをコンポーネントと呼ばれます

1  < テンプレート> 
2    < DIV ID = "アプリケーション" > 
3      < IMG SRC = "./資産/ logo.png" > 
4      < HelloWorldの/> 
5    </ DIV > 
6  </ テンプレート> 
7  
8  < スクリプト> 
9  インポートHelloWorldの' ./components/HelloWorld ' 
10  
11  輸出デフォルト{
 12    名前：' アプリケーション' 、
13   成分：{
 14      HelloWorldの
 15    }
 16  }
 17  </ スクリプト> 
18  
19  < スタイル> 
20  #app { 
21    フォントファミリー：'アベニール'、ヘルベチカ、ゴシック、サンセリフ。
22    -webkit-フォントスムージング：アンチエイリアス。
23    -moz-OSX-フォントスムージング：グレースケール。
24    テキスト整列：センター。
25    色：＃2c3e50 。
26   マージントップ：60PX ; 
27  } 
28  </ スタイル>

説明：

テンプレート：HTMLコードテンプレートは、<アプリケーション/>での内容を置き換えます
「./components/HelloWorld」からインポートHelloWorldの：アセンブリのHelloWorldを導入することは、テンプレート<HelloWorldの/>を置き換え
輸出デフォルト{...}：NodeJS派生オブジェクトは、importキーワードを介して導入されます
- 名前：「アプリケーション」：カスタムコンポーネントの名前
- 成分：{HelloWorldの}：サブアセンブリの定義

HelloWorld.vue：

1  < テンプレート> 
2   < DIV > {{MSG}} </ DIV > 
3  </ テンプレート> 
4。 
5。 < スクリプト> 
6。 エクスポートデフォルト{
 7。   名：' のHelloWorld ' 、
 8    データ（）{
 9。     復帰{
 10        MSG：' これは私の最初のVueアイテムである' 
11      }
 12れる   }
 13である }
 14  </ スクリプト> 
15 
16  <！ - このコンポーネントにのみ制限CSSへの"スコープ"属性を追加します- > 
17  < スタイルはスコープ> 
18  H1、H2 { 
19    フォント重量：ノーマルを。
20  } 
21  UL { 
22    リストスタイル型：なし。
23    パディング：0 ; 
24  } 
25  のLi { 
26    表示：インラインブロック。
27    マージン：0 10pxの; 
28 } 
29  { 30   色：＃42b983 。31 } 32 </ スタイル>

説明：

< スタイルスコープ> ：CSSスタイルが有効なだけで、現在のアセンブリに、スコープのスタイル文を、現在のインタフェースはプライベートです！

9.最初VUE-CLIプロジェクト