LazyAn-—CocosCreator插件-Vue和Node.js-npm的使用

文章地址：CocosCreator插件-Vue和Node.js-npm的使用

1、Vue

• 什么是Vue：Vue是一套轻量级的渐进式JavaScript框架；Vue非常符合Cocos Creator的整体设计思路，可以更方便的让我们进行面板开发； 

• 如何使用：在代码编辑器中打开插件脚本，在panel文件夹中新建index.html、index.css文件，

  

        编辑:

下一步在ready()函数中初始化Vue面板：

然后在index.html中进行数据绑定和事件绑定：

这样就把原始的插件工程优化成了Vue的版本；

2、Node.js-npm

• 什么是Node.js-npm：Node.js 是一个基于 Chrome V8 引擎的 Javascript 运行环境，而npm全称是node package management，是nodejs内置的软件包管理器，也是可以说是运行在node.js上的共享代码模块；

• 如何使用：新版node.js已经内置了npm开发包，所以可以下载安装最新的node.js，然后根据需求导入npm相应的代码模块；例如：fs-extra。

• fs-extra；文件操作相关工具库；在https://www.npmjs.com/中搜索fs-extra即可查看信息和方法；下载安装node.js：https://nodejs.org/en/ 根据提示安装完成，并配置好环境。打开编辑器，在插件文件根目录下输入pwd、ls

然后输入 npm install fs-extra 回车

        看到log信息并且看到文件目录中出现node_modules文件夹,说明已经导入成功了。

3、实际应用

• 利用fs-extra在cocos项目中创建新的文件夹：

我们在插件按钮回调方法里写，

//  导入插件文件夹下的npm代码库const FS_extra = Editor.require("packages://test_plugin/node_modules/fs-extra");//  设置路径let testdir = Path.join(Editor.Project.path + '/assets', "testfile");//  创建文件夹FS_extra.mkdirSync(testdir);//  刷新项目assets目录Editor.assetdb.refresh('db://assets', function(err, results) {});                    Editor.log('创建文件夹');

执行创建成功！

• 利用fs-extra复制外部文件拷贝在cocos项目：

我们在插件文件夹里创建一个替换文件夹

在replacefile里放入我们需要拷贝的文件testJS.js

在插件按钮回调方法里写:

//  导入插件文件夹下的npm代码库const FS_extra = Editor.require("packages://test_plugin/node_modules/fs-extra");//  获取源文件路径let from = Editor.url('packages://test_plugin/replacefile/testJS.js');//  粘贴路径let dest = Editor.url('db://assets/Script/testJS.js');//  拷贝FS_extra.copySync(from, dest);Editor.assetdb.refresh('db://assets/Script', function(err, results) {});Editor.log('拷贝成功');

执行创建成功！

4、总结

分享了两个简单的例子，其实单单一个fs-extra就可以实现更多的骚操作，比如对文件执行移动、删除、读取、写入、输出json、写json等等。。所以一定要熟悉npm和引擎中的各种方法。

——————————————————————

更多阅读：

CocosCreator插件-初探编辑器扩展

CocosCreator小技巧-简单版自定义多边形遮罩

CocosCreator小技巧-修改TypeScript默认模板

《合成大西瓜》是怎么做的？还原上头玩法

欢迎关注公众号: An的世界