vue项目规范

一.核心目录分工

1. 目录结构
   1. │ index.html // 首页入口页面。可以配置一些meta信息或者统计代码。
   2. │ package-lock.json // 记录一次本地安装的包版本的所有信息，包括版本号和依赖。本地安装时，如果有该文件，会先按照该文件安装npm包。
   3. │ package.json // 本地安装时，项目所需要的npm包。
   4. │ README.md // 项目的说明文档，markdown 格式
   5. ├─build // 编译配置目录。
   6. ├─config // 配置目录。
   7. │ dev.env.js // 开发环境文件。
   8. │ index.js // 配置生产环境、开发环境、端口号等。
   9. │ prod.env.js // 生产环境文件。
   10. ├─node_modules // npm加载的项目依赖模块，无需提交到git仓库。
   11. └─src // 开发目录
   12. │ App.vue // 项目入口文件。非必要不允许修改。
   13. │ main.js // 项目核心js文件。主要用于初始化vue实例以及引入一些全局组件。
   14. ├─api // 项目接口调用配置，非必要不允许修改。
   15. ├─assets // 项目静态文件目录。
   16. │ ├─css // 样式文件。
   17. │ ├─images // 图片。
   18. │ └─js
   19. ├─components // 页面组件目录。
   20. ├─config // 配置文件。环境配置+api配置+url配置+键盘事件配置。
   21. ├─pages // 页面入口文件目录。
   22. ├─router // 路由配置。
   23. ├─store // vuex配置。
   24. │ │ index.js // 配置文件，用来组装模块和导出store。
   25. │ └─modules // 模块目录。
   26. └─util // 存放公共js目录。
2. pages&compnents目录

• pages：页面入口文件目录，router目录中引入的页面路径。该文件应尽量保持整洁易读，遇到比较复杂的页面，可以引入组件去写。
• compnents：组件目录。公共的组件可放在common文件夹中，其他的组件按照功能不同，分到不同的文件夹中。
• ps:文件命名统一使用驼峰形式。

二.顺序规范

1. 组件/实例顺序（列举了项目中比较常用的组件/实例，详细请看）
   1. {
   2. name: 'tradeDetail',
   3. /** 模板依赖 **/
   4. components: {},
   5. directives: {},
   6. /** 组合 **/
   7. mixins: [listMix],
   8. /** 接口 **/
   9. props: {},
   10. /** 本地状态 **/
   11. data: {
   12. return {}
   13. },
   14. computed: {},
   15. /** 事件 **/
   16. watch: {},
   17. /** 生命周期 **/
   18. beforeCreate () {},
   19. created () {},
   20. beforeMount () {},
   21. mounted () {},
   22. beforeUpdate () {},
   23. updated () {},
   24. activated () {},
   25. deactivated () {},
   26. beforeDestroy () {},
   27. destroyed () {},
   28. /** 非响应式的属性 **/
   29. methods: {}
   30. }
2. html标签中元素特性/属性顺序
   1. <div
   2. class=""
   3. is=""
   4. v-for="(item, index) in list"
   5. v-if/v-else-if/v-else=""
   6. v-show=""
   7. v-cloak=""
   8. v-pre
   9. v-once
   10. id=""
   11. ref=""
   12. :key=""
   13. slot=""
   14. v-model=""
   15. 组件本身支持的特性/属性
   16. v-on:click/submit=""
   17. v-html=""
   18. v-text=""
   19. >
   20. </div>

三.html代码规范<template>

1. 属性等号后面全统一使用双引号，如果双引号中有字符串拼接，就用单引号包字符串。例如 <el-dialog :title="'编辑优惠券' + title" :visible.sync="isShow">
2. 缩进2个空格。缩进没有报错，但是自己得注意缩进。
3. 所有运算符两边都要有空格，根据js的标准来。
4. v-show、v-if的使用。
   v-show：需要频繁切换的使用。
   v-if：初始化渲染后不太会改变的。
   ps：v-show 不支持<template>元素，也不支持 v-else。在element-ui部分组件中也会失效。
5. v-for 一定要有键值 key。
6. v-for和v-if尽量避免在一个html标签中使用。如果同时使用，v-for的优先级大于v-if。
7. 静态资源引用使用绝对路径，如:”~assets/xxx.png”，禁止使用相对路径，如：”../../xx.png”。
8. 指令缩写。组件中v-bind:value用:value代替；v-on:focus用@focus代替。

四.js代码规范<script>

1. 字符串赋值统一使用单引号。
2. this复制统一使用 let that = this。
3. vue中变量定义声明用let或const。
4. 临时变量统一使用驼峰形式命名。

五.css规范<style>

1. 页面中样式尽量写在<style scoped></style>中，避免引起多页面样式被覆盖。
2. <style></style>中的样式都需要加上父元素class，且这个父元素class在所有页面中必须是唯一的。
3. 覆盖饿了么组件样式时,统一加上父元素class。

六.vue相关

1. 组件文件中必须包含name，name必须是由多个单词组成，并且是驼峰形式。
2. 组件中的prop变量统一使用驼峰形式。
3. prop定义要尽量详细。例如：
   1. propE: {
   2. type: Object,
   3. // 对象或数组默认值必须从一个工厂函数获取
   4. default: function () {
   5. return { message: 'hello' }
   6. }
   7. }

七.vue-router

所有的vue项目，统一使用路由懒加载。例如：

1. {
2. path: '(dealer/)?trade/details/:id',
3. name: 'tradeDetail', // 订单详情
4. component (resolve) {
5. require(['@/pages/trade/Details.vue'], resolve)
6. }
7. }

八.关于静态资源（图片）的使用

1.img标签中直接使用本地静态图片。

1. <img src="~assets/images/icon-payment-WeChat.png"/>

2.import或者require中引入本地静态图片。

1. import iconAalipay from '@/assets/images/icon-payment-Alipay.png'
2. data () {
3. return {
4. imgUrl: require('@/assets/images/icon-payment-Alipay.png')
5. }
6. }

3.样式background中使用的本地静态图片。

1. background:url(~assets/images/icon-item-grid-selected.png)

FAQ

vue官网
vue条件渲染
vue风格指南
vue-router