使用说明

本框架是一套基于vant封装的开箱即用的移动端框架，使用本框架不需要再从vue create project命令开始了，本框架内部提供了许多配置，只需要进行少量调整即可开始功能开发。

功能点

gzip打包压缩代码

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

自动删除console.log

一般在调试程序时，需要通过console.log来调试，但是发布到线上后，一般并不需要这些console.log，如果手动删除太麻烦了，所以配置了自动删除console.log功能

二次封装axios

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

日期工具类

本框架对常用的日期工具类进行了封装，方便开发时使用，不需要重复造轮子

代码规范

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

提交规范

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

同时，对于提交，也添加了commitlint，提交时需要按照固定的格式进行提交，如 git commit -m 'feat: 增加了一个新的功能'，具体可参考commitlint.config.js文件内的注释

cdn

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

mock

我没有使用mock.js，在这里作者建议大家使用yapi 或 Doclevel，框架内有一个目录 mock, 在这里可以配置哪些接口走mock,哪些不走

目录结构

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

所有命令

使用本框架建议使用yarn进行安装启动，安装yarn请执行 npm install yarn -g

yarn install

启动

yarn serve

打包

yarn build

代码校验

yarn lint

我是子君，如果喜欢，请给一个star 谢谢，也可以关注公众号【前端有的玩】一起玩前端