搭建項目架構
目采用Webpack+Vue-router的架構方式，開始安裝（一切操作都在windows系統上完成）
1.按Win+R，然后在文本框中輸入cmd，回車打開命令行，輸入vue-cli安裝命令：
npm install vue-cli -g
-g：表示全局安裝
2.使用webstorm打開一個空項目目錄，然后命令行中初始化項目，采用的是webpack模板，輸入初始化命令：（此處開發工具為Webstorm）
vue init webpack projectName
projectName:表示你自己起的項目名稱。
你也可以在開始的時候自己起一個項目名稱，然后在該項目的空間下完成初始化工作，此時輸入的命令為：
vue init webpack
3.在命令行中，進入項目目錄（使用cd 文件名稱），使用npm install 命令即可安裝package.json里項目的依賴包。如果網速較慢的話，我們也可以使用淘寶鏡像的cnpm來進行安裝。
如果你之前沒有使用過的話，需要使用定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm。
在項目目錄下使用命令進行初始化,此時輸入的命令為：
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后在使用cnpm來安裝package.json,此時需要輸入的命令為：
cnpm install
4.查看是否安裝正確。在命令行中輸入 npm run dev，如果能在瀏覽器中正常打開頁面，說明安裝成功。
到此，我們開始進行我們的代碼編寫階段，不過在此之前，我們需要做一些准備工作：
在index.html中我們可以通過link方式引入項目title中的favicon，以及一些樣式初始化工作。
然后，在conponents中編寫我們組件--------->在需要使用該組件的頁面的script中使用import導入組件並在components中掛在組件，此時我們就可以像使用html一樣使用該組件了，【------>在index.js中配置使用路由時模板的加載規則。】
路由官方中文文檔鏈接：https://router.vuejs.org/zh-cn/
常用生命周期：
beforecreate : 比如：可以在這加個loading事件
created ：在這結束loading，還做一些初始化，實現函數自執行
mounted ： 在這發起后端請求，拿回數據，配合路由鈎子做一些事情
beforeDestory： 你確認刪除XX嗎？ destoryed ：當前組件已被刪除，清空相關內容
開始引入elementUi
使用npm的方式安裝，它能更好地和webpack打包工具配合使用。
此時的命令為：
npm install element-ui --save
當然，我們也可以使用cnpm安裝
安裝完成后，在main.js中寫入以下內容:
import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' Vue.use(ElementUI)
需要注意的是，樣式文件需要單獨引入。樣式文件的theme-default可能有所不同，需要根據我們安裝的elementUi選擇主題，這里只是記錄一個過程。
那么接下來我們就可以在我們自己的組件中使用Element來布局了，更多的element知識請閱讀官方文檔，地址為：
http://element.eleme.io/#/zh-CN
在我們使用elementUI的<el-col>過程中可能會出現100%高度的問題，那么是怎樣解決的呢？
解決100%高的問題
原因：在頁面中使用了Element組件，這樣他會自動給我們生產虛擬DOM，我們無法設置高度100%；
解決方案：這時候可以利用javascript，來設置100%高度問題。先要給我們的<el-col>標簽上添加一個id，我們這里把ID設置為
安裝Axios
我們還是使用npm install來進行安裝，此時命令為：
npm install axios --save
--save:表示安裝到生產環境中 若是--save-dev 則表示安裝到開發環境中
引入Axios
在需要使用Axios 的組件中引入，由於使用了npm來進行安裝，所以這里不需要填寫路徑，只需
import axios from 'axios'
在我們使用Axios從后台獲取數據時，我們需要在vue的created鈎子函數中進行操作，下面是一個簡單的例子：
created(){ axios.get('url') .then(response=>{ console.log(response); this.result=response.data; }) .catch(error=>{ console.log(error); alert('網絡錯誤，不能訪問'); }) },
把axios的方法寫到了created鈎子函數中，我們使用了get 方法進行拉取數據，如果拉取成功用遠端數據對result進行賦值。
拉取報錯,可能有兩種情況：
- 網絡不通：網絡狀況不是很好，這可以在失敗后隔5秒再次請求。
- 報決絕訪問：這種多是后端開發人員設置了不允許跨域訪問，需要你和后端程序員一起調試解決。
最后，項目打包和上線
打包注意事項有如下的幾點：
1、把絕對路徑改為相對路徑
打開config/index.js下的assetsPublicPath改成
assetsPublicPath:'./'
只有這樣才能保證打包我們的項目能正常運行。
2、在命令行中用npm run build 進行打包
npm run build
將打包完成后，我們會發現項目目錄中會多次一個dist文件夾，這個就是我們項目打包后的結果，我只需要將dist文件的內容拷貝到服務器，分配端口后，我們就可以訪問了。為此我們的整個過程完成。
上述只是一個大概結構，重點為各種包的引入過程，其余都很粗濾，更多內容會在之后補上。。。。。。。。。。。。。。。。。。。。。不喜勿噴。。。。。。。。。。。。。。。。。。。。。。。