用 vue 寫 h5 項目的基本結構與依賴整理灯谣，封裝常用工具，快速開發(fā) 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 問題（引發(fā)的 ios 上的輸入標簽點擊不彈出鍵盤問題已解決）放钦。增加
mock.js色徘，前后端分離必備，這里開發(fā)環(huán)境與生產(chǎn)環(huán)境也已做分離最筒。增加
unit-jest單元測試插件。增加
postcss-pxtorem蔚叨，開發(fā)中只需寫實際尺寸床蜘，編譯后會比轉換為 rem 單位。增加
axios蔑水，使用 promise 進行接口交互邢锯，axios。增加
local-storage工具函數(shù)搀别，方便且獨立操作本地存儲丹擎。增加
src/utils/request.ts工具函數(shù)封裝 axios，加入常用的錯誤處理與加載效果。增加
src/utils/router.ts工具函數(shù)處理鏈接上的參數(shù)（在你不使用 vue-router 時可以用工具函數(shù)）蒂培。增加
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加載狀態(tài)俐巴，在 vue 實例中使用this.$loading.toggle(state?: boolean)快速調用加載。增加 vue 全局參數(shù)與方法的 TypeScript 聲明文件
src/types/global-vue.d.ts硬爆，易于擴展欣舵。增加開發(fā)服務器環(huán)境變量配置
.env，支持正式服務器的域名與接口路徑配置（利用代理與 node 環(huán)境變量）缀磕。增加編輯器 VSCode 配置文件缘圈，格式化與檢查代碼符合 tslint 標準。
開發(fā)之前務必閱讀的文檔：
Vue 官方的腳手架@vue/cli 袜蚕。
@vue/cli 的配置文件文檔 vue.config.js糟把。
支持 TypeScript 類式（class-style）組件的依賴 vue-class-component牲剃。
擴展 Vue 裝飾器的依賴 vue-property-decorator遣疯。
HTTP: axios。
項目結構
-
src: 主業(yè)務代碼凿傅。
api: 接口處理
assets: 公共資源
components: 公共組件
directives: 公共指令
local-storage: 本地存儲
mock: 模擬接口數(shù)據(jù)
pages: 所有的多頁面應用
plugins: vue 的公共插件
styles: 公共的可選樣式
types: TypeScript 聲明文件
utils: 工具函數(shù)
tests/unit: 單元測試用例缠犀。
.env: 環(huán)境變量配置。
.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開發(fā)（mock）:
npm start開發(fā)（接口）:
npm start -production生產(chǎn):
npm run build規(guī)范:
npm run lint測試:
npm run test:unit
