# vue-typescript-base

**Repository Path**: bruce1224/vue-typescript-base

## Basic Information

- **Project Name**: vue-typescript-base
- **Description**: 使用 vue3 + typescript 搭建的后台管理系统基础架构
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 3
- **Created**: 2021-04-10
- **Last Updated**: 2024-07-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-typescript-base
> crm 后台管理系统
使用 vue 3 + element-plus + typescript 搭建
## 推荐开发工具
* VS code 开发工具
  * 插件推荐：Vetur、ESLint、Auto Import、vscode-icons、Beautify、TSLint Vue
* Chrome 开发调试工具
* yarn 包管理
## 安装依赖
```bash
yarn install
```
## 启动本地开发环境（自带热启动）
```bash
yarn serve
```
## 构建生产环境 (自带压缩)
```bash
yarn build
```
## 代码格式检查以及自动修复
```bash
yarn lint
```
## SVG 图片生成
> 规则:文件民驼峰命名法去拼接，只处理 `-`或`_` ，其他标识符不做处理，.开头的文件忽略
- 拷贝`.svg`文件到项目`src/icons/svg`文件目录（注意文件命名）
- 执行命令`yarn build:svg`，组件生成，在`CRM组件库/svgicon图标`就可以查看到
## router 规则
> `src/router`项目运行的路由文件，动态注册

### 路由与页面对应关系
> 每个业务线对应一个路由文件，每个路由文件对应一个页面文件，方便开发管理
- 每个业务线在`router/modules`下建立自己的`router`文件名，对应的`views`文件下同名，所有页面模块都在这个文件夹下
  - 列：`router/modules/pandora.ts`对应的`views/pandora/**.vue`，页面每个入口文件应为`index.vue`
- 每个`router`对象要继承`RoterMap`对象，会有代码提示和约束
- 每个`modules/*.ts`文件，最终在`router/routes.ts`文件`导入合并`,最终全部导出，便于后续动态路由的处理

### meta 参数处理
> meta 目前支持的参数：title、hidden、icon、breadcrumb
- title: string
  - 页面导航菜单显示的内容（优先使用服务器接口返回的 title）
- hidden: boolean
  - 是否在导航菜单栏中显示
  - 如果该路由后端没有注册，hidden 时不显示菜单栏，否则会显示`sidebar`
  - 注：如果后端配置了该路由，访问改页面会显示左边菜单栏，反之不显示
- icon: string
  - 导航栏显示的 svg icon 图标 
- breadcrumb
  - 是否显示面包屑
## 目录结构

```bash
├── public                     # 静态资源 (会被直接复制)
│   │── favicon.ico            # favicon图标
│   │── manifest.json          # PWA 配置文件
│   └── index.html             # html模板
├── build                      # 脚本构建
├── src                        # 源代码
│   ├── api                    # 公共请求
│   ├── components             # 公共组件
|   ├── component_demo         # 案例库
│   ├── enums                  # 全局枚举常量
│   ├── hooks                  # 全局组件钩子工具函数
│   ├── directives             # 全局指令
│   ├── icons                  # svg 图标
│   ├── layout                 # 全局布局
│   ├── router                 # 路由
│   ├── store                  # 全局 vuex store
│   ├── styles                 # 全局样式
│   ├── typings                # 全局ts声明文件
│   ├── utils                  # 全局方法
│   ├── views                  # 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   ├── permission.ts          # 路由权限管理
├── tests                      # 测试
├── .editorconfig              # 编辑相关配置
├── .yarnrc                    # yarn配置
├── .eslintrc.js               # eslint 配置
├── babel.config.js            # babel-loader 配置
├── package.json               # package.json 依赖
├── tsconfig.json              # typescript 配置
└── vue.config.js              # vue-cli 配置
```
## 开发前阅读
> 如果你第一次接触`vue3`请一定要阅读以下文档
- [vue 3 迁移指南](https://v3.cn.vuejs.org/guide/migration/introduction.html#%E6%A6%82%E8%A7%88)
## 开发参考文档
### 插件
- [element plus](https://element-plus.gitee.io/#/zh-CN/component/installation)
- [vuedraggable vue3 拖拽排序组件](https://github.com/SortableJS/vue.draggable.next)
- [svgicon](https://mmf-fe.github.io/svgicon/en/guide/#introduction)
- [vueuse](https://vueuse.org)
- [quill 富文本](https://quilljs.com/)
- [webpack](https://webpack.docschina.org/)
### Vue3 学习文档
- [vue3 中文文档](https://www.vue3js.cn/docs/zh/api/global-api.html)
- [vue3 英文文档](https://v3.vuejs.org/guide/introduction.html)
- [vue-router 中文文档](https://next.router.vuejs.org/zh/guide/)
- [vue CLI 中文文档](https://cli.vuejs.org/zh/guide/)
- [vuex 英文文档](https://next.vuex.vuejs.org/installation.html#direct-download-cdn)
- [vue3 风格指南](https://v3.cn.vuejs.org/style-guide/#%E8%A7%84%E5%88%99%E7%B1%BB%E5%88%AB)
- [vue news 英文](https://news.vuejs.org/)

### Typescript 参考资料
- [官方文档](https://www.tslang.cn/docs/home.html)
- [typescript 入门](https://ts.xcatliu.com/)
- [深入了解 typescript](https://jkchao.github.io/typescript-book-chinese/)

### 图表
- [echarts](https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts)
- [apexcharts](https://apexcharts.com/javascript-chart-demos/)
### javascript
- [es6 学习参考资料](https://es6.ruanyifeng.com/)

### css 命名
- [EBM 推荐使用](https://www.w3cplus.com/css/css-architecture-1.html)