成功!cc2.*+ 插件升级vue并引入element-ui组件

该帖子并不会讨论element-ui组件的问题,则重于讨论vue升级和vue插件组件的使用,并纪录一些我在开发插件时对vue的使用技巧

cc2*版本的vue实在太低了,导致了有些语法或组件运行不起来,最常见的element-ui组件也用不了
那么今天直接升级下vue版本。
step1: 直接去vue官方下载一个vue.js版本,建议是开发版本吧,调试比较方便,下载过程。。。
step2:将下载的文件放到自己的插件项目目录下,可以随便放,只要可以引用到都行。。。
step3:重点来了,引用vue???




好了,引入vue基本可以用了,下面是引用其他组件,最常见的是element-ui了
step4:在当前插件目录下npm install element-ui即可安装element-ui组件,过程。。。。。
step5:看图1上面的引用,并注册使用,主要Vue,use是全局注册,如果你不需要可以局部注册,详细找vue官方文档。
step6:简单测试下效果

对了,也要引用element-ui组件的css,看图1的引用。

最后,打个广告,没有上车的兄弟赶紧上车,上车的朋友后续的功能马上更新

image
下载地址:https://store.cocos.com/app/detail/3118
版本更新细节:2.*版本的资源预览插件

补充一些官方细节

http://docs.cocos.com/creator/manual/zh/extension/work-with-vue.html
https://docs.cocos.com/creator/manual/zh/extension/reference/panel-reference.html

2赞

mask一些可能用到的链接:

  1. vue单页面组件开发
    插件开发中 实现 vue单文件组件开发

  2. 右键菜单开发
    插件开发,右键菜单功能如何实现

  3. 新建节点等功能
    插件开发怎么用代码实现新建节点,删除节点等操作

膜拜大佬~

:joy:

mark一下

朋友,问你个问题,我用的3.x和vue2,然后我想用composition-api,但是我死活加载不上去这个vue组件,死活加载不上去。

var Vue = require('vue/dist/vue.js')
var VueCompositionAPI = require('@vue/composition-api')

Vue.use(VueCompositionAPI)

我还在研究这个东西,我也加载不了,猜测是插件使用了vue文件,引入的vue无法编译导致。我放弃了,改变了方向可以参考楼二上的第一点,我也在研究这个中有点思路,还没有成功,成功之后我贴出来参考下 :joy: :joy: :joy:,我是2.*版本,应该是一样的问题

同时,我发现一样比较有趣的事,明明是字符串的模板,到vue里面就变成了unit8Array,原因在调试中

我还以为我姿势不对,原来大家都无法加载。 :stuck_out_tongue:

真的坑,终于研究出来了。我使用了单文件组件开发的方式,详情楼二第一个链接,但需要注意的一些问题:

  1. 使用fs模块导入问题,一定要写格式,要不会是buffet类型
    如图介绍:

    对于2.*版本指出一些小问题:
    关于官方推荐使用的写法
    Fs.readFileSync(Editor.url(‘packages://’ + PACKAGE_NAME + ‘/panel/index.html’, ‘utf8’))
    写法是没有问题,但是在导入vue单文件时就会有问题,主要来源于(下图是官方插件导入html写法)

    官方的template默认就是buffer类型,但是在vue里面定义了template是字符串(下图是vue导入html写法)

    所以,导入问题的时候一定要注意!!!!正确的写法应该是
    template: Fs.readFileSync(Editor.url(‘packages://’ + PACKAGE_NAME + ‘/components/scroller/index.html’), “utf-8”)
    一定要指定文件格式!!!

注意这个问题后,开始单组件导入问题,基本和楼二链接的一样操作即可。


两种写法都是可以的。

另外,针对导入vue第三方组件,可以参考这个导入来做,效果待测试 :joy: :joy: :joy: :joy:理论上是没有问题。

绝望了,vue 2应该是编译期加载的问题。我直接上vue 3了,vue 3可以用组合api,但是我估计要是再引用类似的编译期插件,还得出问题。

:rofl:不得不说,开发插件的多费脑,坑还多,资料少,大部分靠猜

我用楼二的链接方法,成功引用了第三方vue插件。过程有点曲折麻烦,整理后发出参考

我是专注于实现插件功能 不在乎面板美观不美观…

哈哈哈哈,可能有点小误解,我也不怎么在乎面板的美规。我帖子虽然写着引用element-ui组件,但是我并没有很多内容去说它这个组件,只是作为一个引子。这帖子大部分内容讨论的是怎么升级vue版本和如果引入vue的插件。在我看来成功引用vue的插件,这是一个多么有意义的事情,至少在插件开发方面大大提高其效率,也不用重复做轮子,功能会更加的强大完善

膜拜大佬~

我总算搞定了,我知道怎么再vue 2里加载composition-api了,总体思路是建个空vue项目,把vuecomposition-api 打包成一个文件,然后导出来用。不过,真的蛋疼,在插件下的node_module装了等于没装,到头来还不如从空项目的node_module集成出一个bundle.js文件放插件下面使用,插件下文件夹还干净了。

嗯嗯,应该也只能这样,vue插件中使用了.vue文件格式,好像cocos插件环境不支持编译执行,所以用不了。不过有些vue插件会导出一个js文件,那个js文件改一下导出格式也是可以用的,我之前无意中发现的,你可以找找试试,这样不用写那么多