Vue导入外部js库的两种方法

在一个用Vue-CLI建立的项目中，时常需要用到其他的外部插件，其中一些可以直接用npm或者yarn安装，一些需要手动导入到项目中，当然现在大部分插件都可以直接用npm or yarn安装了，安装或导入完毕之后，有两种方式来使用安装好的插件：

• 对于像element-ui这种基于Vue的组件库，可以直接在main.js中用

  import Element from 'element-ui' //完整引入
  import Button from 'element-ui' //按需引入

  来完整引入整个组件库，或者为了减小项目体积，按照官方文档按需引入，再用

  Vue.use(Element) //注册整个组件库 => 完整引入 
  // or
  Vue.use(Button) //注册部分组件 => 按需引入

  来注册这些组件，然后就能使用这些组件了

• 对于一些用原生JavaScript开发的插件，由于他们不是Vue组件，上面的方法行不通，因此只能采用比较原始的办法，那就是先导入该插件提供的库文件，一般是xxx.min.js和xxx.min.css这样的形式，然后调用其中的API即可。在原生html+css+js的开发中，我们只需要

  <link rel="stylesheed" type="text/css" href="location/xxx.min.css"/>
  <script type="text/javascript" src="location/xxx.min.js"></script>

  导入外部css和js文件即可，而在一个Vue的项目里，几乎没有html文件，因此原来的方法行不通，当然也不是完全不行，可以在index.html中用上述方法导入，但是index.html在public文件夹下，该文件夹在开发中一般用来存放静态的东西，最好不要去修改里面的内容，而且这样导入也不利于debug。在Vue项目中导入外部库(特别是js库)的方法有两种，一种是在单页面组件内部局部导入（以MuiPlayer为例）：

  import 'mui-player/dist/mui-player.min.css'
  import MuiPlayer from 'mui-player' 

  当然我们知道这样做的前提是该库支持ES6，因为import是ES6的语法。局部导入之后，就能在该单页面组件中使用库中提供的方法之类的内容了。

  另外一种是全局导入，只需要在main.js中

  import 'mui-player/dist/mui-player.min.css'
  import MuiPlayer from 'mui-player'

  即可导入了，导入之后还需要注册，由于不是Vue组件，没法利用Vue.use()注册组件，需要将导入的内容(这里是一个名为MuiPlayer的方法)挂载到全局的原型上，这样才能在所有组件中使用：

  Vue.prototype.$MuiPlayer = MuiPlayer

  其本质就是把导入的方法挂载到全局的原型上，这样所有组件都拥有了这个方法，只需在组件内部用

  this.$MuiPlayer()

  即可调用库中写好的方法。