vue项目中开发规范记录

Posted 2022-03-03 yaogengzhu

代码规范

文件命名

统一使用下划线分割例如 ** goods_library.vue **

代码格式约束

1. vscode 安装 EditorConfig 插件
2. vscode 安装 eslint插件，并且在设置中添加配置项
3. 编辑器出现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开发规范

1. data中尽可能少的数据模型，不需要在页面进行响应的属性禁止写在data内
2. 表单相关的数据，在定义模型时，统一放在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 只允许存放系统级别的模块以及功能