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

3403771864 发布于2022-09-28 23:24 / 872人阅读

　　我们都知道初始化vue实例就是main.js，并且它还需要插件，现在我们就讨论下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的引入使用第三方库通常我们都会采用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() 使用插件，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 统一全局注册组件

　　说明:

　　Vue.use 可以接收一个对象, Vue.use(obj)

　　对象中需要提供一个 install 函数

　　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

　　这样一改就不必在在一个页面一个页面进行修改了，调用就调动就简单很多。

　　请大家多多关注后续更多精彩内容。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/127855.html

详解 mpvue 小程序框架及和原生的差异

摘要：在这一步，实例已完成以下的配置数据观测，属性和方法的运算，事件回调。可以直接写等标签的写法之前会的工程师上手框架的成本较低简介 1.美团工程师推出的基于Vue.js封装的用于开发小程序的框架2.融合了原生小程序和Vue.js的特点3.可完全组件化开发特点 1.组件化开发2.完成的Vue.js开发体验(前提是熟悉Vue)3.可使用Vuex管理状态4.Webpack构建项目5.最终H5...

IamDLY 2019-08-26 13:52 评论0 收藏0
详解Vue服务端渲染

摘要：二服务端渲染初体验使用的服务端渲染功能，需要引入提供的服务端渲染模块，其作用是创建一个渲染器，该渲染器可以将实例渲染成字符串。详解Vue服务端渲染一、服务端渲染 - 简介所谓服务端渲染就是将代码的渲染交给服务器，服务器将渲染好的html字符串返回给客户端，再由客户端进行显示。服务器端渲染的优点有利于SEO搜索引擎优化，因为服务端渲染是将渲染好的html字符串返回给了客户端，...

Paul_King 2019-08-26 10:33 评论0 收藏0
vue-cli 构建 vue 项目详解

摘要：打开浏览器输入，会看到构建的项目的主页目录结构使用编辑器打开推荐使用，下面具体看看目录结构在中，根据我们在构建项目的时候的选项，有以下几个命令。构建一个 vue 项目最简单的方式就是使用脚手架工具 vue-cli 。前端的三大框架都有自己的脚手架工具，其作用就是用配置好的模板迅速搭建起一个项目工程来，省去自己配置 webpack 配置文件的基本内容，大大降低了初学者构建项目的难度。这...

JeOam 2019-08-23 14:59 评论0 收藏0
vue插件开发流程详解-从开发到发布至npm（二）

摘要：使用插件安装使用测试访问页面注意大大的红字，如果要在本项目下测试，需要修改项目名称，不然报项目名字和包名字是一致的错，无法安装的如下结束语这个笔记继上一篇插件开发流程详解从开发到发布至一，替换了开发和测试的项目架构。　　前记：上一篇 https://www.cnblogs.com/adouw...，说到了一个完整的vue插件开发、发布的流程，总结下来就讲了这么一个事，如何注入vue,...

Flink_China 2019-08-23 12:00 评论0 收藏0
vue开发项目完全指南

摘要：有两种方法，一种是在开发环境中设置通过的，另一种是在服务器上修改的配置设置。这样我们以后使用访问接口就可以不加了，打包后访问也不用手动去除统一管理在项目开发过程中，会涉及到很多接口的处理，当项目足够大时，就需要统一管理接口。这篇文章总结了vue项目的所遇到的问题，包括跨域、用户认证、接口统一管理、路由配置、兼容性处理，性能优化等内容。项目github地址 : 前端 https:...

leoperfect 2019-08-23 16:16 评论0 收藏0