vue规范文档参考

开发规范
一、 目录结构
项目地址：…
目录结构
├── index.html 入口页面
├── build 构建脚本目录
│ ├──build.js 生产环境构建（编译打包）脚本
│ ├──check-versions.js 版本验证工具
│ ├──utils.js 主要用来处理css类文件的loader
│ ├──vue-loader.conf.js 处理vue中的样式
│ ├── webpack.base.conf.js webpack基础配置
│ ├── webpack.dev.conf.js webpack开发环境配置
│ └── webpack.prod.conf.js webpack生产环境配置
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ ├── prod.env.js 生产环境变量
│ └── test.env.js 测试环境变量
├── dist 打包好的项目
│ ├── html 静态问件
│ ├── conf nginx配置文件
│ └── 其他 nginx需要的文件
├── node_modules 项目依赖模块
├── src 项目源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ ├── components 公共组件目录
│ ├── assets 资源目录，资源会被wabpack构建
│ │ └── css 第三方css文件，全局css文件
│ │ └── font 字体
│ │ └── less 全局less
│ │ └── images 图片
│ │ └── logo.png
│ ├── routes 前端路由
│ │ └── index.js
│ ├── pages 前端页面文件
│ │ └── index.vue
│ ├── vuex 应用级数据（state）
│ │ └── store.js 分组数据存贮
│ ├── service 公共服务文件
│ │ └── service.js 处理公共请求，响应数据
│ │ └── util.js 处理公共js操作方法
├── static 纯静态资源，不会被wabpack构建。

二、 文件名要求

1. 组件文件
   只要有能够拼接文件的构建系统，就把每个组件单独分成文件。
   当你需要编辑一个组件或查阅一个组件的用法时，可以更快速的找到它。
   正例：
   1
   2
   3 components/
   |- TodoList.vue
   |- TodoItem.vue

反例：
1
2
3
4
5
6
7 Vue.component(‘TodoList’, {
// …
})
Vue.component(‘TodoItem’, {
// …
})
2. 单文件组件文件的大小写
单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)
正例：
1
2 components/
|- MyComponent.vue

反例：
1
2
3 components/
|- myComponent.vue
|- mycomponent.vue

3. 基础组件名
   应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。
   正例：
   1
   2
   3
   4 components/
   |- BaseButton.vue
   |- BaseTable.vue
   |- BaseIcon.vue

反例：
1
2
3
4 components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
4. 单例组件名
只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。
这不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用定制的，而不是它们在你的应用中的上下文。如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，只是目前在每个页面里只使用一次。
正例：
1
2
3 components/
|- TheHeading.vue
|- TheSidebar.vue

反例：
1
2
3 components/
|- Heading.vue
|- MySidebar.vue
5. 紧密耦合的组件名
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。
正例：
1
2
3
4
5
6
7 components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

反例：
1
2
3 components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue

6. 组件名中的单词顺序
   组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。
   正例：
   1
   2
   3
   4
   5
   6
   7 components/
   |- SearchButtonClear.vue
   |- SearchButtonRun.vue
   |- SearchInputQuery.vue
   |- SearchInputExcludeGlob.vue
   |- SettingsCheckboxTerms.vue
   |- SettingsCheckboxLaunchOnStartup.vue
   反例：
   1
   2
   3
   4
   5
   6
   7 components/
   |- ClearSearchButton.vue
   |- ExcludeFromSearchInput.vue
   |- LaunchOnStartupCheckbox.vue
   |- RunSearchButton.vue
   |- SearchInput.vue
   |- TermsCheckbox.vue

7. 模板中的组件名大小写
   总是 PascalCase 的
   正例：
   1
   2
   

反例：
1
2
3
4

8. 完整单词的组件名 组件名应该倾向于完整单词而不是缩写。 正例： 1 2 3 components/ |- StudentDashboardSettings.vue |- UserProfileOptions.vue

反例：
1
2
3 components/
|- SdSettings.vue
|- UProfOpts.vue

三、 文件格式
UTF-8格式
四、 页面中id命名要求
除入口页外，一个页面就是一个Page，每个Page有唯一ID，该ID命名以模块名开头加一杠，以内容名结尾，如login-wrap

五、 H5文件内容要求
1、功能模块的入口页，需要包含基本类库，以及入口页对应的JS脚本，其他子页面只有一个Page内容。
2、对没有任何业务逻辑控制的页面，可以直接跳转。
3、对于有业务逻辑控制的页面，应绑定链接事件方式，在事件中需要显示loading层，转到目标页面后，再隐藏loading层。
4、弹框、select等需要大量代码去实现，要以组件的方式引入。

六、 JS内容要求
1、需要用请求和公共方法的文件，要用import引入：
import store from ‘@/vuex/store’
import {_SendData,_SendDataRes} from ‘@/service/service.js’;
2、子组件引入方式：
A.公共组件经常使用如： header,footer等会一起打包到公共js文件。
先import {xyHeader,xySide} from ‘@/components’;
再暴露components: {xyHeader,xySide};
B.单独组件，不是经常使用的，会单独打包出来，需要引入自己加载出来。
‘xyDrowDown’: () => import(‘component/drowDown.vue’)
3、暴露出去的部分，要按顺序：
export default {
name: ‘index’, 名称
components: {}, 组件
data() {return{}}, 数据
methods: {}, 操作方法
watch: {‘checkboxModel’: {}}, 监听
computed : {“val” : function() {return “123”;}} 计算属性
beforeCreate: function () {}, 创建之前
created: function () {}, 创建完成
beforeMount: function () {}, 挂载之前
mounted: function () {}, 挂载完成
beforeUpdate: function () {}, 更新之前
updated: function () {}, 更新完成
beforeDestroy: function () {}, 销毁之前
destroyed: function () {} 销毁完成
}
七、 Css要求
1、css用less写，.vue以局部css来写只作用于当前vue文件。
2、遇到经常公用的，比如百分比计算，一定要写在全局var.less里面。
@theme：1800px;
.server-wrap>.footer{
bottom: @theme/24;
}
3、公共使用的css要单独放在一个文件夹里（less.css）。
八、 Css字体要求
1.网页采用百度字蛛的方式，根据需要查询加入字体。
http://font-spider.org/
使用例子：
安装完之后-到相应文件直接：font-spider index.html

核心团队

接口请求 1、请求用Axios ，Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 2、看后台需要配置post、get请求，目前只用这两种,一个是取一个是贴，只需要读取文件，put（PUT 往服务器上上传文件）、delect（删除）直接对数据进行操作相对不安全 。 设计概要 1、sessionStorage存贮token 使用sessionStorage只存一个会话，当浏览器关闭重新打开输入时会重新保存token。 2、登录安全（双重验证） 前端路由验证：首先全局路由拦截router.beforeEach，看sessionStorage是否存在验证。 http请求和响应验证：看后台返回token是否过期，不过期就执行删除sessionStorage 操作，并重新登录。 页面流程图

结构化规范
vue文件基本结构

vue文件方法声明顺序

- components   
- props    
- data     
- created
- mounted
- activited
- update
- beforeRouteUpdate
- metods   
- filter
- computed
- watch

注释规范
代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明。
以下情况，务必添加注释
1.公共组件使用说明2.各组件中重要函数或者类说明3.复杂的业务逻辑处理说明4.特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述5.注释块必须以/（至少两个星号）开头/；6.单行注释使用//；
单行注释
普通方法一般使用单行注释// 来说明该方法主要作用
多行注释
组件使用说明，和调用说明

编码规范
优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护。尽量按照ESLint格式要求编写代码
1.使用ES6风格编码源码
定义变量使用let ,定义常量使用const
使用export ，import 模块化
2.组件 props 原子化
提供默认值
使用 type 属性校验类型
使用 props 之前先检查该 prop 是否存在
3.避免 this.$parent4.谨慎使用this.$refs
5.无需将 this 赋值给 component 变量
6.调试信息console.log() debugger 使用完及时删除