码迷,mamicode.com
首页 > 其他好文 > 详细

vue项目中开发规范记录

时间:2019-07-01 00:28:12      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:display   命名   统一   scss   划线   ida   开发规范   osi   约束   

代码规范

文件命名

统一使用下划线分割例如 ** 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 只允许存放系统级别的模块以及功能

vue项目中开发规范记录

标签:display   命名   统一   scss   划线   ida   开发规范   osi   约束   

原文地址:https://www.cnblogs.com/yaogengzhu/p/11111784.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!