/vue-vant-base

这个项目是将一些基础配置比如eslint,移动端适配等进行了封装,开发人员只需fork就可直接开箱即用,不用再做额外的配置

Primary LanguageJavaScript

使用说明

这个项目的起源是因为团队有许多移动端项目,但是不同人搭建项目的时候配置的都不一样,导致维护成本很高,所以我就整理了这个项目,将许多基础配置进行了封装,比如常用的移动端适配,路由缓存,gzip压缩,移动端适配等等,开发人员只需要fork/clone下来即可直接使用,无需再做配置。欢迎大家使用,有问题或者需求请提交Issues,本框架将持续更新。

我是子君,如果觉得这个框架有用,麻烦给我一个star,谢谢,也可以扫描下方二维码关注公众号【前端有的玩】一起玩前端。

功能点

移动端适配

本框架默认使用pxvw来进行移动端适配,已配置完成。如果需要将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

日期工具类

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

代码规范

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

提交规范

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

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

cdn

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

mock

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

目录结构

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

文档

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

所有命令

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

yarn install

启动

yarn serve

打包

yarn build

代码校验

yarn lint

常见问题

1. 启动项目eslintDelete CR prettier/prettier

这个是window 和 mac 换行符不同导致的,为了保持一致,当前系统统一制定换行符为lf,可以在导出项目之前配置

// 提交时转换为LF,检出时不转换
git config --global core.autocrlf input

或者也可以打开.editorconfig 文件,注释掉 end_of_line = lf, 注释方式为在代码前面加 #

2. 使用装饰器可能会提示 Property assignment expected.Vetur(1136)

因为本项目使用eslint进行代码格式检查,所以可以关闭vetur验证script的能力,请在vscode settings里面添加下面代码

"vetur.validation.script": false,