开箱即用的Vue3组件库开发模板

大家好,我是dyb-dev,今天给大家带来一款非常好用的组件库开发模板,该模板目前已开源,大家可放心使用!

话不多说先看实战效果:

 也可前往站点地址或者github地址查看

 实战项目:Vant-Pro

模板简介:

该模板集成了前端众多最新的技术栈,由 VitePress + Vue3 + TS + Scss + Vite5 + VSCode + Ant-Design-Vue + PWA 组成

1. 插件方面内置了 markdownlint + eslint + prettier + stylelint + husky + prettier-eslint + vue-tsc 等插件,能够让你保证良好的代码格式规范和极高的开发效率

2. 配置方面内置了 markdownlint + eslint + vscode + prettier + stylelint 等配置,无需自己手动配置规则,另外还额外内置了众多非常实用的vscode插件推荐,并且你无需手动配置对应插件的配置

3.工具包方面内置了@vueuse/coredayjs + query-string + vconsole 等工具包,能够让你在处理组件交互、处理日期时间、处理URL上有优异的表现

该模板还支持TS类型声明自动生成、主题定制、代码预览、移动端控制台调试、本地搜索、本地https服务、PWA离线访问等功能,最最最重要的一点是配置极其简单,并且大部分配置集成在一个文件当中,方便统一管理,只需简单配置便可搭建你的技术文档站点,还等什么快快使用起来吧!

模板安装步骤:

 1. 新建一个文件然后在终端中打开该文件,执行以下命令行:

// 如果你使用的是 npm 或者 yarn,那么只需把 pnpm 替换即可
pnpm create @dyb-dev/create-project@latest

2. 如果你能够看到以下界面就代表执行成功了

3. 接下来继续输入 `.` ,然后选择 component-lib-template 模板

4. 如果下载成功将会呈现以下结果:

好的到现在为止你已经将模板拉取到你的本地了

 5. 这个时候只需执行一下命令便可运行起来了

// 初始化所有依赖包
pnpm install

// 本地运行
pnpm docs:dev

这个时候就可以看到组件库的文档站点了

组件统一放在了 src/components 目录中

请注意在书写组件的时候一定要保持严格的规范,例如以下几点:

1. 二次封装的情况下尽量保证支持原有组件的属性

2. 二次封装的情况下颜色等css变量需要继承当前UI库的css变量

3. 组件名需要保持唯一

4. style标签不要添加scoped属性

5. css类名需要保持唯一,最好是添加统一的UI库前缀

6. 导出完善的类型声明并保持统一的注释

7. 组件导出一定需要导出 withInstall 函数的返回结果,具体请参照原有的代码示例

8. 在书写组件的使用文档的时候尽量与 src/components 目录中的文件结构保持一致,具体请参考源码

本文到这里就结束啦,希望能够对你有所帮助!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值