介绍
如何在Vue框架中引入JS库?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
<强>错误示范
<强>全局变量法
最不靠谱的方式就是将导入的库挂在全部变量窗口对象下:
//, entry.js:
window._ =,需要(& # 39;lodash& # 39;);//,MyComponent.vue:
export default {
,建立了(){
,console.log (_.isEmpty (), ?, & # 39; Lodash 无处不在! & # 39;,:,& # 39;Uh 哦. . & # 39;);
,}
} 这种方式的缺点有很多,我们只说其中一个关键的点:不支持服务端渲染。当应用跑在服务端时,窗口对象不存在,当然试图去访问窗口下的属性会抛出错误。
<强>处处引入法
另外一个不太优雅的方式就是在需要的每个文件中都引入对应的库:
//, MyComponent.vue:
import _ 得到& # 39;lodash& # 39;;
export default {
,建立了(){
,console.log (_.isEmpty (), ?, & # 39; Lodash is available 这里! & # 39;,:,& # 39;Uh 哦. . & # 39;);
,}
} 虽然这方法是可行的,但是太不简洁。你必须在每个文件中都记得引入,而且如果不需要了,又得重新删除。另外,如果打包策略不够明智的话,可能会打包出多份重复的代码。
<强>正确引入方式
最简单靠谱的方式是用库变成Vue的原型对象的属性。下面,我来演示如何将时刻库引入:
import moment 得到& # 39;时刻# 39;;
Object.definePrototype (Vue.prototype, & # 39;美元时刻# 39;,,{,价值:moment }); <代码> Object.definePrototype 语法参见MDN
由于所有的组件都会继承Vue原型对象上的方法,因此这些方法在任何组件文件中都能通过这个。美元的时刻访问到:
//, MyNewComponent.vue
export default {
,建立了(){
,console.log(& # 39;从而time is & # 39;,只这一点。时刻()美元.format (“HH: mm"));
,}
} 使用<代码> Object.defineProperty 定义对象属性,如果不在属性描述器中额外说明,则该属性就是默认只读的,保护引入的库不被重新赋值。
<强>写成插件
如果你在项目的很多地方都用了某个库,或者你希望全局可用,你可以构建自己的Vue插件。
插件能化繁为简,能让你像下面这样很简单地引入自己想要的库:
import MyLibraryPlugin 得到& # 39;my-library-plugin& # 39;;
Vue.use (MyLibraryPlugin); 就像Vue路线,Vuex等插件一样,我们的库仅仅需要两行,就能在任何地方使用了。
<>强如何写插件
首先,创建一个文件。本例中,我将引入一个Axios库的插件。我们就把这个文件命名为Axios。js吧。
最关键的地方在于,我们需要暴露一个将Vue构造器作为第一个参数的安装方法。
//, axios.js:
export default {
,安装:函数(Vue), {
,//Do 东西
,}
} 然后我们可以用之前的方式将库添加到Vue的原型对象上:
//, axios.js
import axios 得到& # 39;axios& # 39;;
export default {
,安装:函数(Vue), {
,Object.defineProperty (Vue.prototype, & # 39;美元http # 39;,,{,价值:axios });
,}
} 接着我们只需要Vue实例的使用方法就能将这个库引入整个项目了。我们像下面代码一样简单引入:
//, entry.js
import AxiosPlugin 得到& # 39;。/axios.js& # 39;;
Vue.use (AxiosPlugin);
Vue ({new
,建立了(){
,console.log(这一点。$ http ?, & # 39; Axios 工作! & # 39;,:,& # 39;Uh 哦. . & # 39;);
,}
}) <>强插件参数设置
插件的安装方法还可以接受其他的可选参数。有些开发者可能不喜欢Axios实例对象的方法名http美元,因为Vue资源插件的方法名也是这个。然后,让我们利用第二个参数来修改它。
//, axios.js
import axios 得到& # 39;axios& # 39;;
export default {
,安装:函数(Vue, name =, & # 39; http # 39;美元),{
,Object.defineProperty (Vue.prototype,名字,,{,价值:axios });
,}
} //, entry.js
import AxiosPlugin 得到& # 39;。/axios.js& # 39;;
Vue.use (AxiosPlugin, & # 39; axios& # 39;美元);
Vue ({new
,建立了(){
,console.log(这一点。$ axios ?, & # 39; axios 工作! & # 39;,:,& # 39;Uh 哦. . & # 39;);
,}
})
