Vue快速開發H5腳手架（MPA/SPA結構，支援TypeScript，整合多項移動端常用功能）

摘要： 用 vue 寫 h5 專案的基本結構與依賴整理，封裝常用工具，快速開發 h5 的腳手架。 GitHub：https://github.com/yujinpan/h5-vue 例項 - 無Router多頁：h...

用 vue 寫 h5 專案的基本結構與依賴整理，封裝常用工具，快速開發 h5 的腳手架。

• GitHub：https://github.com/yujinpan/h5-vue
• 例項 - 無Router多頁：https://yujinpan.top/h5-vue/example.html
• 例項 - 帶Router單頁：https://yujinpan.top/h5-vue/example-router.html

更多詳細的文件與例項都在github上。

簡介

專案採用 Vue 的多頁應用（multi-page）結構，增加 TypeScript 支援。

在 vue-cli 基礎上，增加了如下功能：

• 增加vue-class-component ，vue-property-decorator 的 vue 支援 TypeScript 擴充套件。

• 增加多頁打包，在src/pages/ 下的頁面都是單獨的頁面，打包後生成每個資料夾名稱的入口模版檔案，vendor 是共享的。

• 增加fastclick.js ，解決移動端 300ms 問題（引發的 ios 上的輸入標籤點選不彈出鍵盤問題已解決）。

• 增加mock.js ，前後端分離必備，這裡開發環境與生產環境也已做分離。

• 增加unit-jest 單元測試外掛。

• 增加postcss-pxtorem ，開發中只需寫實際尺寸，編譯後會比轉換為 rem 單位。

• 增加axios ，使用 promise 進行介面互動，axios。

• 增加local-storage 工具函式，方便且獨立操作本地儲存。

• 增加src/utils/request.ts 工具函式封裝 axios，加入常用的錯誤處理與載入效果。

• 增加src/utils/router.ts 工具函式處理連結上的引數（在你不使用 vue-router 時可以用工具函式）。

• 增加src/directives/autofoucs.ts 指令，自動聚焦，這是一個小例項，指令都可以在這裡擴充套件。

• 增加src/api/example.ts 例項介面方法，介面都在這個資料夾裡擴充套件。

• 增加vue-router 可選配置，以及路由左右切換的過渡動效。

• 增加全域性的預設樣式，響應式適配手機螢幕（unit(@base-size / 375 * 100, vw) ）。

• 增加移動端常用樣式，半畫素邊框與點選效果。

• 增加預設的左右切換與漸隱過渡效果。

• 增加全域性的 vue 外掛 -$message 彈窗提示，在 vue 例項中使用this.$message.toggle(message: string) 快速呼叫彈窗。

• 增加全域性的 vue 外掛 -$loading 載入狀態，在 vue 例項中使用this.$loading.toggle(state?: boolean) 快速呼叫載入。

• 增加 vue 全域性引數與方法的 TypeScript 宣告檔案src/types/global-vue.d.ts ，易於擴充套件。

• 增加開發伺服器環境變數配置.env ，支援正式伺服器的域名與介面路徑配置（利用代理與 node 環境變數）。

• 增加編輯器 VSCode 配置檔案，格式化與檢查程式碼符合 tslint 標準。

開發之前務必閱讀的文件：

• Vue 官方的腳手架@vue/cli 。

• @vue/cli 的配置檔案文件vue.config.js 。

• TypeScript 文件 。

• 支援 TypeScript 類式（class-style）元件的依賴vue-class-component 。

• 擴充套件 Vue 裝飾器的依賴vue-property-decorator 。

• HTTP:axios 。

專案結構

• src: 主業務程式碼。

  • api: 介面處理

  • assets: 公共資源

  • components: 公共元件

  • directives: 公共指令

  • local-storage: 本地儲存

  • mock: 模擬介面資料

  • pages: 所有的多頁面應用

  • plugins: vue 的公共外掛

  • styles: 公共的可選樣式

  • types: TypeScript 宣告檔案

  • utils: 工具函式

• tests/unit: 單元測試用例。

• .env: 環境變數配置。

• .postcssrc.js: postcss 配置檔案。

• tsconfig.json: TypeScript 的配置檔案。

• tslint.json: TSlint 的配置檔案。

• vue.config.js: @vue/cli 的配置檔案。

注意事項

• 樣式檔案除了html 與body 標籤，所有其他標籤的px 單位都會在編譯時自動轉化為rem ，所以樣式裡只需要寫真實的畫素尺寸。

• 在./src/base.less 中使用的基準@base-size=20 與./.postcssrc.js 中的rootValue: 20 對應。

• ./src/pages/example 這是一個分頁例項，並且打包會忽略此分頁，利用這個資料夾可以快速複製一個帶基本結構與依賴的分頁專案。

• ./src/pages/example-router 這是一個帶 router 的分頁例項。

開始

• 安裝:npm install

• 開發（mock）:npm start

• 開發（介面）:npm start -production

• 生產:npm run build

• 規範:npm run lint

• 測試:npm run test:unit

• 開始:http://localhost:8080/example.html