【Vue3 造轮子项目 ------ kaite-ui】基于vue3.0 + vite + TypeScript 实现一个UI框架 - kaiteUI
基于vue3.0 + vite + TypeScript 实现一个UI框架 - kaiteUI
前言
前段时间笔者一直忙于学习Vue3
方面新知识,比如如何从vue2.0
版本过渡到vue3.0
,如何理解vue3.0
的新接口Composition API等等,笔者相信随着vue3.0
正式版的发布,企业的需求量增大,掌握vue3.0
将会是一个必要的升职加薪的技能。
本片文章并非是vue3.0
学习知识点,而是通过基于vue3.0 + vite + TypeScript
技术框架来实现一个UI框架。由于vue3.0
刚发布不久,基于vue3.0
的UI框架并不是太多,所以笔者决定尝试自己来做一个造轮子项目,同时运用并巩固最近学习的新特性。
接下来笔者将对基于vue3.0 + vite + TypeScript
实现一个UI框架 - kaiteUI做详细的项目分析和原理解读,来带大家深入了解kaiteUI的原理和技术实现。kaiteUI官网预览如下:
技术栈
VUE3.0
前端主流框架(react,vue,angular)之一,更适合开发灵活度高且复杂的应用vue-router
Vue.js 官方的路由管理器vite
是一个由原生 ESM 驱动的 Web 开发构建工具scss
世界上最成熟、最稳定、最强大的专业级CSS扩展语言github-markdown-css
一个轻量级CSS库代替GitHub Markdown文件样式marked
一个 JavaScript 编写的全功能 Markdown 解析和编译器prismjs
一款轻量级、可扩展的语法高亮显示工具koa
基于nodejs的上一代开发框架,轻松实现基于nodejs的后端开发rollup
一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码
需求分析
在思考需求分析之前我们先来看看kaiteUI官网的使用演示:
由上面的图我们可以分析出,kaiteUI官网主要又以下几个部分组成:
- 头部导航(topNav)
主要展示官网LOGO与文档导航 - 组件列表(Aside)
组件列表侧边栏,展示各组件导航路由,通过点击导航路由展示各个组件的使用方法展示在main模块中。 - 主体模块(main)
对各个组件属性进行展示,并给出使用示例,主要方便使用者了解各个组件的使用方法。
基础准备
笔者的kaiteUI官网采用vite
来作为脚手架工具
vite
是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发,在生产环境下基于 Rollup 打包。1.快速的冷启动:不需要等待打包操作;即时的热模块更新:2.替换性能和模块数量的解耦让更新飞起;3.真正的按需编译:不再等待整个应用编译完成,这是一个巨大的改变。
这样我们不会关注繁琐的工程配置细节, 可以直接在项目中使用 TypeScript
和 scss
这些方案, 并且集成了目前比较流行的css
module
, 可以方便我们在项目里对css
进行模块化开发. vite
创建项目的具体使用流程如下:
// 安装脚手架工具
yarn global add create-vite-app@1.18.0
// 创建并进入工程目录
mkdir kaite-ui && cd kaite-ui
// 创建项目目录
cva kaite-ui
简单的三步走策略就能轻松搭建我们的项目工程。
在项目搭建完成之后我们调整一下目录结构, 具体如下:
src
目录下的App是我们的主页面, components
存放我们的公共组件, libs
存放我们的UI组件库,views
主要负责topNav
、aside
和main
页面逻辑, 其他部分大家可以更具需求自由定义.此处仅供学习参考.
在项目创建完之后我们还需要安装可视化方面必备的第三方组件, 笔者调研社区精选组件之后采用了一下方案:scss
进行组件样式设计;github-markdown-css
修饰GitHub Markdown
文件样式;marked
解析和编译JavaScript
编写的全功能 Markdown
;prismjs
高亮显示语法
以上组件在运行项目前大家可以自行安装.
正文
在做好项目开发准备之后,我们就来开始设计我们的UI框架官网 - kaiteUI.
kaiteUI框架官网实现
kaiteUI框架官网主要需要3个部分,在文章开头也分析过, 这里用图来巩固一下:
以上是最基本也是最核心的功能展示模型,接下来我们会一一将其拆解并逐个实现.
实现原理
我们都知道, 目前比较流行的UI框架有如下几种: ant design
、element ui
等。为了开发一个低门槛, 对任何人适用的UI框架, 笔者借鉴了目前市面上已有的UI框架. 实现原理:通过DOM+CSS
进行样式设计,并通过vue3.0
新特性进行属性传递,再基于json
, 我们通过可视化的手段将自己配置的demo页面
转化为json数据,最后在基于json渲染器
来动态展示在组件展示区(main
)中.
数据结构设计
为了提供组件的自定义能力,我们需要定义一套高可用的数据结构,这样才能实现因组件需求更变而带来的维护性的优势。
不同的组件都对应不同的组件属性.我们需要设计一套统一的标准的配置来约定它, 这样对于组件库的设计也非常有利, 具体拆解如下:
经过上述分析后,笔者决定采用如下数据结构(此处仅以Button
组件举例):
通过这种标准化结构设计之后,我们可以很方便的实现我们所需要的组件的功能, 并且后期扩展非常方便, 只需要往组件添加属性即可. 至于组件样式和功能的实现,方案有很多,大家可以根据自己的规范去定义。
组件库设计
组件库设计考虑的一个重要的问题就是属性和样式渲染问题, 一旦组件库变的越来越多, 那意味着页面加载会非常慢,所以我们需要实现按需加载组件和代码的能力, rollup
提供了这样的功能,我们可以基于它提供的api
去实现自己的额按需组件。
export { default as Switch } from "./Switch.vue";
export { default as Button } from "./Button.vue";
export { default as Tabs } from "./Tabs/Tabs.vue";
export { default as Tab } from "./Tabs/Tab.vue";
export { default as Dialog } from "./Dialog/Dialog.vue";
export { openDialog as openDialog } from "./Dialog/openDialog";
通过以上的方式来定义包裹我们的每一个组件, 这样就能实现按需加载了.
笔者这里简单举一个组件实现的例子,方便大家理解:
<template><div><Button round @click="showDialog">button</Button><hr /><Switch v-model:value="bool" /><hr /><Tabs v-model:selected="TabFlag"><Tab title="导航一">内容一</Tab><Tab title="导航二">内容二</Tab><Tab title="导航三">内容三</Tab></Tabs></div>
</template><script lang="ts">
import { ref } from "vue";
import { Switch, Button, Tabs, Tab, Dialog, openDialog } from "kaite-ui";
import "kaite-ui/dist/lib/kaite.css";export default {name: "App",components: {Button,Switch,Tabs,Tab,Dialog,},setup() {const bool = ref(false);const TabFlag = ref("导航一");const showDialog = () => {openDialog({title: "我的标题",bottomBtn: true,content: "这是内容",ok() {console.log("ok");},cancel() {console.log("cancel");},});};return {bool,TabFlag,showDialog,};},
};
</script><style></style>
实现组件以及代码预览
预览功能这块比较简单, 我们只需要将用户生成的json
数据丢进代码渲染器
中即可, 这里我们需要做一个渲染模块单独用来预览组件. 先来看看几个预览效果:
关于渲染器的原理,我后面将单独拿一章出来讲解,感兴趣的可以关注交流一下
上传NPM包库
使用rollup
对组件库进行打包,并上传到npm
以便用户下载使用。
rollup打包
主要是将.scss
文件以及.ts
文件转换为浏览器能够识别的css
和js
文件。具体代码如下:
import esbuild from 'rollup-plugin-esbuild'
import vue from 'rollup-plugin-vue'
import scss from 'rollup-plugin-scss'
import dartSass from 'sass';
import {terser
} from "rollup-plugin-terser"export default {input: 'src/lib/index.ts',output: {globals: {vue: 'Vue'},name: 'Kaite',file: 'dist/lib/kaite.js',format: 'umd',plugins: [terser()]},plugins: [scss({include: /\.scss$/,sass: dartSass}),esbuild({include: /\.[jt]s$/,minify: process.env.NODE_ENV === 'production',target: 'es2015'}),vue({include: /\.vue$/,})],
}
npm publish
在package.json
中指定npm
包信息:
{"name": "kaite-ui","version": "1.0.4","files": ["dist/lib/*"],"main": "dist/lib/kaite.js",……省略信息}
上传npm
库供大家下载使用:
cd ./dist
npm login
npm publish
成果展示
kaite-ui官网页面:kaite-ui官网页面
github开源地址:github开源地址
后期规划
后期kaite-ui项目规划如下:
- 添加图标库、排版库、颜色库模块 ,
- 丰富组件库组件,
- 添加可视化组件
- 组件细分和代码优化
- 添加typescript支持和单元测试。
【Vue3 造轮子项目 ------ kaite-ui】基于vue3.0 + vite + TypeScript 实现一个UI框架 - kaiteUI相关推荐
- 【Vue3 造轮子项目 】kaiteUI中利用Custom Block(自定义块)和vite实现代码渲染器
关于kaiteUI中通过json数据实现代码渲染器 前言 上礼拜笔者分享了搭建UI框架的技术栈,其中一个较为关键的技术--代码渲染器,由于篇幅问题放到了今天这篇博客中给大家做一个详细的分析解读. 在这 ...
- Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(登录注册页面,验证码)
基于 Vue3.x + Vant UI 的多功能记账本(四) 文章目录 基于 Vue3.x + Vant UI 的多功能记账本(四) 项目演示 1.登录注册页面 2.图片验证码 3.修改 axios ...
- Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本(项目演示、涉及知识点、源码分享)
基于 Vue3.x + Vant UI 的多功能记账本(一) 文章目录 基于 Vue3.x + Vant UI 的多功能记账本(一) Vue3.x 实现多功能记账本 1.前言 2.项目演示 3.涉及知 ...
- Muse UI — 基于 Vue2.0 的 Material Design UI 库
Vue 2.0 发布以来,很多 vue 的开源项目都开始了升级计划,我也思考着 vue-carbon 的升级之路,9月开工,11月完工, Muse UI 闪亮登场. 先睹为快 Muse UI 主要用于 ...
- 【项目实战】- 基于SpringBoot+WebScoket+Vue+ElementUI实现一个网页版地球聊天软件
项目介绍 项目已开源gitee: https://gitee.com/gdones/gd-webchart 技术选型 后端:SpringBoot(WEB)+ JWT + MyBatis-plus +M ...
- 基于VC6.0的控制台作图--一个极坐标曲线图(26行代码)
文章目录 先看MATLAB如何做 如果不用MATLAB呢? 单纯依靠C函数完成作图 再来几个例子 改画笔画刷(颜色.粗细.透明) 稍作变化 还能有比这更简单的C代码吗? 还可让图形动起来 附录: GD ...
- 来一起造轮子:手写 Vue3 reactivity 模块
最近和一个猎头聊天,说到现在前端供需脱节的境况.一方面用人方招不到想要的中高级前端,另一方面市场上有大量初级前端薪资要不上价. 特别是用 Vue 框架的,因为好上手,所以很多人将 Vue 作为入门框架 ...
- 项目实战:《智慧线上购物商城》:基于vue3+vite+vant4组件(一)
本项目主要是基于vue3和vite以及vant4组件所开发的移动端购物商城.项目没有接口,所运用的存储数据为json数据通过axios请求,以及Localstorage等技术实现数据. 开发的模型参考 ...
- 来一起造轮子:手写 Vue3 reactivity 模块
最近和一个猎头聊天,说到现在前端供需脱节的境况.一方面用人方招不到想要的中高级前端,另一方面市场上有大量初级前端薪资要不上价. 特别是用 Vue 框架的,因为好上手,所以很多人将 Vue 作为入门框架 ...
最新文章
- sqlserver 2014使用时有Cannot find one or more components
- 用R来分析洛杉矶犯罪
- 一篇搞定RSA加密与SHA签名|与Java完全同步
- python 习题集锦
- CTFshow 命令执行 web122
- php7 出现Class 'DOMDocument' not found的解决方法
- 权限设计中的数据灵活存储设计策略参考[以不变应万变]
- Misc-wireshark-1(秒懂!!)
- [AHOI2009]中国象棋
- Failed to get response from /vue-cli-version-marker
- linux 下 LibreOffice Writer 使用说明
- day38-数据库应用软件
- BZOJ2259[Oibh] 新型计算机
- 三级数据库常考知识点强调
- 如何根据一张照片判断出女孩住在几层楼?
- matlab和vc联合编程
- Windows下U盘无法格式化原因及解决办法:Windows无法完成格式化
- windows下微信多开
- Cookie起源与发展
- vue项目没有package.json文件