V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Shook
V2EX  ›  问与答

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

  •  
  •   Shook · 2020-08-20 17:32:36 +08:00 · 1502 次点击
    这是一个创建于 1316 天前的主题,其中的信息可能已经有所发展或是发生改变。

    想要练练手写下 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 了。 将接口部分单独写成文件后,也因为不懂在哪引入,好好发愁了一段时间。

    一些搜集

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

    1 条回复    2020-08-20 17:53:10 +08:00
    agdhole
        1
    agdhole  
       2020-08-20 17:53:10 +08:00   ❤️ 1
    可以参考 vuetify 正在开发的 v3 分支,ts + vue3
    https://github.com/vuetifyjs/vuetify/tree/next
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   980 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 20:11 · PVG 04:11 · LAX 13:11 · JFK 16:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.