【Vue實戰之路】1、Vue-cli入門及Vue工程目錄全解。

全面的Vue-cli學習，這一篇就夠了！

1、下載

使用vue-cli前，需先安裝node.js,node的安裝就不贅述，不過在此須要注意：

1. node版本需在4.x以上，首推6.x以上版本（node -v 命令查看）

2. npm要求在 3+ 版本以上 （npm -v 命令查看）

vue-cli下載（推薦NPM方式下載）

npm install -g vue-cli

2、項目初始化

vue init webpack firstVue

這裏的webpack爲vue-cli最經常使用的模板名（此模板的項目配置包括：一個全功能的Webpack + vue-loader安裝程序，帶有熱從新加載，linting，測試和css提取），firstVue是項目的文件夾名稱。

*此時的vue-cli是基於Vue2.x版本，若想換爲1.x則使用如下命令：

vue init webpack#1.0 firstVue

 

官方將模板分爲三類：

第一類爲官方模板，經過使用 」vue init  模板名 項目名」 便可初始化項目信息，具體有如下幾種：

webpack ：」一個全功能的Webpack + vue-loader安裝程序，帶有熱從新加載，linting，測試和css提取。

webpack-simple ： 簡單的Webpack + vue-loader設置，用於快速原型設計。

browserify ：全功能Browserify + vueify設置用熱重裝載，掉毛＆單元測試。

browserify -simple ：用於快速原型設計的簡單的Browserify + vueify設置。

pwa ：基於webpack模板的vue-cli的PWA模板

簡單 ：一個HTML文件中最簡單的Vue設置

第二類爲自定義模板，自定義模板須要在github中fork請求，這個會在後續的進階中提到。

第三類爲本地模板，使用 「 vue init〜/ fs / path / to-custom-template my-project 」 命令進行初始化，這個也會在進階中提到。

3、項目構建

此處先使用最經常使用的webpack模板，經過 vue init webpack firstVue初始化後，會在當前文件夾下建立firstVue的子文件件,而後鍵入一下命令完成項目的構建：

cd firstVue
npm install
npm run dev

npm install 用以安裝此項目的依賴（此處涉及到包管理器的概念，須要node.js基礎），全部的依賴均存放在文件夾下的pack.json裏，查看dependence或devDependences等能夠查看。

npm run dev 執行腳本命令下的dev命令，此命令的細節可在pack.json文件裏查看script下的dev屬性

腳本命令執行後，會顯示編譯是否成功，經過本機的端口可在服務器環境下訪問項目。

 4、腳手架目錄詳解：

此處經過使用命令查看當前vue版本爲2.9.1，-V的v爲大寫

vue -V

當前版本的Vue-cli目錄以下：

（1）build目錄：webpack的配置文件目錄

（2）config目錄：用於存放生產環境和開發環境的配置文件

（3）node_modules目錄：存放整個項目的第三方依賴包文件

（4）src目錄：用於存放全部的項目文件（項目源碼），其中main.js爲整個項目的入口文件

（5）static目錄：用於存放第三方資源文件

（6）babelrc文件：存放babel的配置信息，當咱們使用高級語法，如es6時，須要使用babel的編譯工具，此時會在根目錄下生成babelrc文件用於存放編譯的配置信息。

{
  "presets": [
    ["env", {
      "modules": false
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"]    }
  }
}

presets：預設文件，即babel在編輯高級語法時須要使用的預設編譯文件（例如箭頭函數編譯插件、類編輯插件等），這些預設均可以在node_modules文件夾下找到，env就是一個預設插件，stage-2位草案階段的高級語法，stage-1表明1，2和3階段，stage-2表明的是2階段和3階段。在node_modules文件夾下也能夠找到：以下圖：

plugins：設置插件，transform-runtime就是babel的轉換插件。

comments：將es6語法轉換爲es5以後是否增長註釋，true爲增長

env：對運行環境作配置：test是爲在測試環境下作的配置。

（7）editconfig文件：編輯器的配置文件：

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

root = true表示當打開一個文件時，EditorConfig 插件在文件的目錄和其每一級父目錄查找 .editorconfig 文件，直到有一個配置文件包含 root = true
EditorConfig 配置文件從上往下讀取，而且路徑最近的文件最後被讀取，匹配到的配置按照讀取順序應用在代碼上，最接近代碼文件的屬性優先級最高
[*]表示對全部文件文件使用 editorconfig，也能夠指定某種文件格式
charset = utf-8表示設置文件編碼格式爲 utf-8
indent_style = space表示全部的縮進使用空格，包括 tab 鍵產生的空白
indent_size = 2表示設置整數表示規定每級縮進的列數
end_of_line = lf表示統一設置換行符，不一樣操做系統默認使用不一樣的換行符
windows 是 crlf，即 \r\n
unix 則是 lf ，即 \n
insert_final_newline = true表示文件都以一個空白行結尾
trim_trailing_whitespace = true表示除去換行行首的任意空白字符

（8）eslintignore：eslint代碼檢查文件設置：

/build/
/config/
/dist/
/*.js
/test/unit/coverage/

此處表示使用eslint對根目錄下的全部js文件以及/build/、/config/、/dist/、/test/unit/coverage/四個目錄下的全部文件進行代碼風格檢測。

（9）eslintrc.js文件：對eslint的配置及導出

module.exports = {
  root: true,  //在父級查找
  parser: 'babel-eslint',  //肯定編譯器，babel-eslint基於eslint
  parserOptions: {  //編譯器的配置選項
    sourceType: 'module'   //文件以包模塊的方式導入
  },
  env: {   //配置環境變量
    browser: true,   //瀏覽器環境
  },
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  extends: 'standard', //代碼風格的檢測要求，此處要求爲標準水平（打開上面連接可查看標準要求的書寫規範）
  // required to lint *.vue files
  plugins: [ //添加規範相應文件類型的插件
    'html'
  ],
  // add your custom rules here
  //爲相應的檢測添加規則：
  // "off" -> 0 關閉規則
  // "warn" -> 1 開啓警告規則
  //"error" -> 2 開啓錯誤規則
  'rules': {
    // allow paren-less arrow functions
    //箭頭函數規則（定義箭頭函數使不用寫括號）
    'arrow-parens': 0,
    // allow async-await
    //異步規則 容許使用異步語法
    'generator-star-spacing': 0,
    // allow debugger during development
    // 開發過程調試規則 開發環境容許debug 生產環境不容許debug
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}

 全部的rules選項都可在 https://github.com/standard/standard/blob/master/docs/RULES-en.md查看，並配置到文件中。

 （10）gitignore文件：在使用git提交文件時，忽略的文件與文件夾

（11）postcssrc文件：postcss配置文件

（12）index.html項目的入口模板

（13）package.json整個項目的配置信息

（14）README.md：項目的說明文件