vue开发规范

目的

统一开发风格，使代码结构更加清晰明了。

前提条件

项目是用vue搭建的，前端vue打开项目是需要一个环境运行的。

软件环境

脚手架: vue-cli 2.0
PC端Vue项目UI框架：ElementUI
移动端Vue项目UI框架：未定
css 预处理： sass/scss
网络请求： axios
公共组件库： ******
图表：echarts
规范语言：es6

开发规范

一、目录结构

├── node_modules  // 项目依赖包文件夹
├── build   // 编译配置文件，一般不用管
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config  // 项目基本设置文件夹
│   ├── dev.env.js  // 开发配置文件
│   ├── index.js  // 配置主文件
│   └── prod.env.js  // 编译配置文件
├── index.html   // 项目入口文件
├── package-lock.json  // npm5 新增文件，优化性能
├── package.json  // 项目依赖包配置文件
├── src    // 我们的项目的源码编写文件
│   ├── App.vue  // APP入口文件
│   ├── assets  // 初始项目资源目录，回头删掉
│   │   └── style // 全局样式
│   │       └── index.scss
│   │   └── utils  //公用事件
│   │       └── index.js
│   ├── components // 组件目录
│   │   └──Hello 
│   │       └──Hello.vue // 公用组件
│   ├── views
│   │   ├─ home
│   │   │    ├── components
│   │   │    │   ├── Sidebar
│   │   │    │   │   ├─ index.vue
│   │   │    │   │   ├─ Item.vue
│   │   │    │   │   └─ SidebarItem.vue
│   │   │    │   ├─ AppMain.vue
│   │   │    │   ├─ index.js
│   │   │    │   └─ Navbar.vue
│   │   │    └─ index.vue
│   │   └─ pages
│   ├── main.js // 主配置文件
│   └── serve // 路由配置文件夹
│       └── Home.api.js   // 路由配置文件
│   └── units // 路由配置文件夹
│       └── index.js   // 路由配置文件
│   └── router // 路由配置文件夹
│       └── index.js   // 路由配置文件
└── static // 资源放置目录

二、文件名要求 (摘录云栖社区)

index.js 或者 index.vue，统一使用小写字母开头的(kebab-case)命名规范
属于组件或类的，统一使用大写字母开头的(PascalCase)命名规范
其他非组件或类的，统一使用小写字母开头的(kebab-case)命名规范

Why

文件夹命名： camelCase VS kebab-case

展开node_modules 中的项目依赖，会发现，几乎所有的项目文件夹命名都是kebab-case命名的，使用kebab-case命名的文件夹比camelCase命名的文件夹看起来更清晰

组件命名：kebab-case VS PascalCase

vue的官方的风格指南中关于组件文件名的推荐：单文件组件文件的大小写强烈推荐
单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。单词大写开头对于代码编辑器的自动补全最为友好，因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。然而，混用文件命名方式有的时候会导致大小写不敏感的文件系统的问题，这也是横线连接命名同样完全可取的原因。

属于components文件夹下的子文件夹，使用大写字母开头的PascalBase风格;

./components文件夹下每个components文件夹下最多只有一层文件夹，且文件夹名称为组件的名称，文件夹下必须有index.vue或index.js，

全局通用的组件放在 /src/components下示例

 components // 组件目录
   ├─ Breadcrumb 
   │   └──index.vue
   └─ SvgIcon 
       └──index.vue

业务页面内部封装的组件，放在各自页面下的示例

  - views
    ├─ home
       └─ components
           ├─Sidebar
           │  └─ index.vue
           ├─Item.vue
           ├─SidebarItem.vue
           ├─ AppMain.vue
           ├─ index.js
           └─ Navbar.vue`

其他业务页面中的组件，放在各自页面下的 ./components文件夹下
每个components文件夹下最多只有一层文件夹，且文件夹名称为组件的名称，文件夹下必须有index.vue或
index.js，其他.vue文件统一大写开头（Pascal case），components下的子文件夹名称统一大写开头（PascalCase）
其他文件夹统一使用kebab-case的风格
全局公共组件：/src/components示例

三、文件命名规范

*.js文件命名规范

属于类的.js文件，除index.js外，使用PascalBase风格

其他类型的.js文件，使用kebab-case风格

属于Api的，统一加上Api后缀

*.vue文件命名规范

除index.vue之外，其他.vue文件统一用PascalBase风格

*.scss文件命名规范

统一使用kebab-case命名风格

四、 JS内容要求

需要用请求和公共方法的文件，要用import引入：


import store from '@/vuex/store'

import {_SendData,_SendDataRes} from '@/service/service.js';

子组件引入方式：

公共组件经常使用如： header,footer等会一起打包到公共js文件。

import {xyHeader,xySide} from '@/components';

components: {
  xyHeader,
  xySide
}

单独组件，不是经常使用的，会单独打包出来，需要引入自己加载出来。

 'xyDrowDown': () => import('component/drowDown.vue')

暴露出去的部分，要按顺序：

<script>
import WorkFlowMap from '../components/WorkFlowMap' // 流程图

export default {
  name: 'Index',
  components: {
    WorkFlowMap
  },
  data () {
    return {
      text: ''
    }
  },
  mounted () {
    // 默认意见按钮是否显示
    this.loadList()
  },
  methods: {
    loadList () {
    }
  }
  watch: {                                                // 监听
    gongWenInfoId (newId) {
      this.loadList(newId)
    }
  }
}
</script>

五、语法规范

语法规范请遵循vue风格指南至少B级，推荐C

六、 Css要求

css用sass写，.vue以局部css来写~~


<style lang="scss" scoped>
.custom-view {
  width: 100%;
  background: #f8f8f8;
  & div {
    width: 800px;
    margin: 30px auto 0 auto;
    background: #fff;
  }
  &:first-child {
    &:after {
      content: "";
      background: #fff;
      margin: 0 auto 30px auto;
    }
  }
}
</style>

只作用于当前vue文件。

PS: 个人整理的有不合适的地方请务必留言指出，谢谢