开发自己的vue3组件库模板

_松哥
603 阅读6分钟

简介

大家好,我是chenms, 最近在珠峰课程里学习如何通过pnpm创建自己的vue3组件库,课程里只讲到了如何通过pnpm开发自己的vue3组件库,并未讲到如何打包及发布等步骤,后续我将该步骤完善好了,并将源码开源出去了,如果有需要开发自己的vue3组件库的同学可以直接去拉取我的代码模板,改下自己的组件库名称就可以按照里面的风格在里面开发自己想要的组件了

模板地址

gitee.com/chenmiaoson…

使用

结构

代码拉取下来是这样的一个结构

image.png

  • docs文件夹主要用来描写各个组件开发的使用文档

  • packages文件夹是用来开发自己组件库的主要目录

    • components文件夹是用来存放各个组件的
    • theme-chalk文件夹是用来存放各个组件相关的样式
    • utils文件夹是用来存放各个组件相关的公共方法

  • play文件夹里是通过vue3脚手架生成的项目,主要是用来测试开发好的组件效果

取名

该模板里面我是取了一个叫做@chenms-demo,这个是后续开发完之后发布的npm上的名称,可以改为自己想要的名称,其中要以@开头,点击vscode全局搜索小图标,比如我把@chenms-demo替换成@chenms-ui-demo,然后点击替换

image.png

安装依赖

全部替换完之后在终端输入 pnpm i进行安装所有的包

如果安装依赖不成功有可能是版本太低,可以试试跟我同个版本的node跟pnpm,或者更高

image.png

pnpm i

image.png

运行查看组件展示

安装完之后运行, 这时候就可以查看各个组件的展示情况

 npm run dev

image.png

image.png

上面浏览器的预览效果主要展示的是play里vue3项目的效果,该展示页面在App.vue里的内容

image.png

展示的这几个组件是在packages的components目录开发的几个展示组件,到时候可以把这些组件都删掉,开发自己想要的组件

另外再play目录里展示packages的components目录的组件,需要在main.ts里全局注册组件

image.png

当然不注册全局的也可以,在当前页面直接引入也是可以的

开发新组件步骤

  1. 可以参照components目录里的button组件的规范进行新组件的开发,比如我要新开发一个rate评分组件,那这是就可以在components目录下新建rate文件夹,并一一创建对应的文件及编写逻辑

image.png

然后要在rate同级别的index.ts里进行安装及导出

image.png

  1. 在theme-chalk目录的src里新建rate.scss进行样式的编写

image.png

完了之后还要在rate.scss同等级的index.scss里进行引入

image.png

  1. 在play目录那边进行组件展示
  • 在main.ts里进行全局注册

image.png

  • 在App.vue进行组件的调用

image.png

  • 预览

image.png

  1. 在docs目录的component进行使用文档的编写

  • 新建rate.md image.png

  • 在theme目录里的index.js里进行组件的导入(这一步主要是要做文档里查看组件对应的效果)

image.png

  • 新开终端,在里面运行
npm run doc:dev

查看文档效果

image.png

image.png

  • 在docs目录里的index.md里新增rate的跳转路由

image.png

image.png

点击rate评分跳转会展示相应的组件详细文档

image.png

image.png

左侧也有路由,是在config.js里设置

image.png

image.png

这样就可以方便的查看所有相关组件的文档了

头部的指南页面里左侧的的安装跟快速开始分别是 image.png

  • 安装对应的是guide里的installation.md
  • 快速开始对应的是guide里的quiestart.md

image.png

注意点

  1. 如果组件名称需要修改可以到各个组件的这两个文件进行修改自己想要的名称

image.png

image.png

  1. 我这边组件里的标签class都是以cms为前缀的,如果想修改前缀可以到以下两位文件修改

image.png

image.png

打包组件库

  1. 要把组件库发布的npm上,首先要在根目录下先运行
npm run build

这个命令会把packages目录下的components、theme-chalk、utils进行打包

image.png

image.png

  1. 由于components都有用到theme-chalk跟utils这两个包,所以上传components之前如果theme-chalk跟utils这两个包有修改要先传上去
  2. 如果我们是第一次上传的话由于没有@chenms-ui-demo这个名称(这个是我们在最上面拉取代码全局替换的名称),所以我们要先到自己的npm里去创建这个名称

www.npmjs.com/

  1. 登录完自己的账号和密码之后点击 Add Organization

image.png

  1. 填好名称(名称要跟你项目里的一样)之后点击create image.png

  2. 出现这个就是创建成功了

image.png

  1. 直接返回到这个页面

image.png

  1. 点击packages

image.png

  1. 这时就会发现有我们刚刚创建的名称了

image.png

  1. 点击进去这时候会发现是空的

image.png

  1. 我们回到项目里,打开theme-chalk里的package.json,里面有个version,每次发包都要修改版本号,反正每次都要不一样,不然就发不上去,第一次发可以不用修改

image.png

  1. 到终端对应的theme-chalk里运行
npm publish

如果没有登录过,要先运行

npm login

进行登录 image.png

  1. 发布成功了会展示这样

image.png

  1. 这时我们再到npm上刷新页面就可以看到我们刚刚发的包了

image.png

  1. utils包发布上去一样的操作

image.png

image.png

  1. 这时候发components就比较关键了,由于有用到theme-chalk跟utils,所以我们要先打开package.json文件,把@chenms-ui-demo/theme-chalk跟@chenms-ui-demo/utils改成我们刚才发上去的版本

image.png

改为之后如下

image.png

如果不知道那两个包的版本可以看这个

image.png

改好之后如果是第一次就可以直接发布了,如果不是就也要改完版本号再发布

image.png

image.png

点@chenms-ui-demo/components进去就可以看到相应的安装文档了

image.png

components包发布完之后要记得把package.json的"@chenms-ui-demo/theme-chalk跟@chenms-ui-demo/utils改为原来的

image.png

这样子再继续开发的时候有修改theme-chalk跟utils就可以不用先发包就可以直接有效果了

vue3新项目使用

  1. 自己新建个vue3项目
  2. 安装
npm i @chenms-ui-demo/components

image.png

  1. 在main.ts里进行全局引入

image.png

  1. 在组件里使用

image.png

  1. 查下效果

image.png

组件都能展现出来,组件库开发成功

打包线上查看效果

  • 我有将vue3引入chenms-ui-demo组件库打包出来放到netlify查看,打包出来的也是没有问题的

vu3项目打包完之后的连接

组件文档在线看

  1. 打开终端进入到docs目录,运行
npm run build

这时候就会在.vitepress里多一个dist的文件夹,这个是打包生成的,可以把这个放到线上就可以观看你所写的各个组件的相关文档内容了

image.png

我也一并放到netlify查看

各个组件文档连接

以上是所有开发自己的vue3组件库模板的内容

avatar
文章
阅读
粉丝