Vue.use(),vue.use的用法

　　今天跟大家分享一下Vue.use是什么，主要包括vueEsign插件的安装是什么，element-ui的安装是什么，为什么有些库不需要使用Vue.use，跟对vue.use()相关知识感兴趣的朋友一起看看吧。

1. Vue.use是什么，了解一下！?

1.1 main.js中的Vue.use()

　　从“vue”导入Vue

　　从导入应用程序。/App.vue

　　从导入路由器。/路由器

　　从“vue-esign”导入vue design

　　Vue.use(vueEsign)

　　Vue.config.productionTip=false

　　新Vue({

　　路由器，

　　render: h=h(App)

　　}).$ mount(“# app”)

1.2 简单解释一下这里的import的逻辑，

　　如果from后面跟一个路径，直接顺着路径找对应的文件。如果from后面跟一个名字，那就是第三方模块，它会去node_modules找到对应名字的文件夹。node _ modules的主属性“package.json”

1.3 Vue.use()代码

　　找到相应的文件。

　　对应代码

　　函数initUse (Vue) {

　　//1.Vue.use是一个函数。

　　Vue.use=function (plugin) {

　　//2.定义一个数组。如果这个。_installedPlugin不存在，这。_installedPlugins=[]]

　　var installedPlugins=(this。_installedPlugins (this。_ installed plugins=[])；

　　//3.确定是否已经注册，直接退货是否已经注册。

　　if(installed plugins . index of(plugin)-1){

　　归还这个

　　}

　　//4.获取其他参数，如：Vue.use中的a b c(plugin，a，b，c)

　　var args=toArray(arguments，1)；

　　//5.第一个参数，添加一个Vue实例。

　　args . un shift(this)；

　　//6.插件有安装方法。

　　if(type of plugin . install=== function ){

　　//7.执行install，然后传入参数(可以看到插件的install方法，接受第一个参数，就是Vue实例)

　　plugin.install.apply(插件，参数)；

　　} else if(插件类型===函数){

　　//8.如果插件本身是一个直接执行的函数

　　plugin.apply(null，args)；

　　}

　　//9.来一个数组存储注册的插件。

　　installedPlugins.push(插件)；

　　归还这个

　　};

　　}

2. 看一下 vueEsign 插件的install是什么？

　　node _ modules \ vue-esign \ src \ idnex . js

　　//1.引入一个vue组件，其实就是一个对象。

　　从导入vueEsign。/index.vue

　　//2.对象的install属性是一个接受参数Vue的方法。

　　Vue esign . install=function(Vue){

　　//3.确定这个插件是否已经安装(这里指的是vueEsign，在Vue.use中用apply重写)

　　如果(this.installed) {

　　}

　　this.installed=true

　　//4.在Vue上注册组件

　　Vue.component(vueEsign ，vueEsign)

　　}

　　导出默认vueEsign

3.看一下 element-ui的install是什么？

　　node _ modules \ element-ui \ src \ index . js

　　//1.这也是一种功能

　　const install=function(Vue，opts={}) {

　　//2.看一些其他的本地化配置。

　　locale . use(opts . locale)；

　　locale . i18n(opts . i18n)；

　　//3.components是element-ui的组件数组。遍历它并在Vue上注册这些组件。

　　//(!可以发现这个和另一个插件有相似之处，就是在install的第一个参数Vue上注册组件。)

　　components.forEach(component={

　　Vue.component(component.name，组件)；

　　});

　　//4.这里Vue.use的原理也是一样的(可以参考截图，这里它的后续是在Vue上注册指令)

　　vue . use(infinite scroll)；

　　vue . use(loading . directive)；

　　//5.以下是在Vue原型上挂载的所有属性或方法

　　Vue.prototype.$ELEMENT={

　　size: opts.size ，

　　zIndex: opts.zIndex 2000年

　　};

　　vue . prototype . $ loading=loading . service；

　　vue . prototype . $ msgbox=MessageBox；

　　vue . prototype . $ alert=messagebox . alert；

　　vue . prototype . $ confirm=messagebox . confirm；

　　vue . prototype . $ prompt=messagebox . prompt；

　　vue . prototype . $ notify=Notification；

　　vue . prototype . $ Message=Message；

　　};

4. Vue.use() 总结

　　首先，Vue.use本身就是一个函数；Vue.use函数执行这些操作：确定插件是否注册；如果插件自带insatll属性，执行它，传递一个Vue构造函数作为第一个参数，其他参数在用；如果插件本身是一个函数，执行它，传递一个Vue构造函数作为第一个参数，其他使用中的参数记录这个插件已经注册；3.临时遇到的插件都是对象本身，然后都会在install中获取传递的Vue构造函数进行一些绑定操作。比如绑定组件，比如在原型上添加方法。

5.为什么有的库就不需要使用Vue.use

　　比如常见的aixos简介

　　从“axios”导入axios

　　Vue.prototype.$axios=axios

　　Axios本身不依赖Vue运行，axios本身可以在浏览器端或者节点端进行http请求。

　　这里它被安装在Vue prototype的$axios属性上，只是为了方便。

　　目标

　　就是当我觉得组件需要和Vue构造函数交互的时候，我才需要Vue.use()。本质就是给插件传递一个Vue构造函数，仅此而已。关于Vue.use()做什么的这篇文章到此为止。有关Vue.use()的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。