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(...
4.开始编写组件库中的组件 经过上面几步构建,我们现在可以来开始编写我们的组件,这里以一个icon组件为例进行编写 首先去到package/components目录下新建我们的icon组件目录并创建入口文件index.ts,然后创建组件的目录文件夹src,并在src中创建要编写的组件文件,例如icon.ts cd/package/components mkdir icon cd icon mkd...
{"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...
因为我们是使用 Vite+Ts 开发的是 Vue3 组件库,所以我们需要安装 typescript、vue3,同时项目将采用 Less 进行组件库样式的管理 pnpmaddvue@nexttypescript less-D-w 使用pnpm如果要安装在项目根目录下,则需要加-w 初始化 ts 在根目录执行npx tsc --init,然后就会自动生成 ts 的配置文件tsconfig.json,然后我们...
说了这么多,似乎有些跑题了,我们接着说为什么说用ts封装一个组件是件不容易的事请。 首先,这里的组件指的是通用组件。通用组件的开发,需要我们有很高的业务抽象能力。我们拿前端目前经常用的按钮button举例。想要开发一个通用的,功能丰富的按钮组件,我们需要考虑哪些方面呢?举例说明一下: ...
基于之前组件库的基础上,其实,我们所有的schema配置都与ui层面没有关系,并且发现ant和element框架api大同小异,对于基于element开发出来的schema,初步核对了一下,ant上也是可行的;如下配置,完全与ui无关,与element和ant api初步核对确实可行: constconfig=reactive({// colNum: 6,labelWidth:'100px',disabled:false,...
其实vuex对于TS的支持相对来说差一点,所以很多人使用第三方库Pinia,第三方库会好一点点。 4 - Element-Plus集成 相信很多同学在Vue2中都使用过Element-UI,Element-Plus是一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。它的使用方式和很多其他的组件库是一样的,所以学会Element-Plus,其他类...
运行以下命令打包组件库: 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...
(1).创建/src/components/testBricks文件夹,并在testBricks文件夹下面创建index.ts和index.vue (2).创建/src/index.ts (3).创建/src/main.css 此时你的目录结构应该是这样的: 五、全局注册与局部注册组件 类似于ant-design和elementUI这样优秀的组件库,都提供了全局引入和局部引入: ~全局引入是利用了vue...