通用件

Appearance

On this page

前端规范 ​

前端框架与组件 ​

前端技术栈 ​

vue3 + vue-router + pinia + element-plus+ sass + vue-query + @s/mapbox-s+ @turf/turf+ axios+ echarts+ nprogress+ mockjs+ unocss + dayjs

前端模板 ​

地址

前端仓库 ​

地址

组件封装 ​

vue写的组件请使用该 模板 进行开发

ts写的组件请使用该 模板 进行开发

使用反馈 ​

地址

主动收集：项目复盘时，对项目中用到的组件，进行一次使用反馈收集

使用者反馈：开发人员主动反馈

开发工具 ​

Visual Studio Code

所有插件，请保持使用最新版本;

所有插件使用默认配置，有定制配置会同步在本文档中，并在技术群里通知

Vue ​

Volar

代码格式化 ​

Prettier

语法检查 ​

ESLint

本地服务 ​

Live Server

Markdown ​

Markdown All in One

代码注释 ​

koroFileHeader

修改插件配置如下：
"fileheader.customMade": {
  "FilePath":"only file name",
  "Author": "git config user.name", 
  "Date": "Do not edit",
  "LastEditors": "git config user.name",
  "LastEditTime": "Do not edit",
  "Description": ""
},
"fileheader.cursorMode": {
  "Date": "Do not edit",
  "Description": "",
  "param" : " ",
  "return":""
}
变量注释，请自行添加
/**
* 变量名：作用
* 变量名：作用
*/

项目结构 ​

my-project
├── public
│   ├── favicon.ico
│   ├── index.html
├── src
│   ├── api
│   │   ├── index.ts //请求配置、添加拦截器等
│   │   ├── page1.ts //页面1的请求
│   ├── assets
│   │   ├── images  //图片
│   │   ├── json    //json 
│   │   ├── data    // 数据
│   ├── config
│   │   ├── index.ts   //通用配置
│   ├── components
│   │   ├── views   //业务组件
│   │   ├── common  //通用组件
│   │   │   ├── Map  //地图组件
│   │   │   │  ├── index.ts      //逻辑控制
│   │   │   │  ├── gridLayer.ts  //色斑图层
│   ├── router
│   │   ├── index.ts  //路由入口
│   │   ├── page1.ts  //页面1的路由
│   │   ├── config.ts //配置项
│   ├── store
│   │   ├── index.ts //全局数据状态
│   │   ├── page1.ts //页面1数据状态
│   ├── utils
│   │   ├── index.ts //通用工具方法
│   ├── views
│   │   ├── layout.vue //页局页面
│   │   ├── home       //主页
│   │   │   ├── index.ts //主页的布局页
│   │   │   ├── left.ts  //主页模块
│   │   │   ├── config.ts //主页的配置
│   ├── App.vue
│   └── main.js
├── .gitignore         //git忽略配置
├── package.json       //构建配置、依赖包等
├── .npmrc             //npm源
├── .env               //通用环境变量量
├── .env.development   //开发环境环境变量量
├── .env.production    //生产环境环境变量量
├── .gitlab-ci.yml     //持续集成
├── README.md          //说明文档
└── vue.config.js      //vue配置、配置代理等
└── tsconfig.json      //ts配置

代码命名 ​

  1. 项目命名：小写字母加横线，my-project
  2. 非组件页面命名：小写字母加横线，home-map.vue
  3. 组件命名：大驼峰，NavHeader.vue
  4. 变量命名：小驼峰，navIndex
  5. 常量命名：大写字母加下划线，USER_NAME
  6. 方法命名：小驼峰，以动词开头，getData
  7. 事件命名：小驼峰，以on开头，onButton