用于生成vuepress文档页面│├─.vuepress│├─guide│├─README.md├─examples//原src目录,改成examples用于示例展示│├─App.vue│├─main.ts├─packages//新增packages目录,用于编写存放组件,如button│├─button│├─index.ts├─typings//新增typings目录,用于存放.d.ts文件,把shims-vue.d.ts移动到这里...
dts()],build:{lib:{// 入口指向组件库入口模块entry:resolve(__dirname,'src/components/index.ts'),name:'my-lib',// 构建生成的文件名,与package.json中配置一致fileName:'my-lib'},rollupOptions
⑤在 packages/ 文件夹下创建UI组件,例如:新建 breadcrumb/ 和 pagination/ 文件夹,截图如下: ⑥在 breadcrumb/ 文件夹下新建 Breadcrumb.vue 组件文件和 index.ts 文件,截图如下: ⑦在Breadcrumb.vue 中编写组件代码: import{ computed }from'vue'interfaceQuery{ [propName:string]:any// 添加一个字符串索引签...
3、组件库入口文件(packages/index.ts) 此处与组件库的全局注册有关 import{App}from'vue'importWButtonfrom'~/components/button'// 所有组件列表constcomponents = [WButton]// 定义 install 方法, App 作为参数constinstall = (app:App):void=>{// 遍历注册所有组件components.map((component) =>app.compone...
首先去到package/components目录下新建我们的icon组件目录并创建入口文件index.ts,然后创建组件的目录文件夹src,并在src中创建要编写的组件文件,例如icon.ts 接下来在icon.ts文件中导出我们icon组件需要设置的属性,可参考网上的UI库来设置一个icon组件常用的属性有哪些,以下是我自己的定义通过接口来实现导出一个iconProps...
咱们今天接着上一篇的组件库搭建开发。本篇主要做的是js、css、vue组件、ts类的声明的打包配置 采用gulp来控制打包流程,采用rollup打包、借鉴elementPlus官网 执行命令全局安装gulp脚手架 npm install --global gulp-cli 复制代码 在根目录下安装 gulp @types/gulp sucrase pnpm install gulp @types/gulp sucrase ...
因为我们开发的是vue3组件, 所以需要安装vue3,当然ts肯定是必不可少的(当然如果你想要js开发也是可以的,甚至可以省略到很多配置和写法。但是ts可以为我们组件加上类型,并且使我们的组件有代码提示功能,未来ts也将成为主流);less为了我们写样式方便,以及使用它的命名空间(这个暂时这里没用到,后面有时间再补 ...
安装Vite作为开发服务器和构建工具: 创建一个src目录,并在其中编写你的组件代码。可以使用Vue 3和Typescript来编写组件。 在项目根目录下创建一个index.ts文件,用于导出你的组件库的入口。 在package.json中添加以下字段,用于配置Vite的构建选项: 在package.json中添加以下字段,用于配置Vite的构建选项: ...
最后我们执行pnpm run publish:kitty便可发布我们的组件库。其实这里的一些方法可以提取到utils中,gulp的任务函数也可以写到其它地方,gulpfile.ts只作为一个集中执行的地方。具体 目录如下 相关代码可以到kittyui查看。 到这里我们的组件库已经可以自动打包和发布了 ...