江苏龙网

  1. 主页 > 生活百科 > >

Vue3 PC端页面开发规范

Vue3

Vue3 PC端页面开发规范1.开发环境Vue开发环境：
软件
版本
node.js
v16.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.字体规范
参照如下表格：
位置
加粗
颜色
大小
主标题
加粗
#666
16px
次级标题
加粗
#666
14px
小标题
加粗
#666
12px
正文
 
#666
14px
辅助文字
 
#999
12px
失效文字
 
#ccc
12px
链接文字
 
#2db7f5
12px
3.全局边距
全局边距是指页面内容到屏幕边缘的距离，整个应用的界面都应该以此来进行规范，以达到页面整体视觉效果的统一 。全局边距的设置可以更好的引导用户竖向向下阅读 。
在实际应用中应该根据不同的产品气质采用不同的边距，让边距成为界面的一种设计语言，常用的全局边距有32px、30px、24px、12px 。
4.内容边距
页面中不同的内容之间的间距 。
由于我们使用开源UI组件进行开发，在内容边距的设置上保持开源UI组件自身的默认设置即可 。
3.3工程目录结构
Vue3 PC端页面开发规范

文章插图
工程目录结构示意图
说明：
1.module 目录中存放业务的对应页面，要严格按照业务系统的模块划分进行管理 。
2.一个页面至少由三个文件构成：html、js、vue，如果把该页面作为SPA应用来开发，则需要在对应的模块中增加页面名称的目录，并建立 components、router 目录用于存放组件和路由 。
3.在 module 目录下只能存在两个页面：登录页 index 和登录后首页（导航框架页）major 。
构建脚本示例：
vue.config.js
pages: {index: {// 入口文件，相当于单页面的 main.jsentry: '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'},......}


推荐阅读


上一篇：Netty系列之：NIO和netty详解

下一篇：JS函数式编程和递归探索：路由树的操作