首先去到package/components目录下新建我们的icon组件目录并创建入口文件index.ts,然后创建组件的目录文件夹src,并在src中创建要编写的组件文件,例如icon.ts 接下来在icon.ts文件中导出我们icon组件需要设置的属性,可参考网上的UI库来设置一个icon组件常用的属性有哪些,以下是我自己的定义通过接口来实现导出一个iconProps...
在Vite 的开发文档里有记载到,它支持在资源的末尾加上一个后缀来控制所引入资源的类型。比如可以通过 import xx from 'xx?raw' 以字符串形式引入 xx 文件。基于这个能力,我们可以编写一个 <Preview /> 组件来获取所需要展示的文件源码。一、新建一个 Preview.vue 文件...
打包们这里选择vite,它有一个库模式专门为我们来打包这种库组件的。 前面已经安装过vite了,所以这里直接在components下直接新建vite.config.ts(配置参数文件中已经注释): import{ defineConfig }from"vite";importvuefrom"@vitejs/plugin-vue"exportdefaultdefineConfig( {build: {target:'modules',//打包文件目录out...
1. 首先在src需要创建一个packages目录,用来存放组件 2. 在packages目录下创建组件HbPages ... export default { name: 'HbPages' } 2. 在packages目录下创建组件HbPages ... export default { name: 'HbPages' } 3. 在src\packages文件夹下新建index.js用于导出组件 // 引入封装好的组件 imp...
假设我们对vue3的新的语法和特性有了一定的认识,但是正式的去开发一套内部的组件库还是有一定的困难的。因为我们长期做业务开发,虽然对组件化又一定的认知。但是组件库的开发,其实不是一个人的事情,需要ui团队和技术团队共同参与进去,这对于整个团队内部的人员素质要求很高。
本教程手把手教你用Vite构建组件库发布到npm 使用vue-cli 创建vue3+vite 项目 ## 安装或升级脚手架 yarn install -g @vue/cli ## 确保 vue-cli 版本在 4.5.0 以上 vue -V ## 创建项目 vue create Hellow-World 这里以我的项目 vue3-xmw-table 为例 广告 科沃斯(Ecovacs)地宝DN58扫地机器人漫威定制...
本文将使用Vue3和TypeScript来编写一个组件库,使用Vite+Vue3来对这个组件库中的组件进行调试,最后使用vite来对组件库进行打包并且发布到npm上。最终的产物是一个名为kitty-ui的组件库。 话不多说~ 接下来让我们开始搭建属于我们自己的UI组件库吧 menorepo环境 ...
因为组件库一般都是jsx语法编写,所以要加上@vitejs/plugin-vue-jsx,打包成lib,编辑vite.config.ts: // filename: vite.config.tsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importvueJsxfrom'@vitejs/plugin-vue-jsx'// https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[...
本文将使用Vue3和TypeScript来编写一个组件库,使用Vite+Vue3来对这个组件库中的组件进行调试,最后使用vite来对组件库进行打包并且发布到npm上。最终的产物是一个名为kitty-ui的组件库。 随着前端技术的发展,业界涌现出了许多的UI组件库。例如我们熟知的ElementUI,Vant,AntDesign等等。但是作为一个前端开发者,你知道...