Vue3单文档开发插件

Creator 3.x
#1

周末搞了两天终于可以通过vue单文档开发插件啦！

刚开始学习cocos插件的时候。感觉cocos通过vue开发插件的方式有点儿奇怪，由于是新手就顺应了它的方式。现在我翅膀变硬了，我要原生的vue开发模式，于是就办法支持了下：

  • 环境：cocoscreator3.7.2+vite+vue3+typescript
  • 最终效果： 很简单，就是支持下.vue文件而已，让会vue的可以轻松开发插件。

image
image1515×1053 154 KB

使用：

  1. 在vite.config.js中配置各个功能模块的入口，最终会和之前cocos编译路径一致：

image
image694×313 18.5 KB

image

  1. 在入口文件中放心使用import加载vue组件就ok
  2. 其他配置与编译方式不变

vue3-templete.rar (655.5 KB)

12赞
改良版 vite vue 编辑器扩展模板
【从零开始的插件开发】使用 CC3.x + UI组件 + Vue3 开发一个插件
开发 COCOS Creator 插件的较佳实践
#2

支持一下！！写入文档

#3

:cow:

#4

:+1::+1::+1::+1::+1::+1:

#5

太棒了 :+1: :+1: :+1:

#6

赞赞赞，看一下

#7

吊炸天666

#8

太难了, vue 文件里的 css 编译后直接就丢失了, 各种调试也非常难, 和正常写VUE完全不同, 官方那个示例太应付了, 哎, 说多了都是泪, 哈哈哈

#9

哈哈。后面我又优化了下。把所有css打包成一个文件了

#10

都是人才啊

#11

真的是厉害，看到 tsconfig 的配置就发懵，这些是在哪里学到的啊？

#12

我完全看不懂是在说啥。

#13

我的错，文字功底不行 :joy:

#14

https://www.npmjs.com/package/@cocos-fe/hello-build 其实我们也有做相关探索，只是目前还没标准化。

#15

不错，期待成品，我觉得这个最大的问题是没有把依赖库打到一个js里面，尝试了很多次都失败了，最终无赖放弃

#16

底层还是 vite 在打包，原则上它是会将依赖打包进去的，你可以尝试用下我的。

由于构建脚本目前只对内提供，所以我们遵循约定大于配置的原则。比如默认原文件要放置在 source 文件夹，所有插件都在 extensions 目录下等。

#17

是我对VUE完全不熟悉

#18

对vue完全不懂，请问你创建这个工程是在creator创建的，还是用的vue创建的？

#19

cocos创建一个插件就行了，然后安装vue相关的东西，这个模板可以直接拷贝过去用

#20

我试了下，为什么我这个里面的.vue文件一直不能import，是不是少了什么操作，没加入到工程目录里面