前言
其实vue与cocos有很多相似的地方，这里主要说一下如何将cocos打包完的文件嵌入到vue-cli使用。
版本
vue2+cocos2.3.4，理论上vue3也能用。
注意：由于2.4.x及以上有分包，不适用于2.4.x以上的cocos引擎。不过原理明白了之后目测也能改一改去支持。
大致效果
- 能实现在vue-cli脚手架内展示cocos内的东西。
- cocos与web如何交互。
- web与cocos如何交互。
- 其实能实现一些类似于编辑器的效果，但是网页端的保存需要另一套技术方案，如electron或者服务端存储等等。
基本思路
第一步也是最难的一步，如何将cocos嵌入到web页面呢？其实有两个方案可以选择
- 内嵌iframe。
- web内集成cocos。
第一种方式有很多弊端，主要体现在没有cocos的完全控制能力，而且iframe给人的体验也不太好。
所以着重说一下第二个方案。
目录结构
其实整个工程就是一个标准的vue2的项目工程。
原理
原理其实很简单，我们可以把cocos想象成一个基于canvas的插件，也就是将问题变为：应该怎么引入一个没有npm包管理的第三方库？
在解决上面那个问题之前先看一下cocos打包完的工程文件的目录：
其中较为重要的文件：
- index.html:入口文件。
- cocos2d-js-min.js:引擎文件。
- main.js:设置几乎所有的文件路径。（重要）
- project.js:游戏逻辑文件。
- setting.js:配置文件。
因为我们要在vue-cli内嵌入cocos，所以放弃原本的index.html，然后将需要引入的文件全部放到vue-cli入口文件内：
先看一下引入了哪些文件
放入入口文件简单：
在vue的入口文件内引入三个文件，原本project.js是在main.js内引入的，我为了方便将这个文件直接引入在入口文件，如果你的工程是dev模式或者加了md5，文件名字可能不一样。我没用到physcis.js所以没写。
这时其实还有一个文件我没有引入，就是main.js,这个文件的作用是设置各种文件的路径，以及启动项目。有兴趣的可以去看一下main.js的内容，文件内容很多我就不截图了。
既然是在web内使用，那么应该做到在任意时机都能启动项目，所以我把main.js改了，对应到我的目录里是creator-load.js，改这个文件的路径有那么一点点痛苦，不过幸好我已经改完了，后面会放地址。
这时已经可以完全使用cocos了，那么接下来就是弄一个canvas容器去盛cocos。
在合适的时候调用creator-load.js去初始化就可以了，其实main.js还可以继续拆分，可以把启动项目和配置路径的代码拆开，那样看着更简洁一些。
上面是如何嵌入cocos，那么cocos怎么和vue通信呢？
通信
其实这个简直不要太简单，最简单的就是用全局变量存储变量，用事件系统通知双方事件的触发，我的项目里写了一个简单的事件文件可以简单用一用。。
不过为了好维护，还是要对这些做一层封装。具体如何封装就看自己的习惯了。
地址
在线预览(渣渣服务器，打开会比较慢)
工程打开方式
vueTem文件夹下执行
cnpm i
npm run dev
如果更改了cocosTem内的文件打包路径需要指定到 vueTem/static/cocos-build下。
交互在场景2中可以用，场景1中没有与vue的交互。
写在最后
讲道理，如果cocos和vue能够进行通讯，那么在网页端去编辑游戏也是有一个不错的方向，譬如教育行业的课件编辑工具等。我在electron里写过一套这个东西，不过是demo级别的，web端的弊端是文件的IO很难有替代品。
还有一个问题就是现在用的是打包完的文件，如果用于编辑，会出现很多无用的资源，如何剔除这些资源，也是一个关键（又或许不用剔除？）
demo的工程是我在某个工程里改的，去除了敏感信息，不过可能看上去有些代码没有用而显得代码有些多，而且由于写demo可能很多地方不太符合工程规范，见谅。不过应该不影响看.
这方面可参考的东西比较少，可能有些大神有更好的方式去实现，欢迎评论。
鸣谢
@插件小王子
