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

[eycodes (上班摸鱼不算偷懒吧)]

该帖子并不会讨论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的引用。

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

下载地址：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

[eycodes (上班摸鱼不算偷懒吧)]

mask一些可能用到的链接：

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

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

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

[valiancer (渡鸦(公众号：游戏开发手记))]

膜拜大佬~

[eycodes (上班摸鱼不算偷懒吧)]

[1445490580 (z55111)]

mark一下

[Andyscream]

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

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

Vue.use(VueCompositionAPI)

[eycodes (上班摸鱼不算偷懒吧)]

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

[eycodes (上班摸鱼不算偷懒吧)]

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

[Andyscream]

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

[eycodes (上班摸鱼不算偷懒吧)]

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

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第三方组件，可以参考这个导入来做，效果待测试 理论上是没有问题。

[Andyscream]

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

[eycodes (上班摸鱼不算偷懒吧)]

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

[eycodes (上班摸鱼不算偷懒吧)]

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

[492187276 (ganju)]

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

[eycodes (上班摸鱼不算偷懒吧)]

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

[1647506059 (Haven（dddd-cv战士）)]

膜拜大佬~

[Andyscream]

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

[eycodes (上班摸鱼不算偷懒吧)]

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

[240414571 (qzpm4399)]

mark!