这篇文章主要讲解了“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方法作用及使用是怎样的都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Vue3相比Vue2的优势表示在哪些方面

  这篇文章主要给大家分享的是Vue3的几个优势，Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化，下面我们一起进入文章看看具体详情吧

• 使用原生JS怎么写简单的五子棋小游戏

  这篇文章主要为大家详细介绍了原生JavaScript实现简单五子棋游戏，文中示例代码注释的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 使用JS怎样实现放大镜的功能，要点有哪些

  这篇文章主要为大家详细介绍了JavaScript实现放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• vue项目中怎样实现动态加载和刷新，哪些事项要注意

  这篇文章主要给大家介绍了关于vue动态菜单、动态路由加载以及刷新踩坑的相关资料,踩的这些坑其实是挺常见的,大家可以看看,避免遇到的时候再踩到同样的坑,需要的朋友可以参考下

• 用canvas怎样扩展一个物体类，实例是什么样

  目录前言FabricImage 图片类事件派发小结前言虽然我们讲了这么多个章节，但其实目前为止就只有一个 Rect 类能用，略显单调。于是乎，为了让整个画布稍微生动一些，这个章节我们来尝试增加一个图片类，如果你以后需要扩展一个物体类，也是用同样的方法。另外有时候我们还希望在物体属性改变时或者画布创建后做一些额外的事情，