亲宝软件园·资讯

展开

Vue3 PC端页面开发规范及说明

Janeb1018 人气:0

1.开发环境

Vue开发环境:

软件版本
node.jsv16.14.0
vue@vue/cli 5.0.1

UI 框架:

UI框架版本
Element Plus^2.0.5
PrimeVue^3.12.1

其他组件:

其他组件版本
axios^0.26.1
moment^2.29.1
sweetalert^2.1.2

以上列出的是开发所需要的重要部分的软件及其版本号。

项目依赖代码:(package.json)

"dependencies": {
    "@element-plus/icons-vue": "^1.1.1",
    "axios": "^0.26.1",
    "core-js": "^3.8.3",
    "element-plus": "^2.0.5",
    "jsencrypt": "^3.2.1",
    "mitt": "^3.0.0",
    "moment": "^2.29.1",
    "primeflex": "^3.1.3",
    "primeicons": "^5.0.0",
    "primevue": "^3.12.1",
    "sweetalert": "^2.1.2",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "unplugin-auto-import": "^0.6.1",
    "unplugin-vue-components": "^0.17.21"
  }

2.名称解释

多页面开发

多页面开发是指项目经过构建后生成的是多个页面,也就是 Vue 的多入口开发。

页面

组件的容器。

组件

页面组成的一部分,可以多个页面复用的代码。

路由组件

通过路由来展现的组件,只有把一个页面当作一个SPA应用的情况下,才会存在路由组件。

3.开发规范

3.1原则

1.PC端项目全部采用多页面方式;

2.UI组件以使用 PrimeVue 为主,使用 Element Plus为辅,其他 UI 一律不允许使用;

3.2设计原则

1.字体家族

font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

2.字体规范

参照如下表格:

位置加粗颜色大小
主标题加粗#66616px
次级标题加粗#66614px
小标题加粗#66612px
正文#66614px
辅助文字#99912px
失效文字#ccc12px
链接文字#2db7f512px

3.全局边距

全局边距是指页面内容到屏幕边缘的距离,整个应用的界面都应该以此来进行规范,以达到页面整体视觉效果的统一。全局边距的设置可以更好的引导用户竖向向下阅读。

在实际应用中应该根据不同的产品气质采用不同的边距,让边距成为界面的一种设计语言,常用的全局边距有32px、30px、24px、12px。

4.内容边距

页面中不同的内容之间的间距。

由于我们使用开源UI组件进行开发,在内容边距的设置上保持开源UI组件自身的默认设置即可。

3.3工程目录结构

说明:

1.module 目录中存放业务的对应页面,要严格按照业务系统的模块划分进行管理。

2.一个页面至少由三个文件构成:html、js、vue,如果把该页面作为SPA应用来开发,则需要在对应的模块中增加页面名称的目录,并建立 components、router 目录用于存放组件和路由。

3.在 module 目录下只能存在两个页面:登录页 index 和登录后首页(导航框架页)major。

构建脚本示例:

vue.config.js

pages: {
    index: {
      // 入口文件,相当于单页面的 main.js
      entry: 'src/module/index.js',
      // 模板文件
      template: 'src/module/index.html',
      // 编译后 dist 目录下输出的文件,可以包含子目录
      filename: 'index.html'
    },
    major: {
      entry: 'src/module/major.js',
      template: 'src/module/major.html',
      filename: 'major.html'
    },
    页面名称: {
      entry: 'src/module/模块名称/页面名称.js',
      template: 'src/module/模块名称/页面名称.html',
      filename: '/模块名称/页面名称.html'
    },
    ......
  }

说明:

子页面一定要将 filename 项设置为带有模块名称的路径名,否则会构建到根目录下

3.4注释

1.必须进行注释的情况:

2.单行注释 普通方法一般使用单行注释// 来说明该方法主要作用 3.多行注释 组件使用说明,和调用说明

示例:

<!--公用组件:组件名称
/**
* 组件名称
* @module 组件存放位置
* @desc 组件描述 
* @author 组件作者
* @date 2017年12月05日17:22:43
* @param 参数说明
* @param 参数说明
* @emit 触发事件
* @return 返回值
* @example 调用示例
* 
*/
-->

3.5编码规范

定义变量使用let

定义常量使用const

3.6命名规范

本规范使用驼峰式命名(camelCase)和下划线命名法(UnderScoreCase)

普通变量驼峰式命名
类变量驼峰式命名itemOf[数据表名]oldItemOf[数据表名]
类属性下划线命名与数据表字段名保持一致
查询类变量驼峰式命名queryFieldOf[数据表名]
查询类属性驼峰式命名query[字段名]
表格列表驼峰式命名tableDataOf[数据表名]
数据分页驼峰式命名totalOf[数据表名] currentPageOf[数据表名] pageSizeOf[数据表名]
对话框驼峰式命名titleOf[数据表名] dialogVisibleOf[数据表名]
选项驼峰式命名[业务关键字]Options
函数下划线命名法
事件函数下划线命名法[UI组件名]_[UI组件类型]_[事件]ed 如:city_select_changed
函数参数驼峰式命名
组件封装驼峰式命名须根据封装的类型进行合理命名 对话框采用Dialog,弹出框采用Popover等; 格式:[动作][业务][类型],如:EditorContractDialog
路由path下划线命名法全部使用小写字母
路由name驼峰式命名

数据表名:是数据表设计时命名的,在此处的数据表名不包含前缀。

3.7数据校验与删除

1.数据校验一律不允许使用任何校验框架来实现,采用if语句硬编码方式来实现,不符合条件的数据弹出对话框进行提示;

2.数据删除一律弹出确认对话框要求用户确认后执行删除动作;

3.弹出提示信息或确认信息一律使用 sweetalert 组件进行操作,主要原因是其代码量比较小;

弹出提示信息示例:

// 带有确认按钮
swal('错误', '请选择要编辑的数据!', 'error')
// 停留1秒后自动消失
swal({title: "提示!", text: "操作成功!", icon: "success", button: false, timer: 1000});
swal({title: "提示!", text: "操作失败!", icon: "error", button: false, timer: 1000});

弹出确认信息示例:

swal({
        title: "确认",
        text: "确实要删除您选择的数据吗?",
        icon: "warning",
        buttons: ["取消", "确定"],
        dangerMode: true,
      }).then((willDelete) => {
        if (willDelete) {
          // ...
        }
      });

3.8日期数据

在数据提交时,日期时间型数据必须转换为字符串,格式:

日期格式:YYYY-MM-DD

时间格式:HH24:MI:SS

时间戳格式:YYYY-MM-DD HH24:MI:SS

日期格式转换可以直接使用封装好的 utils.js 中的函数进行处理:

dateToString (date, format)
stringToDate (sDate, format)

3.9Rest请求

产品的Rest请求只使用Post和Get,Get请求只适用于文件下载,其余一律使用Post请求。

前端在进行Rest请求时,一律调用封装号的 utils.js 中的postRequest函数进行请求。

postRequest (url, data)

对于无输入参数的请求,一律将data设置为{tmp: null}进行请求

3.10表单数据(类属性)初始化

3.11组件封装

公共组件必须封装为独立的组件;

对于既可以采用封装的方式来实现,也可以在一个独立的vue文件中实现的,视业务逻辑复杂度进行开发,如果预计的代码量超过500行,则进行拆分,将列表、对话框、弹出框、Tab页内容等进行独立开发。

组件封装规范:

原则上不使用组件属性,如果需要属性进行分类则可以使用属性,但需要注意,组件属性不能修改其值,只负责单项传递数据,原则上不使用组件属性双向传递数据

组件封装需实现一个初始化函数和0个或n个回调事件:

初始化函数命名:

init([组件参数])

回调事件命名:

call_back_[事件结果名称]

如果只有一个单一的回调事件必须省略[事件结果名称],只使用call_back

组件调用:this.$refs.[ref_name].init()

触发回调:emit('call_back')

3.12服务代理

服务代理规定访问后端接口的配置方法;使用webpack配置中的proxy项来实现,不允许将访问地址写成固定的字符串捆绑到请求中;

vue.config.js

devServer: {
    proxy: {
      '/oth_api': {
        target: 'http://127.0.0.1:8000/',
        changeOrigin: true
      },
      'qybackstage_api': {
        target: 'http://127.0.0.1:8001/',
        changeOrigin: true
      }
    }
  },

3.13UI组件导入

UI组件的引入必须使用按需导入的方法,不允许一次性全部引入。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

加载全部内容

相关教程
猜你喜欢
用户评论