開篇日常立個flag....
前置知識
node 先了解，npm 的指令要會用， webpack 和 vue 的知識要掌握
1、node、npm、webpack 介紹
node 即 node.js，運作在服務端的 JavaScript node官方文檔傳送門
npm 是 node 的包管理工具，用來安裝各種包（比如 webpack、vue） npm官方文檔傳送門
webpack 依賴于 node，是用來編譯打包的工具，簡單了解：一堆檔案壓成更少的幾個或一個（webpack 是 node 的一個子產品？） webpack官方文檔傳送門
webpack-cli 這個是 webpack4.0 以後，從 webpack 分離的？
2、vue 介紹
vue 是一套前端架構，差別于 Jquery 對 DOM 元素的操作，vue 隻關心資料。 vue官方文檔傳送門
個人vue學習筆記
前置條件：環境部署
1、安裝 node.js ：官網直接下載下傳 https://nodejs.org/zh-cn/download/
2、切換 node.js 鏡像（可不切）： 切淘寶鏡像
npm get registry %檢視目前鏡像位址%
npm config set registry http://registry.npm.taobao.org/ %切換成淘寶的鏡像%
npm config set registry https://registry.npmjs.org/ %切回原來的鏡像%
npm install -g cnpm --registry=https://registry.npm.taobao.org %安裝 淘寶鏡像源 cnpm%
其中：cnpm 是 npm 的一個插件，cnpm 用法和 npm 用法一緻，隻是執行指令的時候将 npm 改為 cnpm。這樣做的意義是：國内 npm 速度可能不行，cnpm 伺服器在國内（淘寶團隊）速度可能會好點。
3、安裝 webpack 子產品：
npm install -g webpack %帶上 -g 為全局安裝，下同%
npm install -g webpack webpack-cli
4、安裝 vue 子產品：
npm install -g vue
npm install -g vue-cli
開發工具
IDE用VS Code，插件用 vue-helper
chrome 插件下個 vue-devtools （友善vue調試）安裝傳送門
建立項目
1、指定 project 位置
在檔案路徑裡敲入 cmd 直接打開 指令視窗
2、用 vue-cli 建構項目
vue init webpack xxxx （xxxx 為自定義項目名稱）
輸入指令後，會有如下選項要填：
Project name： xxxx ---- 項目名稱，直接回車預設上一句指令輸入的 xxxx（不能由大寫字母，會報錯）
Project description：
Author：
Vue build：
Runtime + Compiler 運作+編譯（預設推薦）
Runtime-only
Install vue-router? ---- 官方路由，回車預設安裝
Use ESLint to lint your code? ---- 是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，一般項目中都會使用。
Pick an ESLint preset ---- 選擇一個ESLint預設，編寫vue項目時的代碼風格，直接y回車
Setup e2e tests with Nightwatch? ---- 是否安裝e2e測試，預設安裝
項目結構
搬磚過程
項目建立起來，就是往裡面加東西了。
此處省略一萬個字....
編譯運作
啟動項目
npm run dev
這個指令，會擷取 /config/index.js 裡面的配置，然後運作項目
編譯打包
npm run build
打包完成後，會生成 dist 檔案夾，項目部署上線隻需要這個檔案夾。
參考來源：
https://www.cnblogs.com/chenhuichao/p/11039427.html （____chen 的 vue調試工具vue-devtools安裝及使用（親測有效，望采納））
https://www.cnblogs.com/wangzxblog/p/12532620.html （重設代碼的天空 的 vue學習筆記前置篇）
https://www.cnblogs.com/yanggb/p/10822420.html （彩虹の你 的 npm與cnpm的差別）
https://www.cnblogs.com/fengzhenxiong/p/10213198.html （回眸 的 vue-cli（vue腳手架）詳細教程）