README

技术栈

• vue2.6 + vant2.5 + vue-router3
• 用于测试vue2技术框架、公司组件库

基于vue-cli4 搭建的初始 H5 模板，快速构建面向现代浏览器的 H5 初始工程

微信，支付宝sdk友情提示

• 微信文档地址
• 支付宝文档地址
• 项目中有对应两个sdk开关键，开发同学的记得打开哦，vue.config.js 下的

const alipaySdk = true
const wxSdk = true

框架

• vue
• vuex
• vue-router

请求库

• axios

UI 组件

• vant

插件

• vuex-persistedstate
• dayjs
• js-cookie

写在前面

升级到vue-cli4后许多配置都和vue-cli2.x时代不同，且相对vue-cli3.x又存在一些变化

新版 CLI 注意点

• webpack 配置移除

  许多之前的build文件等目录结构都变成内置在node模块里，我们可以显式指定一份vue.config.js配置文件在根目录，相反这种目录结构更加简洁明了。

• 静态资源目录变动

相对 cli 2.x, 新版的资源目录从原来的 static迁移至public，原来的模板文件 index.html，迁移至 /public/index.html

• 快速原型构建

  可以直接针对单页面.vue文件直接启动一个服务，方便原型开发。

• GUI 界面

  你也可以通过 vue ui命令以图形化界面创建和管理项目，可以分析依赖包的大小，插件安装情况等。

规范

• 全局组件：src/components, 统一以G开头命名，并且需要写 README
• 路由表：src/router, 页面多的情况下做一下拆分，页面统一懒加载
• 页面：src/views,命名规范为小驼峰，句末不加分号，无插槽自闭。
• 页面样式：src/views/{somePage}/index.less，页面级样式单独放置index.less中
• 私有组件：src/views/{somePage}/components, 样式直接写在组件内方便之后抽离成公共组件，和父组件紧密耦合的子组件应该以父组件名作为前缀命名。命名规范为大驼峰 (PascalCase)

项目特性

• 全局配置：src/config/api.js，可以按需配置使用

• 请求封装：src/utils/https.js，可以按需配置使用

• 环境变量：配置了生产、开发、测试环境env.production，env.development，env.test，可以按需配置使用，src中使用环境变量需要VUE_APP_开头，打包时注意env.prod文件的变量

• 针对生产环境的构建流程配置和优化：cdn加速，chunks分割，gzip压缩，soureMap默认关闭

待实现特性

• [x] 按需引入 UI 组件
• [x] px 转 rem 无感
• [x] 更新移动端 dpr 适配方案
• [x] 生产环境cdn优化首屏加速
• [x] 关闭 sourcemap 防止源码泄露
• [x] 丑化 html/css/js
• [x] 生成 gzip
• [x] babel低版本浏览器兼容
• [ ] 未实现 - Eslint+Pettier统一开发规范
• [ ] 未实现 - H5 分层架构
• [x] - 脚本化生成所需文件 (V)
• [x] - DSBridge (V特性分支)
• [x] 未实现 - 微信公众号内置sdk支持，或者微信小程序内置sdk支持，支付宝生活号sdk支持 (V特性分支)
• [x] - 图标 SVG 自动化生成 (V)
• [ ] 未实现 - 国际化
• [ ] 未实现 - 错误监控平台
• [x] - git 提交风格 git-cz (V)
• [ ] 未实现 - 组件单元测试
• [ ] 未实现 - git 提交钩子
• [x]- 增加自定义指令 (V)
• [x]- 路由守卫push报错问题 (V)

git-cz 规范

1. Select the type of change that you're committing选择您要提交的更改类型
2. What is the scope of this change (e.g. component or file name): (press enter to skip)更改的范围是什么（例如，组件或文件名）：（按Enter跳过）
3. Write a short, imperative tense description of the change (max 61 chars)撰写简短的命令式时态描述（最多61个字符）
4. Provide a longer description of the change: (press enter to skip)提供更改的详细说明：（按Enter跳过）
5. Are there any breaking changes?有重大变化吗？
6. Does this change affect any open issues?此更改会影响任何未解决的问题吗？

• feat 新功能
• fix Bug 修复
• docs 文档更新
• style 代码的格式，标点符号的更新
• refactor 代码重构
• perf 性能优化
• test 测试更新
• build 构建系统或者包依赖更新
• ci CI 配置，脚本文件等更新
• chore 非 src 或者 测试文件的更新
• revert commit 回退

参考

h5快速开发模板