前端开发手册

拟制人 xx 日期 2023/04/25
审核人 日期
批准人 日期

1.PC开发环境要求
1.1、开发工具说明
Visual Studio Code | Webstorm
1.2、PC开发框架和语言使用
开发框架：MVVM框架
开发语言使用了vue3、TypeScript
2.Pc开发规范
2.1、目录结构说明
node_modules 下载的依赖包
Dist 项目打包文件
Config.js 项目配置
EnumConfig.js 公共搜索配置
SysConfig.js 系统配置
 public 静态页面目录
index.html 项目入口
src 源码目录
Assets 静态资源目录
Css 公共样式
Iconfont 字体图标
Images 图片存放目录
Common 公共的模块
Api 接口配置
Components 公共组件
Layout 布局组件
Utils 工具存放目录
Modules 页面模块
Router 项目路由
Vuex 状态管理
App,vue 根组件
Main.ts 入口文件
Permission.js 路由守卫
.env 系统环境变量
Babel.config.js es6配置
Package.js 项目配置文件
ERADME.md 项目说明文件
tsconfig.json TypeScript配置文件
Vue.config.js 可选的webpack 配置
.eslintrc.js eslint 规则
.gitignore git忽略文件
Sftp-deploy.js 自动化部署

2.2、文件命名规范
项目文件名
项目名
全部采用小写方式， 以短横线分隔。例：my-project-name
目录名
参照项目名命名规则
有复数结构时采用复数命名。例：docs、assets、components、directives、mixins、utils、views
图像文件名
全部采用小写方式， 优先选择单个单词命名，多个单词命名以下划线分隔。
Css文件名
全部采用小写方式， 优先选择单个单词命名，多个单词命名以短横线分隔。
JavaScript 文件名
全部采用小写方式， 优先选择单个单词命名，多个单词命名以短横线分隔
 HTML 文件名
全部采用小写方式， 优先选择单个单词命名，多个单词命名以下划线分隔
Vue组件命名
单文件组件名
文件扩展名为 .vue 的 single-file components (单文件组件)。单文件组件名应该始终是单词大写开头 (PascalCase)。
业务组件
业务组件：它不像基础组件只包含某个功能，而是在业务中被多个页面复用的（具有可复用性），它与基础组件的区别是，业务组件只在当前项目中会用到，不具有通用性，而且会包含一些业务，比如数据请求；而基础组件不含业务，在任何项目中都可以使用，功能单一，比如一个具有数据校验功能的输入框。
掺杂了复杂业务的组件（拥有自身 data、prop 的相关处理）业务组件在 一个页面内比如：某个页面内有一个卡片列表，而样式和逻辑跟业务紧密 相关的卡片就是业务组件。
components/
|- Card.vue
紧密耦合的组件名
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。 因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
组件名中单词顺序
组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。 因为编辑器通常会按字母顺序组织文件，所以现在组件之间的重要关系一目了然。如下组件主要是用于搜索和设置功能。
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
完整单词的组件名
组件名应该倾向于而不是缩写。 编辑器中的自动补全已经让书写长命名的代价非常之低了，而其带来的明确性却是非常宝贵的。不常用的缩写尤其应该避免。
2.3、图片资源文件
Src/assets/images 目录下放的是位图文件（.png、.jpeg、.jpg、.gif、.svg）
Src/assets/charge 目录下放的是充电业务使用的图片
Src/assets/devices 目录下放的是页面中使用的公共图标
Src/assets/mean 目录下放的是页面中使用的菜单图标
命名规则：类型{_模块名}_逻辑名称、类型{_模块名}_颜色（{} 内容可选）。例如：
device-active.png、app-user-delete.png 、login-bg.png 等
2.4、布局资源文件（layout/）

命名规则：类型_模块名、类型{_模块名}_逻辑名称。
例如：
NavHeader Navbar

3.web开发注意事项
3.1、在开发应用程序时
应该遵循web设计规范，以便确保应用程序的界面美观、操作简单;
应该注意程序的稳定性，以免在运行时出现崩溃等问题;
应该注意程序的安全性，以免在运行时出现数据泄露等问题;
应该注意程序的性能，以免在运行时出现卡顿等问题;

4.PC发布要求
4.1、关于前端说明
vue项目开发阶段采用脚手架的方式进行的开发，如果开发完成应该将项目打包编译，编译为浏览器可以识别的静态资源文件(HTML/JS/CSS)
Nginx可以作为web的服务器，默认端口80
4.2、前端项目发布
路径修改
说明:前端向后端发起请求时，网址:http://localhost:9988/xxxx.实际开发中服务器都是通过域名的方式访问，所以需要将前端的前缀修改，config/sysConfig.js文件修改接口请求路径
前端项目构建
通过build方式,将前端项目编译打包.
前端项目发布
将前端生成的dist目录 复制到nginx根目录中
前端反向代理
需求: 用户通过域名http://www.jt.com 访问系统的首页index.html
配置信息：

配置前端服务器 www.jt.com

server {
	listen 80;
	server_name www.jt.com;
	location / {
		root   dist;
		index  index.html;
	}
}