代码规范
文件命名
统一使用下划线分割例如 ** goods_library.vue **
代码格式约束
- vscode 安装 EditorConfig 插件
- vscode 安装 eslint插件,并且在设置中添加配置项
- 编辑器出现eslint error 必须解决
vscode 配置添加
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
]
css 规范
统一使用 scss预编译器
命名规范
使用中划线方式命名,例如 .main-container
属性顺序
.main {
position: absolute; // 定位属性放在最前面
top: 0;
left: 0;
display: flex; // 盒子模型放在其次
margin: 10px;
width: 100px;
background: #ee5b5b; // 其他属性放最后
color: #fff;
}
编写规范
嵌套选择器上一行必须有空格
.main {
position: absolute;
top: 0;
left: 0;
.wrapper { // 嵌套选择器上一行必须空格
}
}
vue开发规范
- data中尽可能少的数据模型,不需要在页面进行响应的属性禁止写在data内
- 表单相关的数据,在定义模型时,统一放在form中
```js
vue属性顺序排布
mixins: [],
data() {},
inject: [],
provide: {},
props: {},
computed: {}
watch: {}
directives: {}
created() {},
mounted() {},
//... 生命周期函数
filters: {}
methods: {}
components: {}
项目目录规范
- 禁止在 src/components 目录下放置业务私有组件,业务私有组件应该在业务相关文件夹下建立components目录存放
- assets/js 放置公共js模块,私有js模块应在业务相关文件夹下建立js目录存放
- assets/style 放置公共样式文件,样式文件需写在vue文件中,禁止抽离出来,编写页面时,可将编辑器拆分来分别编写dom以及样式。
- src/config src/directives src/mixins src/utils 只允许存放系统级别的模块以及功能
原文地址:https://www.cnblogs.com/yaogengzhu/p/11111784.html
时间: 2024-10-07 13:45:35