一、准備
安裝NodeJs + 安裝Webpack + 配置環境變量
技巧使用：
1. npm 淘寶路徑配置：npm config set registry=https://registry.npm.taobao.org
2.查看npm命令列表 => $ npm help
二、搭建項目
1、全局安裝vue腳手架工具 vue-cli
npm install vue-cli -g
2、初始化 （項目名小寫）
vue init webpack project 或 vue init webpack-simple project # 前者構建的應用豐富於后一個
項目基本信息配置：
Project name (demo-one) # 項目名稱
Project description (A Vue.js project) # 項目描述
Author 作者
Vue build (Use arrow keys) # 直接回車 選擇runtime+compiler
Install vue-router? (Y/n) # 是否安裝Vue路由，也就是以后是spa（但頁面應用需要的模塊）
Use ESLint to lint your code? (Y/n) # 使用 ESLint 代碼檢測工具
Pick an ESLint preset (Use arrow keys) # 選擇一個預置ESLint（使用箭頭鍵）
Setup unit tests with Karma + Mocha? (Y/n) # 是否需要單元測試工具 暫時不需要 n 否
Setup e2e tests with Nightwatch? (Y/n) # 是否安裝端到端測試工具 暫時不需要 n 否
Should we run npm install for you after the project has been created? 在創建完項目之后是否需要自動運行npm install來下載第三方包 我這里選擇第一個npm安裝
3、安裝依賴包 node_modules
npm install
4、運行項目
npm run dev
三、項目說明
1、npm install安裝的是什么呢？我們剛剛在 vue init 初始化的時候會生成一個 package.json 文件
npm install 則會安裝package.json中寫的需要依賴的第三方包，包括dependencies和devDependencies
//如果該安裝方式太慢，可以使用cnpm淘寶代理鏡像
安裝好后就 可以 npm run dev 運行項目了
2、vue-cli初始化文件目錄結構詳解
！！！為什么把這里的App.vue稱為根組件，main.js稱為入口文件呢？
在main.js（入口文件）中App.vue（根組件）import進來了，掛載在了index.html（主頁面）id為app的div上。也就是說，掛載在index.html（主頁面）的組件就是根組件，把根組件掛載在主頁面的文件就是入口文件。
3、如何配置 npm run dev 在瀏覽器后自啟動項目
通過修改config中的index.js文件把autoOpenBrowser改為true~下次運行npm run dev或者npm start后即會自動啟動頁面
四、開發過程中遇到的跨域問題
由於還在script標簽開發的方式下，前端文件和后端文件都在同在apache服務器下，直接請求本機同一個端口的文件並不屬於跨域。但是在vue-cli方式下，由node.js起的一個臨時的服務器占用的是8080端口和后端所方式的文件不處於同一個端口號，這就出現了跨域的問題。
解決方法：修改config index.js中的proxyTable
在main.js（入口文件）中加入一行Vue.prototype.HOST = '/DNA'
以請求的url地址為url: this.HOST+"/insert/get_data"為例子對proxyTable做一個說明
請求的url為/DNA/insert/get_data,由於請求的url中包含了proxyTable中配置了的/DNA,這時候Node.js代理服務器就可以發揮作用了。Node.js會去請求http://localhost/repo/DNA/ins...，把請求得到的接口返回給前端。
為啥是http://localhost/repo/DNA/ins...，下面做一下講解
路徑重寫有什么用呢？如果你程序得接口本來就有這個路徑地址，你可以不需要重寫，如果沒有就需要重寫，把其重寫為空，我這個程序接口其實本來就有/DNA,其實我這里可以不需要重寫，然后把target改為'http://localhost/repo'
五、關於打包
vue-cli已經把打包的東西配置好了，只需要通過npm run build 或者 node build/build.js即可對程序進行打包。
為啥輸入npm run build可以進行打包呢也是package.json配置好的原因
打包出來的文件結果，默認情況，打包生成的文件會放在vue-demo下的dist文件夾，注意雙擊html是不能打開這個文件的（雙擊打開顯示的是一片空白），打包出來的文件需要放在服務器上才能跑起來，以前我雙擊打開看到白白的文件，一直以為是我打包出錯了哈哈哈。
至於static文件和index.html存放的路徑是可以修改的，可以修改為任意的路徑，方便打包后的程序的運行。
修改config文件夾下的index.js文件中build對象的參數即可。
原文作者：風子豬
原文地址：https://segmentfault.com/a/1190000015680030