最近業余幫朋友做兩個vue項目，一個是面向用戶純展示系列的（后統稱A項目），一個是后端管理系統類的（后統稱B項目）。兩者在技術上都沒難度，這里對開發過程遇到的問題、取舍等做一個小節。
關於項目搭建
目前vue-cli腳手架已經很成熟，創建項目很方便，按照官網文檔或網上相應教程即可快速搭建（https://cli.vuejs.org/zh/guide/deployment.html）
優點：快速、方便、零配置、可擴展性強、靈活性強
缺點：對於小項目來講，搭建不夠精簡，會默認安裝多余的包（比如會默認按照jest，nightwath，這些測試框架一般都沒有用到）
PS：如果有用到單元測試且在本地運行，需在jest.config.js配置下新增兩個字段：
關於http請求
采用axios，對http請求結果做統一處理后，列如請求結果返回code為200時處理后直接返回期望值data，非200時按實際情況處理，比如統一彈toast或者跳轉、重定向等。
關於UI框架
A項目采用iview，B項目采用elementUI
從使用舒適度來講，elementui完勝iview。其組件引用更便捷、自定義樣式更靈活，事件綁定更貼近vue開發習慣。
iview體驗較差的原因有:
1. button組件、以及menu組件下的menuitem等點擊事件綁定需要寫成@click.native形式，否則點擊事件可能不生效;
2. 按官網文檔引入iview-loader后，並不是所有組件都能直接以組件名的方式引用，如menu組件下的menuitem，依然要寫成i-menu-item才生效 （對此，既然官網文檔已出但卻沒有達到如述期望，因此對它不太信任...）
關於路由非登錄重定向
這里提供兩種方案：
1. 保存登錄狀態，在目標路由頁面進行登錄狀態判斷，若未登錄，重定向
2. 在路由管理處，通過路由導航守衛做登錄檢測，若未登錄，重定向（推薦這種方式，實現請參考https://github.com/vuejs/vue-router/blob/dev/examples/auth-flow/app.js）
A、B項目的登錄狀態isLogin均掛載在vue實例上，通過this.$root.isLogin可全局訪問。其取值來自localStorage里鍵名為loginState的值。loginState的值是在登錄或退出成功的時候設置。其弊端是當loginState的值被手動修改，那么展示狀態也會隨着更改。但因接口都需權限，且在路由或相應頁面做了處理，所以幾乎沒什么影響。【之所以沒用cookie，是為了用戶安全起見，服務端將cookie設置為只讀，本地拿不到cookie，一定程度上防御了xxs攻擊】
關於upload組件上傳文件跨域問題
因為elementui或iview upload組件上傳文件時使用的是其底層的axios請求，若其action屬性下的接口地址與本地的域名或ip不統一，就會存在cookie跨域的問題。解決方法就是統一域名或ip。
關於elmentui upload組件有刪除提示時，終止文件上傳會提示“是否刪除文件xxx”的bug繞行
elementui upload組件做文件上傳類型限制時，有兩種方案：
1. 直接在其accept屬性里設置允許上傳的文件類型（推薦這種）
2. 在其beforUpload里做類型判斷，如果為期望類型，返回true允許上傳，否則返回false，終止上傳。
方案2本來是沒問題，但如果在beforeRemove函數下引入了this.$confirm('確定刪除xxxxx')?，就會出現bug：beforUpload返回false，upload組件下任務會展示文件上傳進度及上傳成功，並同時彈出“確定刪除xxxxx”的提示框。在這里文件確實沒有上傳，推測upload里展示的上傳可能是個假象，但會給人莫名其妙的感覺，為了避免這個問題，在beforeRemove里做一個判斷，即：當文件允許上傳時才調用this.$comfirm方法，否則不做處理。
關於菜單激活項與當前路由匹配的解決方案
兩種UI框架的思路一樣，以elementui為例，設置為router模式，對應el-menu-item的index屬性取值為目標路由名，如‘/dashboard’，點擊這個菜單項時就會自動導航到目標路由。我們希望點擊這個菜單項時，菜單為激活狀態，menu有個屬性為default-active，將該屬性動態取值為路由名就行，假設default-active='activeIndex', 通過coumputed監測當前路由值即可：
computed: {
activeIndex () {
return this.$route.path // 此處建議路由名稱統一小寫，在取得路由值的時候將字母統一小寫，不然名稱大小寫不一致會影響激活狀態的展示
}
}
關於數組遍歷后單項選中狀態的樣式設置
有兩種方案，
1. 后端字段返回selected狀態值，假設true為選中，false為選中，前端點擊后，將這個值取反
2.前端設置一個curIndex變量，點擊之后就復制當前index給curIndex，在html片段里做條件判斷，如果curIndex === index，則展示選中樣式。
關於內容塊如課程模塊（涉及章、節標題）的新增、刪除、修改的開發
慣用的思維可能會聯想到點擊新增、刪除等會直接進行dom節點的相應操作，這其實不太可取。因為新增的模塊越多，就不好管理消耗比較大。但直接利用vue數據的特性，對其課程模塊數組進行增、刪、改就會容易很多。