writeFile(`${cwd}/components/components.ts`, `${cpTpl}\nexport { default as ${compName} } from './${dashName}'`), writeFile(`${cwd}/components/style.ts`, `${stTpl}\nimport './${dashName}/style'`), ]) // 3.2 写入component.json compJson[compType].children[compName] = { ...
{"name":"nandit-vue-vant","version":"0.1.0","private":false,"description":"基于vue3+vant的前端组件库","main":"lib/index.min.js","module":"lib/index.esm.js","typings":"lib/index.d.ts","keyword":"vue3 vant","license":"MIT","author":{"name":"jiuage","email":"nandit@126...
ts配置文件增加如下两段代码 "include":["examples/**/*.ts","examples/**/*.tsx","examples/**/*.vue","packages/**/*.ts","packages/**/*.tsx","packages/**/*.vue","typings/**/*.ts","tests/**/*.ts","tests/**/*.tsx"],"paths":{"~/*":["packages/*"],"typings/*":["ty...
vite+vue3+ts开发组件库,发布npm 版本vite 3.0.7 vue 3.2.27 所需依赖 @types/node 使用resolve解析项目路径 vite-plugin-dts 1.4.1 自动生成ts声明文件 步骤 1...// 入口指向组件库入口模块 entry: resolve(__dirname, 'src/components/index.ts'), name: 'my-lib...} } }) 3...创建组件...
2.实现组件测试环境 创建test测试环境,去到根目录执行安装命令。(由于是测试环境所以不需要发布,默认package.json里的private选项为true即可) pnpm create vite test--template vue-ts 去到创建好的test项目中,安装test项目依赖 pnpm install 接下来我们先整理一下项目,删除不必要的文件,删除以下文件 ...
说了这么多,似乎有些跑题了,我们接着说为什么说用ts封装一个组件是件不容易的事请。 首先,这里的组件指的是通用组件。通用组件的开发,需要我们有很高的业务抽象能力。我们拿前端目前经常用的按钮button举例。想要开发一个通用的,功能丰富的按钮组件,我们需要考虑哪些方面呢?举例说明一下: ...
3.2 导出组件 在src/index.ts中导出组件,以便其他项目使用组件库: importButtonfrom'./components/Button.vue';export{Button}; 1. 2. 3. 4. 打包发布 运行以下命令打包组件库: npmrun build 1. 然后,使用以下命令发布组件库到 npm: npmpublish--accesspublic ...
最后在components/index.ts导出所有组件提供给外部使用 export*from"./src/index"; 接下来我们在上篇文章中搭建的 play 项目中进行一个测试,首先在 paly 项目中本地安装@easyest/components(组件库包名,后续发布可以自己修改名字) pnpmadd@easyest/components ...
有的时候我们使用组件的时候想要直直接使用 app.use()挂载整个组件库,其实使用 app.use()的时候它会调用传入参数的 install 方法,因此首先我们给每个组件添加一个 install 方法,然后再导出整个组件库,我们将 button/index.ts 改为 import _Button from "./button.vue";import type { App, Plugin } from "vue...
咱们今天接着上一篇的组件库搭建开发。本篇主要做的是js、css、vue组件、ts类的声明的打包配置 采用gulp来控制打包流程,采用rollup打包、借鉴elementPlus官网 执行命令全局安装gulp脚手架 pnpm install--globalgulp-cli复制代码 在根目录下安装gulp @types/gulp sucrase ...