文章位址：https://mp.weixin.qq.com/s/6usi5EIDZcMJknlZp8Akxw
1、Vue
- 什麼是Vue：Vue是一套輕量級的漸進式JavaScript架構；Vue非常符合Cocos Creator的整體設計思路，可以更友善的讓我們進行面闆開發；
- 如何使用：在代碼編輯器中打開插件腳本，在panel檔案夾中建立index.html、index.css檔案，
懶惰的An—CocosCreator插件-Vue和Node.js-npm的使用
編輯:
下一步在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預設模闆
《合成大西瓜》是怎麼做的？還原上頭玩法