广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue项目中main.js使用方法详解
  • 402
分享到

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

2024-04-02 19:04:59 402人浏览 泡泡鱼
摘要

目录第一部分:main.js文件解析第二部分:Vue.use的作用以及什么时候使用Vue.use是什么?(官方文档)Vue.use()什么时候使用?补充:关于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使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue项目中main.js使用方法详解

本文链接: https://www.lsjlt.com/news/154288.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue项目中main.js使用方法详解
    目录第一部分:main.js文件解析第二部分:Vue.use的作用以及什么时候使用Vue.use是什么?(官方文档)Vue.use()什么时候使用?补充:关于main.js方便小技巧...
    99+
    2022-11-13
  • vue项目中main.js如何使用
    在Vue项目中,main.js是整个项目的入口文件,可以在其中做一些初始化的操作。以下是一些常见的用法:1. 引入Vue和根组件:`...
    99+
    2023-08-09
    vue main.js
  • vue项目中main.js怎么使用
    这篇文章主要介绍了vue项目中main.js怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue项目中main.js怎么使用文章都会有所收获,下面我们一起来看看吧。第一部分:main.js文件解析src...
    99+
    2023-07-02
  • Vue 项目中Echarts 5使用方法详解
    目录前言创建项目基本使用安装使用方法柱状图动态排序柱状图前言 Echarts 是一个纯JavaScript的图表库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRende...
    99+
    2022-11-13
    Vue 项目使用Echarts 5 Vue Echarts 5
  • 详解vue项目中使用vuedraggable
    最近在学习一个可视化搭建的项目,里面用的拖拽就是draggable.js。看了几个中文的文档,有很多坑,可能是没有及时更新的原因。 VUe  建议去看vuedraggabl...
    99+
    2022-11-13
  • vue项目中使用TDesign的方法
    目录前言:一、使用vue-cli手脚架创建vue项目二、配置vue及vue模板编译器版本三、安装tdesign-vue和less四、测试常见错误前言: 本文只介绍如何在vue项目中配...
    99+
    2023-05-15
    vue使用TDesign vue TDesign
  • Vue项目中打包优化的四种方法详解
    目录前言打包优化的目的:性能优化的主要方向:1.异步组件配置(路由懒加载)2.去掉打包后的 console3.使用CDN4.yarn build生成dist目录总结前言 默认情况下,...
    99+
    2022-11-13
  • 在vue项目中使用Swiper插件详解
    目录vue项目使用Swiper插件第一步:下载Swiper插件 第二步:在对应的组件页面中导入该插件第三步: 编写对应的html部分第四步:在data中配置对应的参数vue...
    99+
    2023-01-14
    vue Swiper vue使用Swiper插件 vue Swiper插件
  • 详解Vue项目的打包方式
    目录一、相关配置情况一(使用的工具是 vue-cil)情况二(使用的工具是 webpack) 二、打包 总结一、相关配置 情况一(使用的工具是 vue-cil) ...
    99+
    2022-11-12
  • NodeJs使用webpack打包项目的方法详解
    目录WebpackWebPack的使用第一步:初始化项目:npm init -y第二步:新建 src/index.html第三步:安装模块Jquery npm i...
    99+
    2022-11-13
  • vue项目中使用骨架屏的方法
    现在的应用开发,基本上都是前后端分离的,前端主流框架有SPA、MPA等,那么解决页面渲染、白屏时间成为首要关注的点 webpack可以按需加载,减小首屏需要加载代码的体积; 使用CD...
    99+
    2022-11-12
  • Vue项目中使用addRoutes出现问题的解决方法
    目录前言 一、404页面 1. 出现的原因 2. 解决方案 二、刷新白屏 1. 出现原因 2. 解决方案 三、路由重复 1.  出现原因 2. 解决方案 总结前言 add...
    99+
    2022-11-12
  • Vue中watch使用方法详解
    目录前言watchimmediate和handlerdeep拓展前言 说到 vue 中的 watch 方法,大家可能首先想到,它是用来监听数据的变化,一旦数据发生变化可以执行一些其他...
    99+
    2023-01-28
    Vue watch用法 Vue watch原理
  • vue项目中使用this.$confirm解析
    目录vue使用this.$confirmvue TypeError: this.$confirm is not a function错误解决方案vue使用this.$confirm ...
    99+
    2022-11-13
  • vue项目中的this.$get,this.$post等$的用法案例详解
    vue官网上有这么一句话 vue.js的插件应该暴露一个install方法。这个方法的第一个参数是vue构造器,第二个参数是一个可选的选项对象: 注意要首先安装axios 即 np...
    99+
    2022-12-10
    vue 中的this.$get this.$post等$的用法 vue 中this.$get this.$post
  • Vue项目中封装axios的方法
    目录一、axios是什么特性基本使用二、为什么要封装三、如何封装设置接口请求前缀设置请求头与超时时间封装请求方法请求拦截器响应拦截器小结参考文献一、axios是什么 axios 是...
    99+
    2022-11-13
  • vue项目中使用AvueJs的详细教程
    目录一、背景二、项目中的运用1、引入2、table(avue-crud)的使用三、使用想法Avue是基于Vue.js和element的快速开发框架 它的核心是数据驱动UI的思想,让我...
    99+
    2022-11-13
  • Vue项目中接口调用的详细讲解
    在企业开发过程中,往往有着明确的前后端的分工,前端负责接收、使用接口,后端负责编写、处理接口。 对于前端如何使用接口,今天在Vue中进行讲解。 一个项目往往由这几个部分组成。 其中...
    99+
    2022-11-13
  • 在vue项目中引入scss并使用scss样式详解
    目录前言一、scss是什么?(和sass的区别)二、如何在vue项目中引入scss1.安装sass的依赖包2.sass-loader依赖于node-sass,安装node-sass3...
    99+
    2022-11-13
  • Vue中XMLHttpRequest的使用方法详解
    Vue中使用XMLHttpRequest(XHR)来获取数据的方式与传统的HTML页面相同。以下是Vue中XMLHttpRequest的详细使用方法: 1.创建XMLHttpRequ...
    99+
    2023-05-19
    Vue XMLHttpRequest使用方法 Vue XMLHttpRequest Vue XMLHttpRequest
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作