有什么 vue3+typescript 开发的组件，发布为 npm 包的详尽指南可供学习？

[Shook]

想要练练手写下 composition api，搜罗了很多资料。 标签页都开了五十多个，最后还是被 vue-cli + vue3 + typescript 组合拳击倒了。 整理了一些问题，今晚还要继续看，希望有经验的前辈能够回答一下：

UI 库与子组件如何组合发布？

比方说我想要开发一个 UI 库，但是它在最开始只有零星的组件可供使用。 这时候，我能否将 UI 库和组件分别作为 NPM 包发布？ 虽然我希望结果是这样的，但是想不到怎么做：

npm install @vueui // UI 库，暴露往根部 vue 实例挂载 UI 库所有组件的 install 方法
npm install @vueui/confirm // vue 组件，暴露挂载单独组件的 install 方法

这样的话，package.json 和 tsconfig.json 这些配置文件该怎么办呢，也要嵌套吗？ 还是说只能写完了将文件复制到一个专门发布 vue 组件的模板中，然后单独发布？

vue3 + typescript 写的组件，发布前需要做什么处理？

在搜罗到的文章里，基本提到了组件要分成 src 和 dist 两个文件夹，dist 文件夹用于存放打包成.js 的组件。 不过他们有的使用 rollup 来打包，有的直接使用 vue-cli-service build，这两种方式有什么区别吗？

关于 typescript 的问题就是不懂 d.ts 是一定要写的吗，需要把自己在.vue 里面写的类型声明提取出来吗？ 如果提出来，我该把这个文件引入 /声明到什么地方，才能让我在.vue 里写代码的时候能够识别 interface 呢？

vue3 里如何组织代码？

在使用 composition api + typescript 进行开发时，我有多次因为代码结构杂乱感到尿急，比如：

setup () {
	// vue3 composition api 绑定 $refs 的方法，比较奇怪的
	const wrap: any = ref(null);

	// 直接定义一个方法
	function getWrap (): HTMLElement | null {
		return wrap.value ? wrap.value : null;
	}

	// 定义接口并实现(如果我做错了，请纠正我)
	interface getWrap {
		(): HTMLElement | null;
	}
	const getWrap: getWrap = () => wrap.value ? wrap.value : null;

	return {
		wrap,
	};
}

实现接口时是不是只能够以初始化变量的形式来实现？ 这样的话满屏就都是 const 了。 将接口部分单独写成文件后，也因为不懂在哪引入，好好发愁了一段时间。

一些搜集

也许是许多新事物一下子涌入大脑，所以我现在比较难转过弯来，发这个帖子或许能够帮助我整理一下要做的事情。 放上一些搜到的资料，或许能帮到一些比较聪明的朋友。

• https://zhuanlan.zhihu.com/p/38110493
• https://zhuanlan.zhihu.com/p/46273917
• https://www.cnblogs.com/tongjiaojiao/p/10191627.html

[agdhole]

可以参考 vuetify 正在开发的 v3 分支，ts + vue3
https://github.com/vuetifyjs/vuetify/tree/next