VUE快速實戰-新建專案
目錄
前期軟體準備
- 環境：nodejs安裝
- 開發工具：vscode安裝
- 安裝vue及腳手架vuecli
搭建專案
1、創建專案
vue create myproject
腳手架創建專案，可以設定vuex、vueRouter、style、Linter等
2、安裝基礎npm包
- 做專案必裝組件：前端組件庫、 http庫
點擊查看代碼
npm i element-ui -S
npm install axios
- 做專案建議使用組件，
npm install lodash
JavaScript 實用工具庫
優化代碼結構（前端框架）
以下列舉一些改造思路、及目標：
vue-router改造
- 改造
- 路由按照模塊，獨立js檔案
- 創建permission.js檔案，增加router.beforeEach、router.afterEach
- 在第二步基礎上，增加驗證權限、權限管理，進度管理（nprogress）
- 路由能力
- 控制路由頁面是否快取
- 設定路由顯示名字、圖示、高亮、路由樹展示效果等
vuex改造
- 改造
- 創建modules檔案夾，分模塊管理，可配和require.context 寫法，遍歷檔案夾一次性匯入所有的module
axios改造
- 改造
- 創建api檔案夾，分模塊管理訪問后臺方法
- utils創建request.js檔案
- 添加請求攔截
service.interceptors.request
- 添加回應攔截
service.interceptors.response
- 添加統一檔案下載方法
- 能力
- 登錄過期提醒
- 介面錯誤統一提醒
- 請求超時時長設定
常用需求
以下內容將在后續文章詳細展開來講，此處僅作為鏈接跳轉
excel操作
echart圖表
svg及vue使用svg
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/440439.html
標籤：其他