VUE實戰還有個人iview填坑之路

周界新起的聯動系統，採用了VUE技能棧。這次內部培訓將vue實戰中的遇到的一些坑及解決方案分享給你們。此外準備了一些vue基本操做分享給後端的小夥伴，在之後的vue項目開發中，就選不會寫也能看得懂。

項目案例

- 項目：LINKAGE

- 項目描述：Linkage是周界獨立的聯動系統，主要用於管理系統管理設備及聯動設備 增刪查改，控制設備物理開關

- 技能棧：vue全家桶（vue-cli3,vue-route,vuex）;axios;iview;websocket;

- 項目地址：http://172.16.151.221:8080/linkage/#/

 vue的起手式

 vue 數據模板

 v-bind

 v-if

 v-for

v-on

v-model 雙向數據綁定

vue的生命週期

 vue全家桶+iview的環境搭建

> node環境搭建

• - windows官網下載安裝包，下一步下一步安裝完成
• - mac os官網下載安裝包，下一步下一步安裝完成,配置環境變量
• - node -v 檢測node是否安裝
• - npm -v 檢測npm是否安裝

> vue cli3安裝

• - npm install -g @vue/cli
• - vue --version檢測vue-cli是否安裝
• - vue ui 啓動項目管理器

> iview安裝

• - vue cli建立項目
• - vue cli安裝所需插件（vue-route,vux,axios,iview）
• - 打開官網開始cv（開個玩笑）開始開發
• - https://www.iviewui.com/docs/guide/install

> 項目啓動（命令啓動）

• - npm run serve(項目啓動)
• - npm run build(項目編譯)

開發前的最後準備

> Axios 攔截封裝

> webpack 配置

> websocket 全局配置

- 聲明全局變量並掛在到vue實例上

- 入口文件建立websocket鏈接

- 子頁面websocket回調使用

實戰填坑

> Axios 操做請求（post,put,delete）

- 在作操做請求前，axios會默認發送一個options 預檢，此時在調用接口時瀏覽器永遠都報302，緣由就是後臺沒有處理opttions接口跨域，同時前端也百思不得其解，爲何我發送一個post請求，會執行opttions接口，緊接着就開始了先後撕逼大戰。

- 解決方案1：後臺處理opptions跨域問題

- 解決方案2：若是項目架構未使用restful接口規範，可都使用get請求格式，不會發送opptions接口預檢（很low）

> iview 表單驗證問題

- 在表單驗證及數據回顯二次驗證時 你確定會遇到一個這樣的問題，新建表單是 int數據填寫驗證沒有任何問題，但修改時2次驗證卻不能經過，緣由是上傳數據類型和你的form驗證類型不一樣步致使。

- 解決方案1：數據回填時，將須要驗證的string數據轉爲int類型。

- 解決方案2：上傳數據時將string轉化爲int類型，若是後臺沒有作特殊處理，那麼返回的也是int類型

> iview table組件個性化

- 在iview table組件中咱們常常須要作一些個性格操做，列入某一行要select下拉框，輸入框綁定事件等等，可是官方文檔卻沒有詳細說明。但實際上iview是支持個性化的一些定製的

- 舉個列子

複製代碼

關於線上部署的一些心得

- 場景1：前端文件基於java項目內部做爲靜態文件；

也是如今運用場景最多的，此時你打包編譯是要注意項目靜態資源目錄的指向還有自動獲取baseURl ，不然會面臨瀏覽器一堆的404

// 打包輸出路徑
outputDir: 'linkage/web',

//靜態資源路徑
publicPath: 'linkage/web'複製代碼

還有就是代碼庫存入的代碼，須要存一份項目源碼，還有編譯後的代碼，這樣才能使用Jenkins持續化部署工具進行一鍵部署

- 場景2：獨立前端靜態服務；

使用node+koa+p2m，或者nginx代理，將前端靜態文件暴露，獨立啓動，後臺做爲一個Api提供服務，先後端獨立啓動互不影響，此時你的代碼庫內就只須要存一份項目源碼，npm install,npm run build使用Jenkins在服務器安裝編譯以及啓動

作個總結

1.項目開發結束後，目前我總結的坑都是能卡住的，一些小坑我就很少作贅述了，總的來講，vue全家桶 + iview開發項目是徹底沒有問題的，不管是開發速度，交互，仍是穩定性 都完勝咱們如今使用的傳統jquery + iframe

2.那vue對於咱們的項目產品線必定好必定適合嗎，那倒也未必。vue全家桶編譯後的項目源碼，是不具有調試的能力的，這就給咱們遠程修改項目或者排查問題帶來必定的困擾，尤爲做爲周界產品，須要對接多種視屏平臺，大多數尚未脫離active X，只能在IE或者低版本瀏覽器進行使用，咱們須要作大量的ie兼容工做。