在浏览器中如何调用umd格式js的vue组件 原

  个人是php程序员，对于前端的技术并不是很熟悉。之前了解过一些webpack的技术，发现这种打包并且重新编译发布的方案在joomla扩展开发中是不合适的。因为webpack针对的是整个项目，而我们做扩展开发实际上只是页面的一部分。vue是非常棒的前端框架，vue替代jquery是一个不可阻挡的趋势。最近的很多项目，我们的前端都慢慢的转vue了，因为vue提供了浏览器的版本，所以可以像使用jquery一样，直接在浏览器中使用，而不用通过webpack打包之后再使用。

umd格式的js

按照我的理解，UMD格式也就是通用格式，是可以直接在浏览器中使用。只是需要像加载普通js一样加载即可。但实际情况并非这么简单。

vue的精髓就是可以自定义组件，已经存在一些已经开发好的组件。但目前所有的js包基本上都提供npm版本，这个对于我们做CMS扩展开发来说是很不友好的。虽然我们不能在浏览器项目的开发中直接使用npm来安装js扩展，但有一些成熟的js扩展会提供umd格式的js.

Vue core video player 案例

在做组件构造器的时候，需要实现播放视频的功能，因此选择使用Vue core video player这个插件来完成。

其官网是提供umd格式的js的。

简单的使用步骤如下：

STEP 1:

你也可以在浏览器直接引入或者通过 AMD Loader 进行加载。

<script src="/./dist/vue-core-vide-player.umd.min.js"></script>

import VueCoreVideoPlayer from 'vue-core-video-player'

Vue.use(VueCoreVideoPlayer)

很遗憾，因为我们是浏览器项目，浏览器中写js是不支持import的。那么接下来应该怎么操作呢？

我们可以尝试打开umd.js的源码看看，大概的代码如下

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("vue"));
	else if(typeof define === 'function' && define.amd)
		define([], factory);
	else if(typeof exports === 'object')
		exports["vue-core-video-player"] = factory(require("vue"));
	else
		root["vue-core-video-player"] = factory(root["Vue"]);

在我了解umd格式的逻辑之后，大概能够看到前面实际上就是做模块的定义。大概能够看到整个文件应该是在定义vue-core-video-player这个对象。

在引入xxxx.umd.min.js后，可以在控制台打打印一下这个vue-core-video-player。果然出现了一个模块对象，如图：

这就说明我们成功的引入了xxx.umd.js这个文件了。

下一步就是使用Vue.use方法了。如果直接使用

Vue.use(VueCoreVideoPlayer)

控制台会提示VueCoreVideoPlayer未定义，因为上面我们可以知道实际上定义的是vue-core-video-player。此时如果将

Vue.use(vue-core-video-player)

虽然vue-core-video-player已经定义，但Vue.use方法只会识别vue不会识别vue-core-video-player。因此，下一步就需要将xxx.umd.js中的源码重新的处理一下，将所有的vue-code-video-player替换为VueCoreVideoPlayer。这样问题就解决了。当时我就是这么解决问题的，实际上，应该没有必要这么做，只需要另外在定义一个变量即可。var VueCoreVideoPlayer = vue-core-video-player。应该能解决问题，没有亲自测试。

 当这样做了之后，系统提示无法无法渲染组件。这个时候重点研究了一下Vue.use方法。

Vue.use(vueCoreVideoPlayer.default)