Vue开发规范1.0

VUE开发规范-V1.0

前提条件

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

推荐开发插件

eslint (代码检测工具)

npm install -g eslint

mock (模拟数据)

npm install mockjs --save-dev

注释细则

// 注释内容

表示解释，

/** 注释内容 */

表示步骤说明

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

删除不相关的注释

页面风格细则

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

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

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

CSS细则

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

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

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

接口请求细则

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

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

所有的接口需要在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'

通用

代码要加注释

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

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

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

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

success判断code是否为0：为0代表成功，不为0失败，取res.desc作为提示，code为0时，如果要取data里面的数据，一定先要一层一层判空以避免空指针，如res.data && res.data.id。

error代表网络请求失败，要给出提示“网络请求失败，请稍后再试！”，此时res为空。

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

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

不相关的内容不要写

需要解决的问题

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

打包部署

打包项目：用cmd命令进入到项目的根目录，执行指令

npm run build

，打包之后会在项目根目录下面生成一个dist文件夹，然后把dist文件夹放到服务器上面。

配置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