公告

👇👇👇扫我

图片
飞语
Search K

Appearance

Vue 代码开发规范(新) ​

1.项目规范 ​

1.1 新建项目 ​

【强制】PC 端新建项目全部使用 vue(复制 vue-template 项目)。 【缺失】wap-template

1.2 环境变量 ​

【强制】必须有.env.dev(开发+测试)、.env.development(本地)、.env.production(生产)。参考 vue-template 【强制】其他环境让运维添加：如.env.proyd(义东环境) 【参考】环境一般包含下面几个统一域名，详见统一域名规范

1.3 目录结构【参考】 ​

1.4 版本规范 ​

应在项目 package.json 指定本次发布对应的版本，后续会在版本信息采集中使用

1.5 Referrer Policy 规范 ​

浏览器默认会请求头加上 rereferrer 字段，为了安全因素和节省流量，需要主动去掉，方式为在 head 里添加一个 meta

html
<meta name="referrer" content="no-referrer" />
如果遇到第三方服务的js需要验证referrer，可在标签中单独设置

2.命名规范 ​

[原则] 除了公共组件，项目内不允许使用前缀
[原则] 名称拼接不的超过3个单词

2.1 项目及路由命名 ​

【强制】项目名采用小写方式， 以中划线分隔，如vue-org，wap-oa，公共组件用jzb-**。
反例：vue_org、vueOrg
【推荐】项目名最好一个单词，如果被占用就使用近义词，实在没单词就是首字母缩写+关键词，
比如工程档宝，语义engine-file，项目名vue-file被占用，可以使用近义词vue-document、vue-efile
【强制】设置vue.config.js的publicPath为'/项目名/'，比如template项目 publicPath: '/template/',
【强制】路由文件设置统一base属性为'/项目名'，如'/org';
【推荐】路由path格式为 '/模块名/页面名'。
【推荐】全路由格式为 '统一域名/项目名/[模块名/]页面名'。
正例[推荐]: http://page.jizhibao.club/flow/approve/print
正例[推荐]: http://page.jizhibao.club/org/total/all-staff
正例: http://page.jizhibao.club/org/total/AllStaffList
正例: http://page.jizhibao.club/flow/flow/ConfigList

2.2 目录命名 ​

【强制】全部采用小写方式，最好一个单词， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数
scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc

2.3 文件命名 ​

【强制】JS、CSS、less、PNG文件全部采用小写方式， 以中划线分隔。render-dom.js / signup.css / company-logo.png
【强制】页面名用大驼峰和小写中划线拼接都可以，不得超过三个单词，前缀为模块名。
正例：【推荐】flow-config.vue、FlowConfigList.vue、

2.4 JS 命名 ​

【强制】方法、参数、变量命名采用小写驼峰命名 lowerCamelCase。
【强制】常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长。
【推荐】class类、构造函数使用大驼峰命名UpperCamelCase。

2.5 CSS 命名 ​

【推荐】一般将css分为两大类，
基础型：.name .text-center...
模块型/组件型: BEM命名规则（模块 > 元素 > 修饰符 ）（el-table> el-table__header> cell）

3.VUE 规范 ​

3.1 语义化标签 ​

优先使用elementUI框架组件标签(el-container,el-mainer...)
其次使用HTML5的语义化标签(header/section/footer/nav)

3.2 组件的 Prop 定义应该尽量详细 ​

必须使用 camelCase 驼峰命名
必须指定类型
必须加上注释，表明其含义
必须加上 required 或者 default，两者二选其一
如果有业务需要，必须加上 validator 验证

3.3 模板中使用简单的表达式 ​

组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。

3.4 指令都使用缩写形式 ​

指令推荐都使用缩写形式，(用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:)

3.5 必须为 v-for 设置键值 key ​

3.6 v-show 与 v-if 选择 ​

如果运行时，需要非常频繁地切换，使用 v-show ；如果在运行时，条件很少改变，使用 v-if。

3.7 script 标签内部结构顺序 ​

components > props > data > computed > watch > filter > 钩子函数（钩子函数按其执行顺序） > methods

3.8 Vue Router 规范 ​

页面跳转数据传递使用路由参数 使用路由懒加载（延迟加载）机制

3.9 组件封装 ​

【推荐】被多个页面或模块公用的页面可拆分为组件 【推荐】页面代码多功能多可按模块拆分组件 【推荐】被多个项目共用的代码可考虑拆分为公共组件或函数

3.10 其他 ​

尽量不要手动操作 DOM 适时删除无用代码

4.CSS 规范 ​

4.1 样式遵循 UI 标准规范 ​

4.2 缩进 ​

html，js 和 css 的缩进统一使用 4 个空格（一个 tab）

4.3 自定义 CSS 规范 ​

尽量使用缩写属性。background:#f00 url(logo.png) no-repeat left center/60px auto; 省略 0 后面的单位。 禁止使用 ID 选择器及全局标签选择器防止污染全局样式。

4.5 LESS 规范 ​

预处理器统一使用 less（sass 安装包有点慢）。 按@import、变量声明、样式声明的顺序组织。 避免嵌套层级过多，控制在 4 级嵌套内，当可读性受到影响时，将之打断。

5.JS 规范 ​

5.1 符合模板项目的 ESlint 校验规则 ​

5.2 条件判断和循环最多三层 ​

5.3 工具库 ​

【推荐】时间处理：day.js https://dayjs.fenxianglu.cn/ 【推荐】工具函数：lodash.js https://www.lodashjs.com/

6.接口规范 ​

【强制】不要自行组建 api.js，使用系统生成的，不容易出错

6.1 统一接口放到 src/api 目录下 ​

6.2 JAVA 微服务 API 下载地址，没有找到就找后端 ​

http://192.168.0.160/apidocs/projects/

6.3 API 生成格式示例 ​

6.4 调用示例：按需引入 ​

JavaScript
import {duty} from "@/api/org.js";
//1.分页查询
function queryDataList(){
    let params = {
        comId:this.comId,
        page: this.page.pageCurrent,
        size: this.page.pageSize,
        keywords: this.keyword
    };
    duty.listPaged(params).then(res =>{
        if (res.code == '30000') {
            this.dataList = res.records;
            this.page.total = res.total;
        }else{
            this.$layer.msg(res.msg);
        }
    })
}
//2.新增
async function saveDuty(){
    const res = await duty.create({...this.ruleForm});
    if (res.code == '30000') {
        this.visibleDrawer = false; //关闭弹窗
        this.queryDataList();
        this.$layer.msg('保存成功');
    }else{
        this.$layer.msg(res.msg);
    }
}

6.5 依赖声明：在 README.md 写入当前项目内包含的 api.js 说明 ​

依赖的 JAVA API ​

org.js,file.js

7.其他规范 ​

7.1 图标规范 ​

【参考】字体图标使用 jzb-iconfont.css；(以后只加通用型图标) 【推荐】业务型图标按业务自行创建图标库本地引入

7.2 注释规范 ​

整理必须加注释的地方 公共组件使用说明 api 目录的接口 js 文件必须加注释 store 中的 state, mutation, action 等必须加注释 vue 文件中的 template 必须加注释(或在路由中加注释)，若文件较大添加 start end 注释 vue 文件的 methods，每个 method 必须添加注释 vue 文件的 data, 非常见单词要加注释，属性较多必须分类注释 方法或 data 参数较多时最好分组注释。例如

7.3 git 代码提交规范 ​

详见 https://jizhibao.yuque.com/jizhibao/ogahge/ner26l

7.4 Vscode 配置 ​

https://jizhibao.yuque.com/jizhibao/ogahge/ybdiqr

7.5 git 分支策略 ​

master => dev => 个人分支

阅读量: 0
评论量: 0