vue的main.js文件的作用,vue main.js中引入js,vue项目中main.js使用方法详解

vue的main.js文件的作用,vue main.js中引入js,vue项目中main.js使用方法详解

Main.js是我们的入口文件,主要作用是初始化vue实例,引入需要的插件。下面这篇文章主要介绍了在vue项目中使用main.js的相关信息,有需要的可以参考一下。

目录

第一部分:main.js文件分析第二部分:Vue.use的作用是什么,什么时候使用Vue.use?(官方文档)Vue.use()什么时候用?补充:main.js上的便利提示汇总

第一部分:main.js文件解析

Src/main.js是入口文件,主要用于初始化vue实例,通过使用需要的插件在main.js文件中定义一个vue对象,其中el为实例提供mount元素。

//基本配置

从“vue”导入Vue

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

//引入已经配置好的路由和vuex

从'导入路由器。/路由器'

从'导入存储。/商店/商店'

//导入较少(一个样式导入的例子,css,less)

//导入' @/assets/xxx.less '

//导入js(例如)

//从“xxx.js”导入xxx

//开始生产消息?

Vue.config.productionTip=false

//第一种书写方法

新Vue({

路由器,

店,

render: h=h(App)

}).$ mount(“# app”)

//第二种写法

const myVue=new Vue({

埃尔:' #app ',

路由器,

店,

render: h=h(App)

})

导出默认myVue

//其他js文件可以引用main.js的myVue实例来调用myVue的路由器、store等。

//调用Note main。$store,main。$router连vue原型链上的axios都可以调用。

//main。$axios

第二部分:Vue.use的作用以及什么时候使用

在Vue中引入和使用第三方库通常是以导入的形式引入,但是有些组件在引入后做Vue.use(),有些组件在引入后做Vue . prototype . $ something=something,那么它们之间有什么联系呢?

先说Vue.prototype,在Vue项目中,我们通常会引入axios来请求接口数据。通过npm安装后,我们只需从文件中的“axios”导入axios即可使用。有时候我们会加一句Vue.prototype.$axios=axios。原型应该是我们熟悉的。

从“vue”导入Vue

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

//路由导入

从'导入路由器。/路由器'

//vuex导入

从'导入存储。/商店'

//npm下载了三方axios包

从“axios”导入axios

//开始生产消息?

Vue.config.productionTip=false

//设置axios的请求根路径

axios.defaults.baseURL='url '

//在Vue.prototype上挂载axios

Vue.prototype.$http=axios

//实际上是在vue原型上加了一个$http,然后在剩下的Vue组件的文件中,

//axios可以通过这个直接使用。$http

新Vue({

路由器,

店,

render: h=h(App)

}).$ mount(“# app”)

Vue.use是什么?(官方文档)

通过全局方法Vue.use()使用插件。Vue.use会自动防止同一个插件多次注册。这需要在调用new Vue()启动应用程序之前完成。Vue.use()方法至少传入一个参数,参数类型必须是Object或Function。如果是Object,这个对象需要定义一个install方法,如果是Function,这个函数会被当作install方法。当执行Vue.use()时,默认情况下将执行install。执行install时,第一个参数是Vue,其他参数是执行Vue.use()时传入的参数。也就是说,使用完之后,调用组件的install方法。

Vue.use()什么时候使用?

在使用的时候,它实际上调用的是插件的install方法,所以如果当前引入的插件包含install方法,我们就需要使用Vue.use()。例如,按如下方式引用Vue中的元素:

从“vue”导入Vue

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

从'导入路由器。/路由器'

从'导入存储。/商店'

//寄存器元素Ui

从“element-ui”导入ElementUI

导入' element-ui/lib/theme-chalk/index . CSS '

Vue.use(ElementUI)

//开始生产消息?

Vue.config.productionTip=false

新Vue({

路由器,

店,

render: h=h(App)

}).$ mount(“# app”)

使用Vue.use的统一全球注册组件

描述:

E.use可以接收一个对象,需要在Vue.use (obj)对象中提供一个install函数。install函数可以获取参数Vue,以后发生Vue.use时会自动调用install函数。

第一步:提供入口文件src/compones/index . js进行统一注册。

//这个文件负责所有公共组件的全局注册。

//vue插件机制:Vue.use

从'导入PageTools。/PageTools '

导出默认值{

安装(Vue) {

Vue.component('PageTools ',PageTools)

}

}

第二步:在入口src/main.js Vue.use注册使用自己的插件模块。

从'导入组件。/组件'

Vue.use(组件)

补充:关于main.js方便小技巧

我先举个例子:

在开发过程中,有一个发送短信的接口需要调试,而我们在调试接口时需要传输手机号码,很多页面都有发送短信的功能。如果我们每次调试接口的时候都把电话号码写到后端,很麻烦,那么我们可以用main.js的全局定义方法来操作,然后我们会大大提高效率!

先编码吧。

主页. js

const send phone number={ apply phone:' 123456789 ',approval phone:' 987654321 ' };

vue . prototype . send phone number=send phone number;

在页面上调试界面的时候可以直接写。

this . send phone number . apply phone

this . send phone number . approval phone

这样会大大方便我们,让我们不用一次换一页。

总结

关于在vue项目中使用main.js的这篇文章就到这里了。关于在vue项目中使用main.js的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!

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

留言与评论(共有 条评论)
   
验证码: