一、【准備工作】
node與git部分見vue-cli2.0搭建案例
vue-cli3.0是一個基於 Vue.js 進行快速開發的完整系統。有三個組件：
CLI：@vue/cli 全局安裝的 npm 包，提供了終端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）
CLI 服務：@vue/cli-service是一個開發環境依賴。構建於 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令）
CLI 插件：給Vue 項目提供可選功能的 npm 包 （如： Babel/TypeScript 轉譯、ESLint 集成、unit和 e2e測試 等）
全局安裝過舊版本的 vue-cli(1.x 或 2.x)要先卸載它，否則vue -V查看依舊是2.x舊版：
npm uninstall vue-cli -g //或者 yarn global remove vue-cli
vue-cli3.0需要 nodeJs ≥ 8.9 (官方推薦 8.11.0+，你可以使用 nvm 或 nvm-windows在同一台電腦中管理多個 Node 版本）
node -v //查看版本
安裝@vue/cli（vue-cli 3.0的包名稱由 vue-cli 改成了 @vue/cli）
cnpm install -g @vue/cli //yarn global add @vue/cli
vue -V //查看版本,注意是大寫V
vue-cli >= 3 和舊版使用了相同的 vue 命令，所以 vue-cli 2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能，你可以全局安裝一個橋接工具：
npm install -g @vue/cli-init
# `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同
vue init webpack my-project
二、【vue-cli3.0搭建項目】
（1）使用命令行搭建項目：
1.搭建一個新項目,除最后兩個，其他選項都是你此前保存的預設配置，其中插件安裝選擇列表：方向鍵選擇（按 “空格鍵”選擇/取消選擇，A鍵全選/取消全選）
vue create my-pro-ui //文件名 不支持駝峰（含大寫字母）# OR //可視化頁面搭建項目
vue ui? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) >( ) Babel //轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。 ( ) TypeScript // TypeScript是一個JavaScript（后綴.js）的超集（后綴.ts）包含並擴展了 JavaScript 的語法，需要被編譯輸出為 JavaScript在瀏覽器運行，目前較少人用 ( ) Progressive Web App (PWA) Support// 漸進式Web應用程序 ( ) Router // vue-router（vue路由） ( ) Vuex // vuex（vue的狀態管理模式） ( ) CSS Pre-processors // CSS 預處理器（如：less、sass） ( ) Linter / Formatter // 代碼風格檢查和格式化（如：ESlint） ( ) Unit Testing // 單元測試（unit tests） ( ) E2E Testing // e2e（end to end） 測試
2.選擇對應功能的具體工具包：是否使用history router + css預處理器 + ESLint + 2.0升級
手動配置案例：https://www.jianshu.com/p/6307c568832d
①是否使用history router：
Vue-Router 利用了瀏覽器自身的hash 模式和 history 模式的特性來實現前端路由（通過調用瀏覽器提供的接口）
hash： 瀏覽器url址欄 中的 # 符號（如這個 URL：http://www.abc.com/#/hello，hash 的值為“ #/hello”），hash 不被包括在 HTTP 請求中（對后端完全沒有影響），因此改變 hash 不會重新加載頁面
history：利用了 HTML5 History Interface 中新增的 pushState( ) 和 replaceState( ) 方法（需要特定瀏覽器支持）。單頁客戶端應用，history mode 需要后台配置支持（詳細參見：https://router.vuejs.org/zh/guide/essentials/history-mode.html）
② css預處理器:主要為css解決瀏覽器兼容、簡化CSS代碼 等問題（* Sass誕生於2007年，最早也是最成熟的一款CSS預處理器語言。）
? Please pick a preset: Manually select features ? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): > SCSS/SASS //Sass安裝需要Ruby環境，是在服務端處理的，SCSS 是 Sass3新語法（完全兼容 CSS3且繼承Sass功能） LESS //Less最終會通過編譯處理輸出css到瀏覽器，Less 既可以在客戶端上運行，也可在服務端運行 (借助 Node.js) Stylus //Stylus主要用來給Node項目進行CSS預處理支持，Stylus功能上更為強壯，和js聯系更加緊密，可創建健壯的、動態的的CSS。
③ ESLint：
? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier //使用較多
④ 何時檢測：
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >( ) Lint on save // 保存就檢測 ( ) Lint and fix on commit // fix和commit時候檢查
⑤ 單元測試 ：
? Pick a unit testing solution: (Use arrow keys) > Mocha + Chai //mocha靈活,只提供簡單的測試結構，如果需要其他功能需要添加其他庫/插件完成。必須在全局環境中安裝 Jest //安裝配置簡單，容易上手。內置Istanbul，可以查看到測試覆蓋率，相較於Mocha:配置簡潔、測試代碼簡潔、易於和babel集成、內置豐富的expect
⑥ 如何存放配置 ：
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) > In dedicated config files // 獨立文件放置 In package.json // 放package.json里
⑦ 是否保存本次配置（之后可以直接使用）：
? Save this as a preset for future projects? (Y/n) // y:記錄本次配置，然后需要你起個名; n：不記錄本次配置
（2）使用圖形化界面：
安裝完成：你可以在這管理（安裝、刪除）插件、運行並分析你的項目文件
搭配vscode編輯器（git+vetur+eslint+代碼提示等插件），面向未來編程！！！
參考：