这篇文章主要介绍了Vue项目中main.js怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue项目中main.js怎么使用文章都会有所收获,下面我们一起来看看吧。第一部分:main.js文件解析src
这篇文章主要介绍了Vue项目中main.js怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue项目中main.js怎么使用文章都会有所收获,下面我们一起来看看吧。
src/main.js是入口文件,主要作用是初始化vue实例并使用需要的插件
在main.js文件中定义了一个vue对象,其中el为实例提供挂载元素
//基础配置import Vue from 'vue'import App from './App.vue' //引入已经配置好的路由和vueximport 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中引入使用第三方库通常我们都会采用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直接来使用axiosnew Vue({ router, store, render: h => h(App)}).$mount('#app')
通过全局方法 Vue.use() 使用插件,Vue.use 会自动阻止多次注册相同插件,它需要在你调用 new Vue() 启动应用之前完成,Vue.use() 方法至少传入一个参数,该参数类型必须是 Object 或 Function,如果是 Object 那么这个 Object 需要定义一个 install 方法,如果是 Function 那么这个函数就被当做 install 方法。在 Vue.use() 执行时 install 会默认执行,当 install 执行时第一个参数就是 Vue,其他参数是 Vue.use() 执行时传入的其他参数。就是说使用它之后调用的是该组件的install 方法。
它在使用时实际是调用了该插件的install方法,所以引入的当前插件如果含有install方法我们就需要使用Vue.use(),例如在Vue中引用Element如下:
import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'// 注册elementUiimport ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)// 是否启动生产消息Vue.config.productionTip = falsenew 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.useimport 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.jsconst sendPhoneNumber = {applyPhone:"123456789",approvalPhone:"987654321"};Vue.prototype.sendPhoneNumber = sendPhoneNumber;
在页面上联调接口的时候可以直接写
this.sendPhoneNumber.applyPhonethis.sendPhoneNumber.approvalPhone
这样就大大方便了我们,就可以不用每次再一个页面一个页面进行修改了
关于“vue项目中main.js怎么使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue项目中main.js怎么使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网精选频道。
--结束END--
本文标题: vue项目中main.js怎么使用
本文链接: https://www.lsjlt.com/news/343439.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0