一、环境搭建
1.1安装依赖
项目中所需要的依赖都在package.json文件中展示
安装依赖需要使用npm命令进行安装
1.1.1生产环境依赖
生产环境需要的依赖安装在属性dependencies之下
可以使用命令：npm install xxxx --save
不可以安装生产环境无需用到的依赖
1.1.2开发环境依赖
开发环境需要的依赖安装在属性****devDependencies之下
可以使用命令：npm install xxxx --save-dev
1.2webpack配置
1.2.1代理
如果项目中需要使用其他系统请求，涉及跨域问题，可按照如下修改代理配置。
proxy: {
'/api': {
target: 'http://xxxx',
pathRewrite: {'^/api' : ''},// 是否重写
changeOrigin: true, // target是域名的话，需要这个参数，
secure: false, // 设置支持https协议的代理
},
},
二、项目规范
2.1项目技术构成
项目由vue3.x+TS(JS)技术框架搭建，配合vite(webpack )打包
2.2项目结构规范
2.2.1项目结构的核心思想
业务功能模块的相关代码都集中在一块，方便移动和删除
实现关注点分离，方便开发、调试、维护、编写、查阅、理解代码
2.2.2项目目录
├── vue.config.js/ # webpack 配置文件；
├── config/ # 与项目构建相关的常用的配置选项；
│ ├── index.js # 主配置文件
│ ├── dev.env.js # 开发环境变量
│ ├── prod.env.js # 生产环境变量
│ └── test.env.js # 测试环境变量
│
├── src/
│ ├── main.js # webpack 的入口文件；
│ ├── assets/ # 共用的代码以外的资源，如：图片、图标、视频 等；
│ ├── api/ # 网络模块，如：接口；
│ ├── router/ # 路由模块
│ ├── views/ # 单页页面
│ ├── store/ # 组件共享状态
│ ├── components/ # 共用的组件；； 这里的存放的组件应该都是展示组件
│ │ ├── sidebar/ # 封装的左侧菜单栏
│ │ ├── header/ # 共用的全局组件，封装的导航条，头部组件等等
│ │ ├── temp/ # 模板组件，如：相同的页面封装成一个组件。（优化）
│├── libs/ # 工具库，封装的一些工具或方法
├── .babelrc # babel 的配置文件
├── .editorconfig # 编辑器的配置文件；可配置如缩进、空格、制表类似的参数；
├── .eslintrc.js # eslint 的配置文件
├── .eslintignore # eslint 的忽略规则
├── .gitignore # git的忽略配置文件
├── CHAGNELOG.md # 版本更新变更release
├── index.html # HTML模板
├── package.json # npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
└── README.md # 项目信息文档
2.3资源命名
2.3.1目录命名
能直观的感受当前目录文件的作用
以小驼峰方式命名
特殊缩写名称可大写开头
2.3.2页面命名
能直观的感受当前文件的作用
以小驼峰方式命名
2.3.3组件命名
能直观的感受当前组件的用途
组件命名始终是多个单词的，避免跟html元素或标签冲突
以大驼峰方式命名
2.3.4图片命名
图片不可随意命名，且严禁使用0，1，等数字直接命名图片
图片命名可遵循：用途+描述，多个单词用下划线隔开，如：bh_login_icon.png, 10k以下图片建议放置assets/img下（webpack打包时直接转为base64嵌入）
可用css编写的样式严禁使用图片
2.4资源使用
2.4.1组件使用规范
使用时以大驼峰的形式或者单词+‘-’+单词的形式使用
命名遵循组件命名规范
推荐使用单标签闭合
2.4.2图片使用规范
webpack打包时会直接copy public/img下的图片，所以，当你的图片放置public/img下时，为防止图片打包重复，需要遵从以下写法：
1、public/img下的图片调用时禁止使用require
let img1 = require('../public/img/xxxx')//错误写法
let img2 ='../public/img/xxxx'//正确写法
2、public/img下的图片不可直接嵌入img的src中
3、src/assets/img下的图片必须使用require写法，否则会报错找不到图片
let img1 = require('../asset/img/xxxx')//正确写法
let img2 ='../asset/img/xxxx'//错误写法
2.5项目路由
2.5.1路由命名
普通路由(非动态多级)命名，可以直接使用页面组件的命名。
{
path: '/login',
name: 'login',
component(resolve) {
require.ensure(['../pages/login/login.vue'], () => {
resolve(require('../pages/login/login.vue'));
});
}
},
动态多级路由，遵循：用途或作用或功能。
多级路由嵌套不可超过三层
/user/personal/infomaition 用户中心 -> 个人中心 -> 个人信息
/user/company/infomaition 用户中心 -> 企业中心 -> 企业信息
2.5.2路由权限
1、登录权限
一般页面无需登录可查看，重要页面需要登录权限。
登录权限字段在路由meta标签中确定。
meta: {
requireAuth: true // 为true则是需要登录权限
}
2、管理员权限
管理员拥有的权限：
(1)显示管理入口，进入后台管理
(2)导航结构展示不一样
(3)与普通用户相同路径，会展示不一样的内容
根据不同的权限，渲染不同的组件或页面
三、编码规范
3.1HTML规范
3.1.1文件编码
1、开头声明文档类型
2、使用语言属性
中文："zh-Hans"
简体中文："zh-cmn-Hans"
繁体中文："zh-cmn-Hant"
英文："en"
3、使用不带BOM的UTF-8编码
4、在HTML中指定编码：
5、SEO优化
6、viewport是否可缩放（为移动设备优化）
7、favicon：如果未指定，大多数浏览器会请求根目录下的favicon，为避免404错误，两种解决方法：一是在更目录放置favicon.ico文件，二是使用link指定favicon文件
3.1.2外链资源URL协议
省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免Mixed Content 问题，减小文件字节数。
Mixed Content：http和https混用造成的问题。其它协议（ftp 等）的 URL 不省略。
3.1.3标签中的属性顺序
1、class ( class是最高的复用设计，应该放在最前面)
2、id name( id 应尽量少用)
3、data-\* 自定义属性(属性名称全小写用-做连接)
4、src (资源文件)
5、placeholder title alt (提示)
6、required readonly disable (辅助)
3.1.4引号规范
属性值使用双引号包裹
如：
3.2 CSS规范
3.2.1 css初始化及公用样式
pulic.scss基础公共样式文件
layout.scss公共样式文件
theme/varibale.scss 存放皮肤的变量
theme/mixin.scss 皮肤变量的使用
3.2.2 id class 命名规则
首先根据内容命名，如：nav,header
内容中的子元素使用-链接，名称一律小写，如：card-item
修饰类（易变的）使用--链接，如：card-item--warning
若无内容，结合行为进行辅助，如：box-shawder
不影响语义的情况下，可缩写，如：img-box,btn
避免广告拦截词汇：ad,gg,banner,guagngao
3.2.3其他规范
尽量少用元素选择器，元素选择器和 ID、Class 混合使用也违反关注分离原则。如果HTML标签修改了，就要再去修改 CSS 代码，不利于后期维护。
3.3JavaScript编码规范
3.3.1缩进
html,css,js缩进一致。
3.3.2模板字符串
需要拼接，尽量少用“+”，多使用模板字符串
3.3.3命名规范
变量命名：小驼峰命名
参数名：小驼峰命名
函数名：小驼峰命名
方法/属性名：小驼峰命名
类名开头大写
私有属性、变量和方法以下划线 _ 开头。
常量名：全部使用大写+下划线
由多个单词组成的缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致。
语义：
变量应当使用名词，尽量符合当时语义
boolean类型应当使用 is , has 等开头
3.3.4声明规范
声明变量使用let，常量使用const ，尽可能避免var的使用。
3.3.5注释规范
函数/方法注释
注释必须包含函数声明，有参数和返回值时必须注释标识
参数和返回类型必须包含类型信息和说明
当函数是内部函数，外部不可访问时，可使用@inner标识
四、代码提交规范
依赖包，编辑器配置文件不得提交等非代码主题内容部分的文件不得提交!
每次提交尽量写清楚说明
提交前必须更新,保证无冲突存在！
