# 🐇`kicc-ui`(康来智慧冷链-UI) 基于Vue3的中后台系统 © 长沙康来生物有限公司版权所有

## 🔥 当前版本
`1.0.0` 基础功能已完善，后续功能正在加紧迭代开发中。

## 💡 简介

kicc-ui 是基于vben Admin的模板开发，使用了最新的`vue3`,`vite2`,`TypeScript`等主流技术，支持标本箱配送，监控，地图路线规划，
努力做成中国最好的智慧冷链平台。

## 💥 技术特性

- **最新技术栈**：使用 Vue3/vite2 等前端前沿技术开发
- **TypeScript**: 应用程序级 JavaScript 的语言
- **主题**：可配置的主题
- **国际化**：内置完善的国际化方案
- **Mock 数据** 内置 Mock 数据方案
- **权限** 内置完善的动态路由权限生成方案
- **组件** 二次封装了多个常用的组件

## 🧬 开发准备前,你必须所需要具备的技术

- [node](http://nodejs.org/) 和 [git](https://git-scm.com/) -项目开发环境
- [Vite](https://vitejs.dev/) - 熟悉 vite 特性
- [Vue3](https://v3.vuejs.org/) - 熟悉 Vue 基础语法
- [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/) - ui 基本使用
- [Mock.js](https://github.com/nuysoft/Mock) - mockjs 基本语法

## 🍀 需要注意的地方

##1.钩子工具跟项目基础工具区别
- **hooks目录: 基于Vue3-Composition-API二次封装的使用实用程序的组合api,目的为了扩展@vueuse/core组合api**
- **utils目录: 二次封装,或原生写的工具类,不会去使用一些框架的钩子**

```bash
两者的区别: 
  可以理解为两者都是工具,但是区别在于utils目录没有使用Vue3-Composition-API封装,
  hooks目录使用了Vue3-Composition-API,hooks目录说的在明白一点就是在扩展自己的Vue3-Composition-API
```
**Vue3-Composition-API官方介绍: https://staging-cn.vuejs.org/guide/extras/composition-api-faq.html**

#2.打包前应该如何执行typescript类型检查
- **vite是不支持typescript类型检查,因为没必要,现在的开发工具都是支持eslint的,让开发工具接管类型检查就行啦**
- **vite官网TypeScript介绍:https://vitejs.bootcss.com/guide/features.html#typescript**
- **注意:既然vite不支持typescript类型检查,那我们就应该要在发布编译阶段手动检查类型,要不然完全体现不出typescript在项目中的作用,使用了typescript就应该要检查代码是否符合类型规范**
```vue
 // 目前项目中有两者打包前检查方案
 // vue-tsc: 针对vue文件的ts类型检测,不推荐使用,当前项目vue模板中很多组件库对类型的定义似乎不是那么完整
 // 列如如下这段代码的 placeholder 属性这样的使用方法是正确的 ant-design-vue 官网例子上也是支持这种写法的,代码运行起来也是没有任何问题的
 // 但是由于内部类型定义为 string 没有定义为 string | string[] 从而在检查时候报
 // error TS2322: Type 'string[]' is not assignable to type 'string'.
 // 项目中还有类似的还有很多组件库也出现这种问题比如 class 属性等等,包括自己定义的组件也出现了很多类型检测问题,类型规范定义太严格了,往往会影响开发效率
 // 所以干脆直接 vue <template></template> 这部分的组件ts校验不要了,只检测 typescript 代码,自己编码的时候注意一下组件的类型就行 
 // 打包发布是使用项目中的 lint:eslint 检测 typescript 代码就可以了,不使用 vue-tsc 检测组件部分的类型

 // vue3 局部引入
 const ARangePicker = DatePicker.RangePicker;
 <ARangePicker v-model:value="state.dateRange"
               style="width: '100%'"
               valueFormat="YYYY-MM-DD"
               :placeholder="['开始日期', '结束日期']"
 />
```

## 🗽 启动项目

```bash

# 进入项目目录
cd kicc-ui

# 安装依赖
yarn install

# 运行
yarn serve

# 打包
yarn build

```