Skip to content

Latest commit

 

History

History
84 lines (68 loc) · 4.44 KB

README.md

File metadata and controls

84 lines (68 loc) · 4.44 KB

h5-vue

用 vue 写 h5 项目的基本结构与依赖整理,封装常用工具,快速开发 h5 的脚手架。

[TOC]

简介

项目采用 Vue 的多页应用(multi-page)结构,增加 TypeScript 支持。

在 vue-cli 基础上,增加了如下功能:

  • 增加 vue-class-componentvue-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 标准。

开发之前务必阅读的文档:

项目结构

  • 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 的配置文件。

注意事项

  • 样式文件除了 htmlbody 标签,所有其他标签的 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

附录