Welcome to vue-vant-template 👋

Vant的模板。拥有基本的页面，例子和恰到好处的配置，fork后就可以立即使用。如果它帮助到你，请给我一颗星星。
本仓库地址： https://github.com/PLQin/vue-vant-template。 你的star是我更新的动力。

💋 鸣谢

感谢 snowzijun/vue-vant-base，他启发了我并提供了优秀的项目vue-vant-base

😜 功能与配置

• mock
  运行命令npm run mock后，再运行命令npm run serve:local。或结合vue-mock-cli食用。

• 屏蔽微信浏览器
  如果您的用户在微信浏览器中打开由本模版创建的项目，则会弹出一个弹窗来提示：请使用系统浏览器打开本网页。
  当然，您也可以关闭 （或删除） 这个弹窗使得它不被触发。

• 数值精度重写
  为了避免出现 0.1 + 0.2 = 0.30000000000000004 的情况，引入了 number-precision 模块针对数值进行计算

• 移动端适配
  本模版默认使用px转vw来进行移动端适配。如果需要将px转换为rem，请参考docs目录下面的文档说明。

• 路由缓存
  本模版不支持 (也不计划支持) 全局配置路由缓存，有需要的话可以尝试引入vue-navigation之类的modules或者在 <router-view /> 处进行自定义配置。

• 内置装饰器
  有些场景使用装饰器比在代码里面硬编码显得更简单，比如防抖节流，确认提示等等，当前模版内置了一小部分装饰器，更多装饰器正在完善中。

• gzip打包压缩代码
  通过配置压缩工具，可以在build的时候，自动将静态资源压缩为gz文件，当部署的服务器 启用gzip功能后，将会自动加载压缩的文件，提高加载速度。

• 二次封装axios
  本模版对axios进行了二次封装，使用时只需要调整一下token获取方式，封装文件位置在 src/utils/request.js。

• 日期工具类
  本模版食用 dayjs，它在GitHub上有28.2K的赞，是一个使用范围极广的时间日期库，更重要的是：

  • 支持UTC
  • 支持国际化
  • 相比moment.js加上locals后3，400KB的体积，dayjs只有2KB

• 代码规范
  本模版内部集成了eslint，全方位的去管控代码规范，为了方便使用，建议使用开发工具如 vscode 时需要安装EsLint插件。

• 提交规范
  虽然定义了eslint，但是假如在提交代码时不去校验，那么也无法有效的限制，所以定义了提交规范，在提交时会自动校验代码格式，并自动格式化。

• cdn
  如果项目需要使用cdn的话，经常会将cdn的地址添加到index.html文件内，同时要对开发和生产环境进行区分，为了方便开发，模版内将cdn提取到了固定的文件内cdn.js，在这个文件内可以指定哪些文件使用cdn，同时有开关可以直接关闭cdn，具体文件在 config/cdn.js文件中。

• 目录结构
  整个模版目录结构比较完整，基本可以满足常规开发，同时，为了提供功能复用，对于组件，分成了base与components两个目录，base里面放没有业务的基本组件，components里面放业务相关的组件，同时base目录里面提供了一个loading组件，在页面使用时可以直接使用this.$loading()调用。

• 文档
  在开发中，一种功能可能会有多种选择，为了满足大家多种选择的需求，本模版特意添加的文档模块，对存在多种方案配置的内容通过文档和示例的方式记录下来，方便大家切换。

😁 所有命令

  # 安装
  npm run install

  # 启动开发环境
  npm run serve

  # 其他人员配置开发环境(这样的话，各开发人员之间配置互不冲突)
  npm run serve:local

  # 打包
  npm run build

  # 打包(将log日志输出在当前目录)
  npm run build:log

  # 启动json-server提供测试数据
  npm run mock

  # 代码校验
  npm run lint

总结：
平时开发时，只需要启动 npm run serve 即可。
如果服务端暂时无法提供数据支撑，也只需同时启动 npm run serve:mock 与 npm run mock。
当仅个别接口需要使用mock数据时，仅需将接口名例如 ：url: '/goods', 改为 url: 'mock/goods', 即可，此时仅需要启动npm run serve 与 npm run mock。

😥 常见问题

• （低版本）安卓浏览器样式错乱
  大部分，大概率是使用了css3 transform 以及 flex 布局导致的，解决办法是尽量的不使用 transform 以及将 flex布局改为 display:inline-block + float 布局

• Safari 浏览器右滑屏幕出现闪屏/白屏
  safari 浏览器存在这个问题，右滑屏幕返回到上一页时将重新刷新页面。但是safari仍然保存着上一页滚动条的位置，这导致了一个闪屏的bug。
  设置页面切换时滚动条的位置并 弃用Vue Transition 初步的解决了此问题：

  // src\router\index.js
  
  const router = new VueRouter({
    routes,
    // 页面滚动行为
    scrollBehavior: () => ({ x: 0, y: 0 })
  })
  

• Safari 浏览器右滑屏幕返回到上一页时卡顿
  [TODO] GitHub 移动端没有这个问题，初步观察当github点击返回按钮时正常返回，右滑返回时刷新了一次页面。
  尝试设置服务端 'Cache-Control', 'no-cache, max-age=0, must-revalidate, no-store' 或许有用

🔑 环境配置

• node >= 12.18.0
• npm >= 6.14.0

👤 贡献者

• Website: @PLQin
• Github: @PLQin

🤝 参与贡献

问题或功能请求都是受欢迎的! 请查看issue页面.

📝 License

Copyright © 2020 PLQin.
This project is MIT licensed.

---

This README was generated with ❤️ by readme-md-generator