马士兵严选商城app前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
Go to file
ch db61f1f9d9
pref:补充文档
3 years ago
public perf:工作流程改成cli 3 years ago
src pref:补充文档 3 years ago
.gitignore perf:工作流程改成cli 3 years ago
.prettierrc.js pref:补充文档 3 years ago
Dockerfile 更新 Dockerfile 3 years ago
README.md pref:补充文档 3 years ago
TODO.md pref:补充文档 3 years ago
babel.config.js perf:工作流程改成cli 3 years ago
deploy.yaml 添加文件 3 years ago
env.config.js 修改支付跳转 3 years ago
nginx.conf 添加文件 3 years ago
package.json 修改打包命令 3 years ago
postcss.config.js perf:工作流程改成cli 3 years ago
tsconfig.json perf:工作流程改成cli 3 years ago
vue.config.js perf:工作流程改成cli 3 years ago

README.md

shopping-app

严选移动端

技术架构

  • uniapp
  • vue2
  • unicli

    打包构建工具

  • vuex

    状态管理

  • uni-simple-router

    路由管理更加的贴近vue-router的路由管理器

  • uview-ui

    基础UI库

  • js-util-all

    基础工具类

  • webscoket

    IM通信

规范约束

  • 使用 VS Code 进行开发,并安装项目推荐的插件
  • 不允许修改 src 目录以外的(项目配置)文件
  • 有需要优化解决的问题记录到 TODO.md 文件中,包括技术方面的踩坑记录和业务方面的 BUG 记录
  • 按照当前项目结构进行功能开发,不允许随意改变项目文件结构

项目结构

SRC 目录 用途描述
common 所有JS文件
--api API 接口定义
--config 项目内配置文件
--dicts 项目中的静态字典表
--plugins 全局插件
--store 数据状态模块
--utils 工具类库模块
components 自定义通用组件
pages 页面文件
static 存放应用的本地静态资源的目录

开发须知

路由页面

  • 页面代码尽量做业务模块拆分,禁止出现大几百行上千行的页面文件
  • 页面业务模块应就在当前页面目录下创建module 不要放到src/components下

工具类utils

  • 项目集成js-util-all基础组件不需要重复造轮子
  • 公共方法统一放置utils文件夹内可以按分类建方法文件 如验证类verify.js 请求类request.js
  • 所有公共方法采用大驼峰命名法
  • 所有的方法都从index.js输出引入时统一引入index不允许直接引入方法文件
  • 所有方法文件如果导出的是多个方法,不允许在定义方法时导出,必须在文件底部一一导出,并附上方法简单的注释
  • 方法头部必须有使用注释
// 正确
import {Req, IsPhone} from '@/common/utils';

// 错误
import {Req} from '@/common/utils/request';
import {IsPhone} from '@/common/utils/utils';

// 正确
/**
 * 判断是否为手机号 
 * @param {String | Number} str 手机号
 * @return {Boolean} 
 */
const IsPhone = (str) => {....}
/**
 * 判断是否为邮箱 
 * @param {String} str 邮箱号
 * @return {Boolean} 
 */
const IsEmail = (str) => {....}
export {
	// 判断手机号
	IsPhone,
	// 判断邮箱
	IsEmail
}

// 错误
export const IsPhone = (str) => {....}
export const IsEmail = (str) => {....}

组件

  • 请务必使用easycom模式引入第三方组件
  • 所有的自定义组件文件名以大驼峰命名且在templet中使用也用大驼峰形式使用
  • 组件分两种类型业务类型、UI功能类型命名区分(Bsxxx:业务组件、Uixxx:UI功能组件)
  • 页头写好使用注释props slot methods events

状态管理以及存储

  • 每个功能模块都要对应一个数据状态管理模块
  • 必须通过 mutations 修改 state 中的数据
  • 接口调用及后续数据逻辑处理应在 actions 中进行,保证多处调用时行为统一
  • 使用本存储时必须与 vuex 结合使用,不允许直接在页面中操作本地存储;
  • 所有存储 key 必须在 config 中 sotrageKey.js 中定义;

请求

  • 所有请求方法命名以Api+请求类型+具体方法) 法命名
  • 所有请求使用ToAsyncAwait 包裹
  • 不允许使用try catch 和 then 处理返回结果
// 使用示例
	// xxapi.js
	import {ToAsyncAwait, ReqestTk} from '@/common/utils'
	const ApiGetUserInfo = (parapms) => ToAsyncAwait(ReqestTk.get('xxxxUrl',{params}));
	exprot {
		// 获取用户信息
		ApiGetUserInfo
	}
	// user.vue
	improt {ApiGetUserInfo} from '@/common/api/xxapi.js';
	
	const getUserInfo = async () =>{
		const {error, result} = await ApiGetUserInfo();
		if(error){
			alert(error);
			return false;
		}
		app.userInfo = result;
	}

图片

  • 按pages目录结果放置图片
  • 有公共使用的图片请放到static/common文件夹内

样式相关

  • 样式命名方式采取BEM命名优先法则
  • 参考 src/styles/gobalVariables.module.less颜色、字号、边距、圆角尽可能复用已有的变量
  • 没有特殊需求不允许写全局样式stlye 标签必须加 scoped
  • 没有特殊需求不允许定义或使用 ID 选择器、属性选择器

代码库

分支管理

  • 分支命名:特性/任务-日期-创建人例如fix/213-0505-ch
  • 所有新开发功能或修复BUG应基于 prod 分支创建未上线以提测的Bug则在原有开发分支上继续开发即可
  • 提测则将开发分支合并到功能分支,再将功能分支合并到 test 分支,严禁将 test 分支合并进其他任何分支
  • 测试通过后先将 beta 分支合并到功能分支解决冲突,再通过提 push request 通知负责人进行代码审查,审查通过后由负责人合并代码
  • 预发通过后先将 特性分支 分支合并到 beta 分支解决冲突,再将 beta 分支合并到 dev 分支,此操作只能由负责人进行
  • 解决冲突时如涉及其他开发者代码,应跟当事人确认无误后再合并;

提交代码

  • 提交前确认项目能正常运行,改动部分功能正常
  • 严格遵循 eslint、prettier 代码规范
  • 严禁使用 git commit --no-verify -m "xxx" 强制提交代码
  • 规范提交信息
    前缀 使用场景 示例
    feat 新增功能点、模块 feat: 用户管理
    fix 修复 BUG fix: 用户管理分页异常
    doc 文档、注释更新 doc: README
    style 样式、不影响逻辑的代码格式更新 style: 用户管理标题字号
    refactor 重构功能点、模块 refactor: 路由模块逻辑重构
    test 测试 test: 测试工具类
    revert 撤回提交 revert: 有文件漏提交
    build 编译打包 build: 编译用户管理
    merge 合并分支 merge: beta into dev
    perf 性能、体验、逻辑优化 pref: 路由模块解析性能
    conf 配置更新 conf: 项目 base 路径
    chore 其他 chore: 其他