使用说明
这个项目的起源是因为团队有许多移动端项目,但是不同人搭建项目的时候配置的都不一样,导致维护成本很高,所以我就整理了这个项目,将许多基础配置进行了封装,比如常用的移动端适配,路由缓存,gzip压缩,移动端适配等等,开发人员只需要fork/clone下来即可直接使用,无需再做配置。欢迎大家使用,有问题或者需求请提交Issues
,本框架将持续更新。
我是子君,如果觉得这个框架有用,麻烦给我一个star,谢谢,也可以扫描下方二维码关注公众号【前端有的玩】一起玩前端。
功能点
移动端适配
本框架默认使用px
转vw
来进行移动端适配,已配置完成。如果需要将px
转换为rem
,请参考docs
目录下面的文档说明
路由缓存
在开发移动端项目的时候,我们经常会有这样的需求,比如一个列表页跳转到详情页,这时候我们希望列表页可以keep-alive
,但是如果详情页返回到列表页,详情页不需要keep-alive
,本框架已集成了路由缓存,不需要再做任何配置。
内置装饰器
有些场景使用装饰器比在代码里面硬编码显得更简单,比如防抖节流,确认提示等等,当前框架内置了一小部分装饰器,更多装饰器正在完善中
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
常见问题
eslint
报 Delete CR prettier/prettier
1. 启动项目这个是window 和 mac 换行符不同导致的,为了保持一致,当前系统统一制定换行符为lf,可以在导出项目之前配置
// 提交时转换为LF,检出时不转换
git config --global core.autocrlf input
或者也可以打开.editorconfig 文件,注释掉 end_of_line = lf
, 注释方式为在代码前面加 #
Property assignment expected.Vetur(1136)
2. 使用装饰器可能会提示 因为本项目使用eslint
进行代码格式检查,所以可以关闭vetur
验证script
的能力,请在vscode settings
里面添加下面代码
"vetur.validation.script": false,