0%

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    1
    Vue.prototype.$MuiPlayer = MuiPlayer

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

    1
    this.$MuiPlayer()

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

-------------本文结束感谢您的阅读-------------