# KOL-FRONTEND

**Repository Path**: xiao_zhang_yang/kol-frontend

## Basic Information

- **Project Name**: KOL-FRONTEND
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-18
- **Last Updated**: 2022-01-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 准备

- [node](http://nodejs.org/) 和 [git](https://git-scm.com/) -项目开发环境
- [Vite](https://vitejs.dev/) - 熟悉 Vite
- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 3.x语法
- [TypeScript](https://www.typescriptlang.org/) - 熟悉`TypeScript`基本语法
- [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法
- [Vue-Router-Next](https://next.router.vuejs.org/) - 熟悉 vue-router 基本使用
- [Ant-Design-Vue](https://2x.antdv.com/docs/vue/introduce-cn/) - 熟悉Ant-Design-Vue组件

## 技术选择说明
- [why vite ?](https://www.zhihu.com/question/477139054/answer/2156019180)

1. 降低配置复杂度和提升开发体验，打包构建、热更新是webpack 10-100倍，随着项目越来越大，优势会更明显；
2. webpack是先打包再运行，vite是利用浏览器native 的 ES module，省略打包过程，直接运行；
3. 快速冷启动、按需编译、模块热更新等优良特质：采用立即编译当前修改文件的办法。同时 vite 还会使用缓存机制( http 缓存 => vite 内置缓存 )，加载更新后的文件内容；

- [why vue3.x ？](https://zhuanlan.zhihu.com/p/371666125)

1. 重构响应式系统；
   •可直接监听数组类型的数据变化；
   •监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升；
   •可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行；
   •直接实现对象属性的新增/删除；
2. 新增Composition API，更好的逻辑复用和代码组织；
3. setup vs React Hooks；
   •整体上更符合 JavaScript 的直觉；
   •不受调用顺序的限制，可以有条件地被调用；
   •不会在后续更新时不断产生大量的内联函数而影响引擎优化或是导致 GC 压力；
   •不需要总是使用 useCallback 来缓存传给子组件的回调以防止过度更新；
   •不需要担心传了错误的依赖数组给 useEffect/useMemo/useCallback 从而导致回调中- 使用了过期的值 —— Vue 的依赖追踪是全自动的；
4. 代码编译优化以及源码体积的优化；
5. 基于以几点相比于2.x性能提升1.5-2倍；
6. TypeScript的支持；

- [why TypeScript ？](https://www.zhihu.com/question/308844713/answer/574423626)

1. 代码规范性，更好的可读性；
2. 少写很多注释，可以定义接口数据给到后端；
3. 编写时编译器更友好的提示，根据类型提示更容易排查bug；

- **why Ant-Design-Vue ？**

1. ui风格统一，全面适配vue3.0；
2. 组件库功能更丰富、细节更细腻；
3. 内置深色浅色主题，定制主题简单；
4. 组件生态以及平台支持范围广（Antd mobile（支持RN）、React、Vue等版本；按需加载插件开箱即用）；

## 特性

- **最新技术栈**：使用 Vue3/vite2 等前端前沿技术开发
- **TypeScript**: 应用程序级 JavaScript 的语言
- **主题**：内置基于Antd Vue修改两套主题（light 和 dark）
- **Mock 数据** 内置 Mock 数据方案
- **权限** 内置完善的动态路由权限生成方案
- **组件** 二次封装了一些基础组件



## 安装使用

- 安装依赖

```bash
cd kol-frontend

yarn install

```

- 运行

```bash
yarn dev
```

- 打包

```bash
yarn build
```

## Git 提交规范

- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))

  - `feat` 增加新功能
  - `update` 更新部分功能
  - `fix` 修复问题/BUG
  - `style` 代码风格相关无影响运行结果的
  - `perf` 优化/性能提升
  - `refactor` 重构
  - `revert` 撤销修改
  - `test` 测试相关
  - `docs` 文档/注释
  - `chore` 依赖更新/脚手架配置修改等
  - `workflow` 工作流改进
  - `ci` 持续集成
  - `types` 类型定义文件更改
  - `wip` 开发中

## 浏览器支持

本地开发推荐使用`Chrome 80+` 浏览器

支持现代浏览器, 不支持 IE