ts配置文件增加如下两段代码 "include":["examples/**/*.ts","examples/**/*.tsx","examples/**/*.vue","packages/**/*.ts","packages/**/*.tsx","packages/**/*.vue","typings/**/*.ts","tests/**/*.ts","tests/**/*.tsx"],"paths":{"~/*":["packages/*"],"typings/*":["ty...
readFile(path.resolve(__dirname, `../components/components.ts`)), readFile(path.resolve(__dirname, `../components/style.ts`)), ]) await Promise.all([ writeFile(`${cwd}/components/components.ts`, `${cpTpl}\nexport { default as ${compName} } from './${dashName}'`), writeFile(...
说了这么多,似乎有些跑题了,我们接着说为什么说用ts封装一个组件是件不容易的事请。 首先,这里的组件指的是通用组件。通用组件的开发,需要我们有很高的业务抽象能力。我们拿前端目前经常用的按钮button举例。想要开发一个通用的,功能丰富的按钮组件,我们需要考虑哪些方面呢?举例说明一下: 类型 形状 加载状态 禁用状...
因为play 项目需要测试本地的组件库,所以也需要将 play 和我们的组件库关联在一起。修改一下pnpm-workspace.yaml文件 packages:-"packages/**"-"play" 此时play 项目便可以安装本地 packages 下的包了 最后执行pnpm run dev,便可启动我们的 play 项目 但是有一个问题就是 ts 无法识别*.vue文件,所以编译器会...
首先去到package/components目录下新建我们的icon组件目录并创建入口文件index.ts,然后创建组件的目录文件夹src,并在src中创建要编写的组件文件,例如icon.ts cd/package/components mkdir icon cd icon mkdir src touch index.ts cd src touch icon.ts 接下来在icon.ts文件中导出我们icon组件需要设置的属性,可参考网...
基于之前组件库的基础上,其实,我们所有的schema配置都与ui层面没有关系,并且发现ant和element框架api大同小异,对于基于element开发出来的schema,初步核对了一下,ant上也是可行的;如下配置,完全与ui无关,与element和ant api初步核对确实可行: constconfig=reactive({// colNum: 6,labelWidth:'100px',disabled:false,...
当市面上主流的组件库不能满足我们业务需求的时候,那么我们就有必要开发一套属于自己团队的组件库。 以下用一个简单的组件来讲述基于Vue3.0 + TS的组件从开发到发布npm仓库的全过程(参考element-plus) 环境 这里列出本文所使用的环境版本 vue 3.0 vue/cli 4.5.9 ...
运行以下命令打包组件库: npmrun build 1. 然后,使用以下命令发布组件库到 npm: npmpublish--accesspublic 1. 5. 使用组件库 在其他项目中安装并使用你的组件库: npminstallmy-component-library 1. 在main.ts中引入组件库: import{createApp}from'vue';importAppfrom'./App.vue';import{Button}from'my-comp...
咱们今天接着上一篇的组件库搭建开发。本篇主要做的是js、css、vue组件、ts类的声明的打包配置 采用gulp来控制打包流程,采用rollup打包、借鉴elementPlus官网 执行命令全局安装gulp脚手架 pnpm install--globalgulp-cli复制代码 在根目录下安装gulp @types/gulp sucrase ...
(1).创建/src/components/testBricks文件夹,并在testBricks文件夹下面创建index.ts和index.vue (2).创建/src/index.ts (3).创建/src/main.css 此时你的目录结构应该是这样的: 五、全局注册与局部注册组件 类似于ant-design和elementUI这样优秀的组件库,都提供了全局引入和局部引入: ~全局引入是利用了vue...