VUE快速實戰-新建專案

目錄

前期軟體準備

1. 環境：nodejs安裝
2. 開發工具：vscode安裝
3. 安裝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改造

1. 改造

• 路由按照模組，獨立js檔案
• 建立permission.js檔案，增加router.beforeEach、router.afterEach
• 在第二步基礎上，增加驗證許可權、許可權管理，進度管理（nprogress）

2. 路由能力

• 控制路由頁面是否快取
• 設定路由顯示名字、圖示、高亮、路由樹展示效果等

vuex改造

1. 改造

• 建立modules資料夾，分模組管理，可配和require.context 寫法，遍歷資料夾一次性匯入所有的module

axios改造

1. 改造

• 建立api資料夾，分模組管理訪問後臺方法
• utils建立request.js檔案
• 新增請求攔截

service.interceptors.request

• 新增響應攔截

service.interceptors.response

• 新增統一檔案下載方法

2. 能力

• 登入過期提醒
• 介面錯誤統一提醒
• 請求超時時長設定

常用需求

以下內容將在後續文章詳細展開來講，此處僅作為連結跳轉

excel操作

echart圖表

svg及vue使用svg