vue开发管理文档规范
文档管理
1.1 文档信息
|
文档名称 |
|
||
|
保密级别 |
|
文档版本编号 |
|
|
制作人 |
|
制作日期 |
2018.1.19 |
|
复审人 |
|
复审日期 |
|
1.2 修改记录
|
时间 |
版本 |
说明 |
修改人 |
|
|
|
|
|
|
|
|
|
|
内容摘要
接手项目参考文档，辅助入门。
目的
熟悉并掌握
l 智慧农业开发流程
l 智慧农业开发规范
l 通过做简单的示例完成页面流程的开发
前提条件
项目是用vue搭建的，前端vue打开项目是需要一个环境运行的。
1.3 软件环境
1、 开发环境：node
开发规范
一、 目录结构
1、H5页面文件位于E:\webapp\xingyaokeji\intelligent_agr目录下;
目录结构
├── 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构建。
二、 文件名要求
文件名以小写开头，取有意义的英文名字，H5文件名与对应的JS文件名相同，命名以模块名开头加数字（该模块第几个文件），加一杠，以内容名结尾，如live1-ctrol.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来写<style lang="less" scoped></style>只作用于当前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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@font-face {
font-family: 'SourceHanSansCN-Light';
src: url('KaiGenGothicSC-Light.ttf');
/*src: url('src/css/font/SourceHanSansCN-Light.ttf');*/
/*src:*/
/*url('/src/css/font/KaiGenGothicSC-Light.eot?#font-spider') format('embedded-opentype'),*/
/*url('/src/css/font/KaiGenGothicSC-Light.woff') format('woff'),*/
/*url('/src/css/font/KaiGenGothicSC-Light.ttf') format('truetype'),*/
/*url('/src/css/font/KaiGenGothicSC-Light.svg') format('svg');*/
font-weight: normal;
font-style: normal;
}
/*2.然后对元素正常使用font-family就可以：*/
body{
font-family: 'SourceHanSansCN-Light';
}
</style>
</head>
<body>
<div>
核心团队
</div>
</body>
</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 操作，并重新登录。
....
页面流程图
