NPM 安裝 Vue.js
前期瞭解
1、npm
Node.js下的包管理器，安裝Node.js 後，會自動安裝上
2、webpack
它主要的用途是通過CommonJS的語法把所有瀏覽器端需要釋出的靜態資源做相應的準備，比如資源的合併和打包
3、vue-cli 腳手架構建工具
使用者生成Vue工程模板。（幫你快速開始一個vue的專案，也就是給你一套vue的結構，包含基礎的依賴庫，只需要 npm install就可以安裝）
NPM安裝
1、從官網上下載下載Node.js：https://nodejs.org/en/
2、安裝，選擇安裝目錄，然後一路點選next ，安裝完成
開啟CMD
改變NPM本地倉庫檔案路徑
Node.js 安裝成功後，會自動在AppData\Roaming 生成快取目錄(沒見到npm-cache是因為沒有用過，一使用快取目錄就生成了)，我們把這個目錄移到 D:\nodejs下面來，並建立node_global（用來存放NPM全域性安裝的包）
先如下圖建立2個目錄
然後執行以下2條命令
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
如上圖，我們再來關注一下npm的本地倉庫，輸入命令npm list -global
配置映象站
因為有些npm資源被遮蔽或者是國外資源的原因，經常會導致npm安裝依賴包的時候失敗，所以我們還需要npm的國內映象
輸入命令npm config set registry=http://registry.npm.taobao.org 配置映象站
然後等待，沒報錯表示安裝成功
輸入命令npm config list 顯示所有配置資訊，我們關注一個配置檔案
C:\Users\Administrator\.npmrc
使用文字編輯器編輯它，可以看到剛才的配置資訊
檢查一下映象站行不行命令1
npm config get registry
檢查一下映象站行不行命令2
Npm info vue 看看能否獲得vue的資訊
更新NPM
注意，此時，預設的模組D:\nodejs\node_modules 目錄
將會改變為D:\nodejs\node_global\node_modules 目錄，
如果直接執行npm install等命令會報錯的。
我們需要做1件事情：
1、增加環境變數NODE_PATH 內容是：D:\nodejs\node_global\node_modules
（注意，一下操作需要重新開啟CMD讓上面的環境變數生效）
測試NPM安裝vue.js
命令：npm install vue -g
這裡的-g是指安裝到global全域性目錄去
測試NPM安裝vue-router
命令：npm install vue-router -g
測試NPM安裝 vue-cli vue腳手架
執行npm install vue-cli -g安裝vue腳手架
編輯環境編輯path
對path環境變數新增D:\nodejs\node_global
win10以下版本的，橫向顯示PATH的，注意新增到最後時，不要有分號【;】
重新開啟CMD，並且測試vue是否使用正常
注意，vue-cli工具是內建了模板包括 webpack 和 webpack-simple,前者是比較複雜專業的專案，
他的配置並不全放在根目錄下的 webpack.config.js 中。
用腳手架生成第一個vue專案
進入D盤，直接在根目錄生成第一個vue專案
1、輸入 vue init webpack vue01
說明：
Project name (vuetest)
專案名稱，可以自己指定，也可直接回車，按照括號中預設名字。
Project description (A Vue.js project)
專案描述，也可直接點選回車，使用預設名字。
Author
作者，可以自己指定，也可直接回車。
接下來會讓使用者選擇
Runtime + Compiler: recommended for most users
執行加編譯，既然已經說了推薦，就選它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere
僅執行時，已經有推薦了就選擇第一個了
Install vue-router? (Y/n)
是否安裝vue-router，這是官方的路由，大多數情況下都使用，這裡就輸入“y”後回車即可。
Use ESLint to lint your code? (Y/n)
用ESLint管理程式碼，ESLint是個程式碼風格管理工具，是用來統一程式碼風格的，並不會影響整體的執行。
Setup unit tests with Karma + Mocha? (Y/n)
是否安裝單元測試。
Setup e2e tests with Nightwatch(Y/n)?
是否安裝e2e測試
初始化，安裝依賴
2、執行 npm install 安裝依賴
3、執行 npm run dev 執行專案
成功介面，提示開啟地址http://localhost:8080
自動開啟瀏覽器http://localhost:8080/#/
4、執行 npm run build 生成靜態檔案
開啟dist資料夾下新生成的index.html檔案
nmp下新建出來的vue01的目錄描述：
目錄檔案介紹：
bulid
裡面是一些操作檔案，使用npm run * 時其實執行的就是這裡的檔案。
config
配置檔案，執行檔案需要的配置資訊。
src
資原始檔，所有的元件以及所用的圖片都是在這個資料夾下放著。簡單看一下這個資料夾下都放了哪些東西。
assets
資原始檔夾，放圖片之類的資源，
components
元件資料夾，寫的所有元件都放在這個資料夾下，
router
路由資料夾，這個決定了頁面的跳轉規則，
App.vue
應用元件，所有自己寫的元件，都是在這個元件之上運行了。
main.js
webpack入口檔案。
---------------------