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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。