# 介绍一个基于CocosCreator2.x，结合Element-ui和Vue2.x的插件模板源码~ # 功能介绍模板实现了以下功能： 1. 升级插件内置的Vue版本为2.6 2. 接入Element-ui 3. Vue组件式开发的简单示例 ❓ 有什么作用？当我们需要制作更复杂的插件时，会希望有更多封装好的组件可以使用，或者希望更灵活地控制UI适配、配色、动态适配... 这些功能HTML开发中都已经有非常多的解决方案啦！得益于Cocos插件面板可以使用HTML进行开发，我们也可以通过引入UI组件库的方式解决这些问题！比如由“饿了么”出品的[Element-ui](https://element.eleme.cn/#/zh-CN)。常见的组件库大部分都要求Vue版本为2.x，不支持Creator2.4内置的版本（Vue1.x），因此项目中我们也升级了Vue版本到2.6。 [Vue2.x](https://v2.cn.vuejs.org/)提供了比Vue1.x更多的功能，比如组件式开发，我们可以封装自己的组件（就像游戏中的Prefab），提取公共部分，减少重复逻辑！ # 使用教程 ## 导入插件复制源码到项目的packages文件夹下即可~ 运行npm install安装Element-UI。应该会得到一个警告： ![image.png](https://download.cocos.com/CocosStore/markdown/dc4b742661f546748063ad67bd2bbebf/dc4b742661f546748063ad67bd2bbebf.png) 它指的是Element-UI需要Vue2.5，但并没有在本地仓库中找到，我们不使用npm安装Vue，因此忽略即可。 ## 使用Element-UI 我们可以像这样声明一个按钮 ```javascript // index.html ``` Element-UI的组件均有特殊前缀"el-"。可以得到以下效果： ![image.png](https://download.cocos.com/CocosStore/markdown/d67dab0dfe4e4fc186a617536b85fbb6/d67dab0dfe4e4fc186a617536b85fbb6.png) 更多的组件，可以查看[Element-UI的文档](https://element.eleme.cn/#/zh-CN/component/button)。 ## Vue组件式开发可以使用以下的方式声明一个"组件"(component)。 ```javascript // buttonGroup.js Vue.component("button-group", { template: `

组件HTML代码

`, data() { }, }); ``` 参数和声明Vue界面类似。在界面上，通过以下方式使用组件： ```javascript Editor.require(`packages://vuedemo/components/buttonGroup.js`); Editor.Panel.extend({ template: `

👇在这里

👆在这里

`, }); ``` 更多Vue功能，可查看[Vue文档](https://v2.cn.vuejs.org/v2/guide/)。 # 联系作者如果搭建插件项目的过程中遇到问题，可以联系我进行处理。微信：a864321899 注意：由于本人并不是专业的前端开发人员，因此Element-UI和Vue相关的问题并不一定能解决。 # 购买须知本项目是一个示例的模板源码，本人正在撰写对应的教程帖子，非急需可以先等等，如果你可以跟着帖子完成项目，那么你不一定需要购买。本产品为付费虚拟商品，一经购买成功概不退款，请支付前谨慎确认购买内容。