用 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 類式（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
