# 长沪信息[云控系统后台页面]

> 项目基于 vue3x AntDesignVue4x VueRouter4x pinia的后台管理前端框架

[TOC]

## 1. 项目安装

```bash
# 依赖下载
yarn or npm i
# 开发环境运行
yarn dev
# 生产构建
yarn build
# 预览
yarn preview
```

## 2. 代码结构规范

```bash
|--analyze.html				打包依赖分析
|--components.d.ts			antdesign组件自动导入
|--package.json				项目依赖管理
|--tsconfig.json			ts配置
|--vite.config.ts			vite配置
|--src						根目录
	|--assets		静态资源文件 不参与打包
	|--axios		axios封装
	|--components	全局公用组件封装
		|--codemirror	代码编辑器
		|--form			antDesign表单二次封装
		|--table		antDesign表格二次封装
    |--configs		全局的一些配置文件
    |--directives	自定义指令
    |--hooks		hooks
    |--router		router
    	|--modules--dynamicRouters.ts	动态路由
    	|--modules--staticRouters.ts	静态路由
    |--stores		pinia
    |--utils		utils
    |--views		页面存放位置
    |--global.d.ts	全局的类型声明
|--.env.development			开发环境参数配置
|--.env.production			生产构建参数配置
```

## 3. 注意

- 项目中所有公共组件使用首字母大写命名

  > 例如 FormPro TablePro

- 项目中的页面使用驼峰命名

  > 例如 userManage roleManage

- 在使用动态路由的时候，需要严格遵守指定规则，否则不会生效

  ```tex
  项目默认扫描views下的所有.vue的文件
  例如：需要配置一个开发管理(dev)=》用户管理(userManage)
  ​	开发管理为目录
  ​	用户管理为菜单
  则path为/dev/userManage 不需要加上views这一层 也不需要以.vue结尾
  ```

- 项目严重不推荐在开发过程中产生的红色错误或者黄色警告 如有 请自行解决

- 代码规范整洁