同时删除app.vue文件中原有的components组件引用代码,template代码,css代码,删除后格式如下<template></template> 在vite-env.d.ts文件中声明vue文件的使用,添加如下代码,如以有该代码可忽略 /// <reference types="vite/client" />declare module'*.vue'{importtype{DefineComponent}from"vue";constcomponent:Defi...
3. 创建组件库入口模块 ./components/index.ts 代码语言:javascript 复制 importMyComponentfrom"./my-component'"import{App}from"vue";// 按需导入用export{MyComponent}// 全局导入用exportdefault{install:(app:App)=>{app.component('MyComponent',MyComponent)}} 4. 构建项目 5. 发布npm 登录npm 代码语言...
因为我们开发的是vue3组件, 所以需要安装vue3,当然ts肯定是必不可少的(当然如果你想要js开发也是可以的,甚至可以省略到很多配置和写法。但是ts可以为我们组件加上类型,并且使我们的组件有代码提示功能,未来ts也将成为主流);less为了我们写样式方便,以及使用它的命名空间(这个暂时这里没用到,后面有时间再补 配置tsco...
因为我们开发的是vue3组件, 所以需要安装vue3,当然ts肯定是必不可少的(当然如果你想要js开发也是可以的,甚至可以省略到很多配置和写法。但是ts可以为我们组件加上类型,并且使我们的组件有代码提示功能,未来ts也将成为主流);less为了我们写样式方便,以及使用它的命名空间(这个暂时这里没用到,后面有时间再补 配置tsco...
咱们今天接着上一篇的组件库搭建开发。本篇主要做的是js、css、vue组件、ts类的声明的打包配置 采用gulp来控制打包流程,采用rollup打包、借鉴elementPlus官网 执行命令全局安装gulp脚手架 npm install --global gulp-cli 复制代码 在根目录下安装 gulp @types/gulp sucrase pnpm install gulp @types/gulp sucrase ...
假设我们对vue3的新的语法和特性有了一定的认识,但是正式的去开发一套内部的组件库还是有一定的困难的。因为我们长期做业务开发,虽然对组件化又一定的认知。但是组件库的开发,其实不是一个人的事情,需要ui团队和技术团队共同参与进去,这对于整个团队内部的人员素质要求很高。
咱们今天接着上一篇的组件库搭建开发。本篇主要做的是js、css、vue组件、ts类的声明的打包配置 采用gulp来控制打包流程,采用rollup打包、借鉴elementPlus官网 执行命令全局安装gulp脚手架 pnpm install--globalgulp-cli复制代码 在根目录下安装gulp @types/gulp sucrase ...
组件的设计与编写 代码质量:eslint、单测等 风格化、国际化等 ... 这些任务对于日常和业务打交道的同学来说当然很有挑战性,11月25日,村长特意准备了一节公开课《vue3+ts组件库开发实战》,准备给小伙伴们实战一下vue3组件设计和开发,并系统阐述组件库开发的一些知识。 你将...
1、修改vite.config.ts import{defineConfig}from 'vite'import vue from '@vitejs/plugin-vue'import path from "path";//这个path用到了上面安装的@types/node// https://vitejs.dev/config/export default defineConfig({plugins:[vue()],resolve:{alias:{'@':path.resolve('./src')//@代替src}}}...