kicc/kicc-ui/README.md

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

🔥 当前版本

1.0.0 基础功能已完善，后续功能正在加紧迭代开发中。

💡 简介

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

💥 技术特性

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

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

• node 和 git -项目开发环境
• Vite - 熟悉 vite 特性
• Vue3 - 熟悉 Vue 基础语法
• TypeScript - 熟悉TypeScript基本语法
• Es6+ - 熟悉 es6 基本语法
• Vue-Router-Next - 熟悉 vue-router 基本使用
• Ant-Design-Vue - ui 基本使用
• Mock.js - mockjs 基本语法

🍀 需要注意的地方

##1.钩子工具跟项目基础工具区别

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

两者的区别: 
  可以理解为两者都是工具,但是区别在于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-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校验不要了,自己编码的时候注意一下就行 
 // 打包发布是使用项目中的 lint:eslint 检测就可以了

 <ARangePicker v-model:value="state.dateRange"
               style="width: '100%'"
               valueFormat="YYYY-MM-DD"
               :placeholder="['开始日期', '结束日期']"
 />

编译打包前类信息 type:check

🗽 启动项目

# 进入项目目录
cd kicc-ui

# 安装依赖
yarn install

# 运行
yarn serve

# 打包
yarn build