VUE專案建立：

一.前提條件：

1、node安裝， 下載地址為：https://nodejs.org/en/

2、檢查是否安裝成功：如果輸出版本號，說明我們安裝node環境成功

3、為了提高我們的效率，可以使用淘寶的映象：http://npm.taobao.org/

　　輸入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安裝npm映象，以後再用到npm的地方直接用cnpm來代替就好了。

檢查是否安裝成功：

二、搭建vue專案環境

（如果已經下載vue,可以直接建立專案，如果對自己下載的vue版本不滿意，需要先解除安裝vue，再進行安裝

vue解除安裝：

vue-cli(1.x或2.x)：npm uninstall vue-cli -g 或 yarn global remove vue-cli
cli3：npm uninstall -g @vue/cli 或 yarn global remove @vue/cli

vue檢視：

vue --version 或 vue -V (V大寫)

話不多說，正式開始------------------------------------------

步驟1.全域性安裝vue-cli

　　　-->情況1.vue-cli(1.x或2.x)快速建立專案：

　　　　1.全域性安裝 npm install --global vue-cli；
　　　　2.檢視版本/是否安裝成功 vue -V； （2.xx）
　　　　3.在新資料夾下建立專案 vue init webpack‘project’；

? Project name (myApp)  --->專案名稱（不能與建立專案名稱相同）
 ? Project description (A Vue.js project)  ---> 專案描述 （可不填，預設A Vue.js project）
 ? ? Author (hbf <hbf@***.cn>) ---> 作者名稱
 ? Vue build (Use arrow keys)  ---->build是專案打包時的命令，可通過上下鍵進行選擇，通常選一
    Runtime + Compiler: recommended for most users     ---->翻譯：執行時+編譯器:推薦給大多數使用者
    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - re
   nder functions are required elsewhere        ---->翻譯：僅限執行時:大約6KB的lighter min+gzip，但是模板(或任何特定於vue的HTML)只允許在.vue檔案中使用——其他地方需要渲染函式
 ? Install vue-router? (Y/n) ---> 是否初始化路由，建議選y，路由是專案必備
 ? Use ESLint to lint your code? (Y/n) ---> 是否用ESLint來校驗你的程式碼。（如果想程式碼更規範，可選，比如多一個或少一個空格，都是報警告資訊）
 ? Set up unit tests (Y/n)  --->是否建立單元測試（感覺沒太大關係，就沒選）
 ? Setup e2e tests with Nightwatch? No  ---->用夜視器設定e2e測試（感覺沒太大關係，就沒選）
 ? ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)  ---->是否建立完成後執行npm install(安裝node-models），專案建立完成後必須安裝，
 Yes, use NPM ---> 用npm 建立
  Yes, use Yarn    ---> 用yarn 建立（安裝了yarn才能使用）
  No, I will handle that myself   ---> 自己建立

　　　-->情況2.vue-cli3快速建立專案：可參考：https://www.jianshu.com/p/c028e4cfc8c8
　　　　條件：npm 更至最新 node >=8.9；
　　　　1.全域性安裝 npm install -g @vue/cli 或 yarn global add @vue/cli；
　　　　2.檢視版本/是否安裝成功 vue -V； （3.0.0）
　　　　3.在新資料夾下建立專案 vue create‘project’；

? Please pick a preset: (Use arrow keys)  ---->首先就會有三個選項
 hbf (vue-router, vuex, babel, eslint) ---->之前建立專案時儲存的
  default (babel, eslint) ---->預設的。所缺的外掛可以後續用到了再安裝，安裝命令網上一搜一堆。
  Manually select features ---->自己選擇 

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)   ---->專案所需要的模組  （多選，通過上下鍵移動，空格鍵選擇選項）
(*) Babel
 ( ) TypeScript    --->慎重選擇，一種開發語言，不懂的千萬不要選。
 ( ) Progressive Web App (PWA) Support  ---->漸進式Web應用程式(PWA)支援
 ( *) Router ---> 路由
 ( *) Vuex   ---> 狀態管理器
 ( *) CSS Pre-processors  --->  css前處理器，如果用less，sess等，就要選啦
 () Linter / Formatter  --->程式碼校驗
 ( ) Unit Testing  --->單元測試
 ( ) E2E Testing  --->單元測試

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y --->路由是否使用 history模式,看專案需求的，自己寫著玩的專案就隨便啦

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)  --->上面選了css前處理器，下面就要選處理哪種。
 Sass/SCSS (with dart-sass)  ---> dart-sass沒用過
  Sass/SCSS (with node-sass)  --->sess我們一般會用node-sass
  Less  （我選擇的這個）
  Stylus 

? Pick a linter / formatter config: (Use arrow keys)  --->程式碼校驗
 ESLint with error prevention only    --->ESLint只與錯誤預防
  ESLint + Airbnb config    --->
  ESLint + Standard config    --->ESLint + 標準配置
  ESLint + Prettier  （我選擇的這個）  --->嚴格校驗，

//下面的不是太懂其中奧妙，感覺不同選擇直接沒太大差別，隨意選擇吧。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) ---> 選擇額外的lint功能
(*) Lint on save
 ( ) Lint and fix on commit

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)    --->配置檔案房子哪個檔案裡
 In dedicated config files
  In package.json   （選擇這個）

? Save this as a preset for future projects? (y/N) N --->是否儲存現在的配置，如果儲存，下次就可以直接選擇使用 

等待建立就可以了。。。。

步驟2.建立完成後執行下面命令：

cd project

步驟3.安裝依賴包

npm install 或 npm i
或
yarn

步驟4.執行專案：

npm run dev

恭喜你！！專案建立完畢

結束------------------------------------------