vue项目中main.js使用方法详解

 更新时间:2022年07月13日 11:14:21   作者:一个好好的程序员  
main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件,下面这篇文章主要给大家介绍了关于vue项目中main.js使用方法的相关资料,需要的朋友可以参考下

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

  • src/main.js是入口文件,主要作用是初始化vue实例并使用需要的插件
  • 在main.js文件中定义了一个vue对象,其中el为实例提供挂载元素
//基础配置
import Vue from 'vue'
import App from './App.vue'
 
//引入已经配置好的路由和vuex
import router from './router'
import store from './store/store'
 
// 导入less(样式的导入例子,css,less)
//import '@/assets/xxx.less'
//导入js(例如)
//import xxx from 'xxx.js'
 
// 是否启动生产消息
Vue.config.productionTip = false
 
//第一种写法
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
 
//第二种写法
const myVue=new Vue({
  el:'#app',
  router,
  store,
  render: h => h(App)
})
 
export default myVue
 
// 其他js文件可以引用main.js的myVue实例从而调用myVue的router、store等等
//调用注意 main.$store,main.$router即使是vue原型链上的axios也可以被调用
//main.$axios

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

在Vue中引入使用第三方库通常我们都会采用import的形式引入进来,但是有的组件在引入之后又做了Vue.use()操作,有的组件引入进来又进行了Vue.prototype.$something = something,那么它们之间有什么联系呢?

  • 先说一下Vue.prototype,在Vue项目中通常我们引入axios来进行请求接口数据,通过npm安装之后我们只需在我们的文件中import axios from "axios"就可以使用,有时候我们会加上一句Vue.prototype.$axios = axios,prototype我们应该是再熟悉不过了
import Vue from 'vue'
import App from './App.vue'
//路由导入
import router from './router'
//vuex导入
import store from './store'
//npm下载好的三方axios包
import axios from 'axios'
// 是否启动生产消息
Vue.config.productionTip = false
// 设置axios的请求根路径
axios.defaults.baseURL = 'url'
// 把 axios 挂载到 Vue.prototype 上
Vue.prototype.$http = axios
//其实是在Vue原型上增加了一个$http,然后在其余的vue组件的文件中,
//可以通过this.$http直接来使用axios
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

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

通过全局方法 Vue.use() 使用插件,Vue.use 会自动阻止多次注册相同插件,它需要在你调用 new Vue() 启动应用之前完成,Vue.use() 方法至少传入一个参数,该参数类型必须是 Object 或 Function,如果是 Object 那么这个 Object 需要定义一个 install 方法,如果是 Function 那么这个函数就被当做 install 方法。在 Vue.use() 执行时 install 会默认执行,当 install 执行时第一个参数就是 Vue,其他参数是 Vue.use() 执行时传入的其他参数。就是说使用它之后调用的是该组件的install 方法。

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

它在使用时实际是调用了该插件的install方法,所以引入的当前插件如果含有install方法我们就需要使用Vue.use(),例如在Vue中引用Element如下:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 注册elementUi
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
Vue.use(ElementUI)
// 是否启动生产消息
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

利用 Vue.use 统一全局注册组件

说明:

  1. Vue.use 可以接收一个对象, Vue.use(obj)
  2. 对象中需要提供一个 install 函数
  3. install 函数可以拿到参数 Vue, 且将来会在 Vue.use 时, 自动调用该 install 函数

第一步:提供统一注册的入口文件 src/componets/index.js

// 该文件负责所有的公共组件的全局注册
// vue插件机制: Vue.use
import PageTools from './PageTools'
 
export default {
  install(Vue) {
    Vue.component('PageTools', PageTools)
  }
}

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

import Components from './components'
Vue.use(Components)

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

首先我先举个例子:

在开发的过程中有一个发送短信的接口需要联调,而我们在联调接口的时候需要传手机号,而好多的页面都有发送短信的功能。如果我们每次联调接口的时候都把手机号写死传给后端,这样就很麻烦了,那么我们可以利用main.js全局定义的方法进行操作了,那么我们就大大提高了效率!

首先我们上代码

main.js
const sendPhoneNumber = {applyPhone:"123456789",approvalPhone:"987654321"};
Vue.prototype.sendPhoneNumber = sendPhoneNumber;

在页面上联调接口的时候可以直接写

this.sendPhoneNumber.applyPhone
this.sendPhoneNumber.approvalPhone

这样就大大方便了我们,就可以不用每次再一个页面一个页面进行修改了

总结

到此这篇关于vue项目中main.js使用方法的文章就介绍到这了,更多相关vue项目main.js使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • WebPack配置vue多页面的技巧

    WebPack配置vue多页面的技巧

    这篇文章主要介绍了WebPack配置vue多页面的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • Vue中使用iframe踩坑问题记录 iframe+postMessage

    Vue中使用iframe踩坑问题记录 iframe+postMessage

    这篇文章主要介绍了Vue中使用iframe踩坑问题记录 iframe+postMessage,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 关于Vue中的watch监视属性

    关于Vue中的watch监视属性

    这篇文章主要介绍了关于Vue中的watch监视属性,Vue中的watch默认不监视对象内部值的改变,当被监视的属性变化时,回调函数自动调用,进行相关操作,需要的朋友可以参考下
    2023-04-04
  • vue2使用 element表格展开功能渲染子表格的方式

    vue2使用 element表格展开功能渲染子表格的方式

    这篇文章主要介绍了vue2使用 element表格展开功能渲染子表格的方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • Vue3实现跨标签页通信的四种方式

    Vue3实现跨标签页通信的四种方式

    在Vue应用中,跨标签页的通信通常涉及到两个或多个浏览器标签页之间的信息共享,由于每个标签页或窗口都是独立的JavaScript执行环境,它们不能直接通过Vue或其他JavaScript库来直接相互通信,但是,有一些方法可以实现这种跨标签页的通信,以下是一些常用的跨标签页通信方法
    2025-03-03
  • Vue使用pdf-lib实现为文件流添加水印并预览

    Vue使用pdf-lib实现为文件流添加水印并预览

    这篇文章主要为大家详细介绍了Vue如何使用pdf-lib实现为文件流添加水印并预览的功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解一下
    2023-03-03
  • 在vue中根据光标的显示与消失实现下拉列表

    在vue中根据光标的显示与消失实现下拉列表

    这篇文章主要介绍了在vue中根据光标的显示与消失实现下拉列表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 在 Vue 中编写 SVG 图标组件的方法

    在 Vue 中编写 SVG 图标组件的方法

    这篇文章主要介绍了在 Vue 中编写 SVG 图标组件的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • Vue如何实现分页功能代码实例

    Vue如何实现分页功能代码实例

    这篇文章主要给大家介绍了关于Vue如何实现分页功能的相关资料,Vue分页功能的实现需要前端和后端共同配合完成,文中通过代码实例介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • vue element插件this.$confirm用法及说明(取消也可以发请求)

    vue element插件this.$confirm用法及说明(取消也可以发请求)

    这篇文章主要介绍了vue element插件this.$confirm用法及说明(取消也可以发请求),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论