# 前端数据可视化项目介绍 该项目是在node环境下,使用vue(3.0.5)、vue-router(4.0.5)及vuex(4.0.0)开发,基于vite2并提供相应打包服务,搭配element-plusUI框架及echarts图表框架构建,并以axios封装拦截的的web前端项目 ## 构建 ``` 构建 # 安装依赖 npm install # 在本地主机上进行热加载 npm run dev # 小型化打包项目 npm run build ``` 有关工作原理的详细说明,请参阅 [指南](https://v3.cn.vuejs.org/) 。 ## 前端编码规范 HTML ``` 1. 结构、样式、行为分离 确保文档和模板只包含 HTML 结构,样式都放到样式表里,行为都放到脚本里 2. 缩进 统一二位缩进,不要使用Tab、空格混搭 3. 标签一律使用小写字母 例: color: #e5e5e5; 4. HTML 注释 模块注释
段落
大段引用 一般引用 为样式加粗而加粗 为强调内容而加粗 为样式倾斜而倾斜 为强调内容而倾斜 Class 与 ID class 应以功能或内容命名; class 与 id 单词字母小写,多个单词组成时,采用驼峰命名法 属性顺序 HTML 属性应该按照特定的顺序出现以保证易读性。 id class name data-xxx src, for, type, href title, alt aria-xxx, role 布尔值属性 HTML5 规范中 disabled、checked、selected 等不用设置值 ``` Css ``` 1. 注释 组件块和子组件块以及声明块之间使用一空行分隔,子组件块之间三空行分隔; /* ============================== 组件块 ===============================*/ /* 子组件块 ===============================*/ .selector { padding: 15px; } 2. 推荐使用 “SASS” CSS扩展语言 3. 慎重选择高消耗的样式 box-shadows border-radius transparency transforms CSS filters 4. 正确使用 Display 的属性 display 属性会引起回流和重绘,影响页面的渲染,请合理使用。 ``` JavaScript ``` 1. 注释 单行注释 必须独占一行。// 后跟两个空格,缩进与下一行被注释说明的代码一致 多行注释 /** * 这样的多行注释,有多行注释内容时 */ 函数/方法注释 函数/方法注释必须包含函数说明,有参数和返回值时必须使用注释标识 参数和返回值注释必须包含类型信息和说明 当函数是内部函数,外部不可访问时,可以使用 @inner 标识 /** * 函数描述 * @param {string} p1 参数p1的说明 (必传) * @param {string} p2 参数p2的说明(可选) * @return {Object} 返回值描述 */ function foo(p1) { return { p1: p1 }; } 在无参数与返回值情况下,需用单行注释描述函数作用 文件注释 文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些什么。 应该提供文件的大体内容, 作者, 依赖关系。 /** * 文件概述,文件的使用和信息。 * 对xxx依赖性。 * 作者名称 xxx */ 2. 命名 变量, 函数, 函数的参数, 类的方法和属性, 使用 驼峰 命名法。 私有属性、变量和方法以下划线 _ 开头。 常量, 枚举的属性, 使用全部字母大写,单词间下划线分隔的命名方式。 类, 枚举变量, 使用 帕斯卡 命名法 ``` ## 项目介绍 配置 ``` 1. 直连服务器 当在本地主机上进行热加载并直连服务器时,可在 vite.config.js 下配置多服务器连接目标 '/device': { target: 'xxx', changeOrigin: true, ws: true, rewrite: (path) => path.replace(/^\/device/, '/device') }, 2. 连接网关 热加载下可在 .env.development 下的 VITE_BASE_API 属性中配置连接目标 打包下可在 .env.production 下的 VITE_BASE_API 属性中配置连接目标 3. 其他环节变量 VITE_TIME_OUT为请求超时时限 ``` 开发 ``` 1. 模块 模块应部署于 @/src/views 文件夹下,使用 驼峰 命名法命名各文件及其对应文件夹 2. 组件 组件应部署于 @/src/components 文件夹下,使用 驼峰 命名法命名各文件及其对应文件夹 3. 应用及接口 应用及接口应部署于 @/src/api 文件夹 使用 驼峰 命名法命名各文件及其对应文件夹 4. 拦截器 拦截器分为 request 与 download 两部分,并强制传入VITE_CATEGORY参数 request 当 api 文件传入对象中的 type 为 JSON 时,为正常请求 当 api 文件传入对象中的 type 为 FORM 时,为表单式请求,请求头 Content-type 为 application/x-www-form-urlencoded 5. 工具 工具应部署于 @/src/utils 文件夹下,使用 驼峰 命名法 拦截器、正则、存储、用户信息、日期等公用工具下新增函数应新增至已有文件 6. 存储 内部存储应部署于 @/src/store/index.js 文件中,使用 驼峰 命名法 外部存储可使用工具 @/src/utils/store.js 下的各函数进行操作 7. 路由 路由应部署于 @/src/router/index.js 文件中 8. 静态文件 资源建议放置于 @/src/assets 下 ``` LBY 2021/03/30