vue项目开发规范

[phoebeCodeSpace]

vue项目开发规范

目录与文件夹的命名

• 目录（dir） 由小写单词命名，两个以上的单词以下划线“_”分隔（例如node_modules）；
• 资源文件（assets） 由小写单词命名，两个以上的单词以短横杆“-”分隔（例如assets/icon-delete.png）；
• Vue文件（.vue） 统一由大驼峰命名法命名（例如components/MyComponent.vue）；

语法

• prop定义应该尽量详细（以下代码分别提供了 简单语法 和 对象语法 两种示例）；

  # 简单语法
  Vue.component('props-demo-simple', {
      props: ['size', 'myMessage']
  })
  
  # 对象语法，提供校验
  Vue.component('props-demo-advanced', {
  props: {
      // 检测类型
      height: Number,
      // 检测类型 + 其他验证
      age: {
          type: Number,
          default: 0,
          required: true,
          validator: function (value) {
              return value >= 0
          }
      }
   }
  })

• 声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case（以下代码中，js语法中，命名为 greetingText ,在templete中则使用 greeting-text ）；

  # js
  props: {
          greetingText: String,
          required: true
      },
  
  # templete
  <WelcomeMessage greeting-text="hi"/>
  

• 总是用key为 v-for 设置键值；

• 统一使用指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:)；

组件/实例的选项放置顺序

组件/实例的选项应该有统一的顺序：

1. name,props,components 确定的值;

2. computed,data 数据;

3. filters,methods,watch 处理方法;

4. 生命周期。

       export default {
           name:'',     #  组件名
           props: {     #  属性
               status: String,
               required: true
           },
           components: {
               # ..引用组件
           },
           computed: {
               # ..计算属性
           },
           data () {
               return {
                   
               }
           },
           filters: {
               # ..过滤器
           },
           methods: {
               # ..公共方法
           },
           watch: {
               # ..监听
           },
           mounted () {  # 生命周期按照他们被调用的顺序
   
           },
           destroyed () {
   
           }
       }

工程项目

建议工程目录如下，会根据具体项目稍作调整。

    ├── /dist/           # 项目输出目录
    ├── /static/         # 静态资源(不需要webpack处理)
    ├── /src/            # 项目源码目录
    │ ├── /assets/          # 资源
    │ │ └── /images/            # 图片资源
    │ ├── /theme/           # 样式
    │ │ └── /common/            # 公共样式 如：reset.scss、mixin.scss、vars.scss
    │ ├── /components/      # 组件
    │ ├── /views/           # 页面
    │ ├── /services/
    │ │└── api.js           # 数据接口
    │ ├── /routes/
    │ │ └── index.js            # 路由入口
    │ ├── /utils/        # 工具函数
    │ │ ├── config.js       # 项目常规配置
    │ │ ├── directive.js    # 公共指令
    │ │ ├── filters.js      # 公共过滤器
    │ │ ├── request.js      # 异步请求函数
    │ │ └── common.js       # 公共方法
    │ ├── index.js          # 入口文件
    │ └── index.html
    └── package.json     # 项目信息