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' // 是否启动生产消息 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
二、Vue.prototype的作用与使用
把方法或属性放到Vue实例的原型上,全局可用,使用通过this.属性、this.方法。
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的作用以及什么时候使用
简单的说就是用来注册全局组件的
1、组件
Hello 组件
<template> <div> this is Hello... </div> </template>
World 组件
<template> <div> this is World... </div> </template>
2、定义一个index.js文件,并引入 两组件 ,并导出:
// 引入组件 import Hello from './Hello.vue' import World from './World.vue' // 定义 Loading 对象 const installObj = { // install 是默认的方法。当外界在 use 这个组件的时候,就会调用本身的 install 方法,同时传一个 Vue 这个类的参数。 install: function (Vue) { Vue.component('sayHello', Hello), Vue.component('sayWorld', World) } } // 导出 export default installObj
3、在 main.js 中引入index.js
import Vue from 'vue' import App from './App.vue' // 这里用什么名字,并不重要 import installObj from './/index' // 只要这里引用对就行 Vue.use(installObj) new Vue({ el: '#app', render: h => h(App) })
4、全局使用(不用引入直接可以使用)
<template> <div id="app"> <h1>vue install example</h1> <sayHello></sayHello> <sayWorld></sayWorld> </div> </template> <script> export default { name: 'app', data () { return {} } } </script>
结果:
四、文末总结:
- 就算没用独立引用
sayHello
和sayWorld
这两个组件,它俩依然可以被全局使用。Vue.use()
的作用就是让它里面被注册的组件能够被全局使用。 axios
为什么不需要用Vue.use(axios)
就能直接使用?
axios 内部并没有提供相应的组件供用户全局使用,开发者在封装 axios
时,根本就没有配置 install
。
就算 axios 内部提供了全局组件,只要不使用这些组件,就算不使用 Vue.use(axios)
进行注册,也不会报错。
提供 install 方法,只是为了让 Vue 可以将组件注册到框架里去,使其能够被全局使用。
到此这篇关于vue项目中main.js使用方法详解的文章就介绍到这了,更多相关vue main.js使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
这篇文章主要介绍了基于Vue3.0开发轻量级手机端弹框组件V3Popup,本文通过场景分析给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-12-12element ui提交表单返回成功后自动清空表单的值的实现代码
这篇文章主要介绍了elementui提交表单返回成功后自动清空表单的值,本文通过两种方法结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
这篇文章主要介绍了Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能,结合实例形式详细分析了Vue + Node.js + MongoDB基于图片上传组件实现图片预览和删除功能相关操作技巧,需要的朋友可以参考下2020-04-04
最新评论