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

　　我们都知道初始化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.cloudads.cn/archives/3905.html

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

相关推荐

发表评论