VUE开发规范-V1.0

前提条件

开发环境：Node 开发工具：推荐 WebStorm 同步工具：Git

推荐开发插件

• eslint (代码检测工具)

npm install -g eslint

• mock (模拟数据)

npm install mockjs --save-dev

注释细则

1. // 注释内容表示解释，/** 注释内容 */表示步骤说明

2. 注释加载代码行的上一行，不要加在代码水平的后面

3. 删除不相关的注释

页面风格细则

1. 同一水平线的组件，确保风格大致一直，比如：使用elementUI时，确保input、select等的size一致。

2. 列表操作按钮，确保颜色有区分（推荐删除-红色，编辑-蓝色，查看-白色）

3. 详情、编辑、新增页面，保存（或提交）按钮与返回（或取消）按钮颜色有区分（推荐保存-蓝色，返回-白色）

CSS细则

1. css用less写，.vue以局部css来写<style lang="less" scoped></style>只作用于当前vue文件，并写在当前页面底部。

2. 遇到经常公用的，需写在全局 global.less 里面。

3. 网页采用百度字蛛的方式，见 http://font-spider.org/

接口请求细则

1. 所有接口编写之前请与后端约定好接口文档（接口名称、请求类型、请求字段、返回数据格式与字段）

2. 使用axios进行接口请求，axios只使用get、post，不得使用其他请求类型，如有特殊情况，请与技术经理讨论后再决定

3. 所有的接口需要在api.js中定义，不得直接写死在axios的url参数中

路由细则

1.路由间传递数据，只需要传递标识数据，再在子路由重新请求后台查询数据

2.路由跳转

From路由

# 跳转
this.storeMove({name: "departEdit",query: {"departId": this.infos.departId}
});

To路由

# 获取传递的参数，不支持对象
this.$route.query.departId

3.路由传参

:departId="departId"

父路由

<departDetails v-if="flag=='1'" :departId="departId"></departDetails>

子路由

props: {departId: String
},

axios使用方法

1、普通get请求

this.$axios({method: 'get',url: this.url,params: {...}
}).then(res => {...}).catch(err => {...this.$log('错误信息', err)})

注意：

• 使用 params: {}

2、普通post请求，后台没有@RequestBody

this.$axios({method: 'post',url: this.url,params: {...}
}).then(res => {...}).catch(err => {...this.$log('错误信息', err)})

注意

• 使用 params: {}
• 因为后台没有@RequestBody，则表示直接从params中读取数据

3、post传递json，后台有@RequestBody

this.$axios({method: 'post',url: this.url,data: {...},headers: {'content-type': 'application/json'}
}).then(res => {...}).catch(err => {...this.$log('错误信息', err)})

注意

• 使用 data: {}
• 追加headers -> 'content-type': 'application/json'

通用

1. 代码要加注释

2. 不要在页面写死url，统一提取出来到某个文件（如namespace.js）

3. 公共资源提取出来：图片、颜色等

4. 操作的时候加锁（调ajax），防止重复点击：查询不严格要求，增删改要写（防止重复操作）

5. ajax回调：微信端提示暂时都用alert（提取出来），PC端用饿了么的提示框，manager端用瞰聆的

   • success判断code是否为0：为0代表成功，不为0失败，取res.desc作为提示，code为0时，如果要取data里面的数据，一定先要一层一层判空以避免空指针，如res.data && res.data.id。
   • error代表网络请求失败，要给出提示“网络请求失败，请稍后再试！”，此时res为空。

6. 每次改变搜索条件重新筛选的时候要记得把pageNo页码置为1

7. 列表没有数据时要提示“暂无数据”，根据具体场景提示

8. 不相关的内容不要写

需要解决的问题

UI的比较与选择

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          资源目录│   │   └── css         全局css文件│   │   └── font        字体│   │   └── less        全局less│   │   └── images      图片│   │       └── logo.png│   ├── router          前端路由配置│   │   └── index.js│   ├── mock            模拟数据文件│   │   └── register.js 模拟数据注册│   ├── pages           前端页面文件│   │   └── index.vue│   ├── plugin          插件文件│   │   └── axios       接口请求插件│   │   └── func        自定义方法插件集│   │   └── log         日志插件│   ├── vuex            应用级数据（state）│   │   └── store.js    分组数据存贮├── static              纯静态资源，不会被wabpack构建。

export代码

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 () {}
}

命名要求

• 文件名小写开头，采用驼峰方式

  示例

  apiMoni.vue
  

• 常量全部大写，并使用下划线连接

  示例

  const MAX_COUNT = 10;
  

• 方法命名

  待...

文件格式

UTF-8

事件

• 对没有任何业务逻辑控制的页面，可以直接跳转

• 对于有业务逻辑控制的页面，应绑定链接事件方式，在事件中需要显示loading层，转到目标页面后，再隐藏loading层

• 弹框、select等需要大量代码去实现，要以组件的方式引入

接口调用

• 请求使用Axios

• 请求方式使用GET与POST，不要使用其他方式

token 验证

1、sessionStorage存贮token,尽量少用localStorage

2、登录安全（双重验证）

• 前端路由验证：首先全局路由拦截router.beforeEach，看sessionStorage是否存在验证。
• http请求和响应验证：看后台返回token是否过期，不过期就执行删除sessionStorage 操作，并重新登录。

部署方式

工具

• nginx

打包部署

1. 打包项目：用cmd命令进入到项目的根目录，执行指令npm run build，打包之后会在项目根目录下面生成一个dist文件夹，然后把dist文件夹放到服务器上面。

2. 配置nginx：修改nginx的配置文件nginx.conf，在http里面添加server，格式如下：

   • listen是端口号，
   • server_name是连接地址（域名或ip），
   • root指向打包后项目的物理路径（到index.html的父目录），保存文件，然后启动nginx。

server {listen       80;server_name  www.xxx.com;location / { root   /usr/local/vue/dist;autoindex on;}
}

注意：在nginx使用过程中，如果用到上传文件，通常需要设置nginx报文大小限制，在http里面添加一行代码client_max_body_size 20m;

常见错误以及解决方案

待...

尊重原创

https://my.oschina.net/gmarshal/blog/1923893