快捷導(dǎo)航

vue項(xiàng)目中main.js的用法

更新時(shí)間：2023年10月14日 14:53:05 作者：鄭建007

src/main.js是入口文件,主要作用是初始化vue實(shí)例并使用需要的插件, Vue.use()的作用就是讓它里面被注冊(cè)的組件能夠被全局使用,本文通過(guò)實(shí)例代碼介紹vue項(xiàng)目中main.js的用法,感興趣的朋友一起看看吧

一、main.js文件解析

src/main.js是入口文件，主要作用是初始化vue實(shí)例并使用需要的插件
在main.js文件中定義了一個(gè)vue對(duì)象,其中el為實(shí)例提供掛載元素

//基礎(chǔ)配置
import Vue from 'vue'
import App from './App.vue'
  
//引入已經(jīng)配置好的路由和vuex
import router from './router'
import store from './store/store'
  
// 是否啟動(dòng)生產(chǎn)消息
Vue.config.productionTip = false
  
//第一種寫(xiě)法
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
  
//第二種寫(xiě)法
const myVue=new Vue({
  el:'#app',
  router,
  store,
  render: h => h(App)
})
  
export default myVue

二、Vue.prototype的作用與使用

把方法或?qū)傩苑诺絍ue實(shí)例的原型上，全局可用，使用通過(guò)this.屬性、this.方法。

import Vue from 'vue'
import App from './App.vue'
//路由導(dǎo)入
import router from './router'
//vuex導(dǎo)入
import store from './store'
//npm下載好的三方axios包
import axios from 'axios'
// 是否啟動(dòng)生產(chǎn)消息
Vue.config.productionTip = false
// 設(shè)置axios的請(qǐng)求根路徑
axios.defaults.baseURL = 'url'
// 把 axios 掛載到 Vue.prototype 上
Vue.prototype.$http = axios
//其實(shí)是在Vue原型上增加了一個(gè)$http，然后在其余的vue組件的文件中,
//可以通過(guò)this.$http直接來(lái)使用axios
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

三、Vue.use的作用以及什么時(shí)候使用

簡(jiǎn)單的說(shuō)就是用來(lái)注冊(cè)全局組件的

1、組件

Hello 組件

<template>
    <div>
        this is Hello...
    </div>
</template>

World 組件

<template>
    <div>
        this is World...
    </div>
</template>

2、定義一個(gè)index.js文件，并引入兩組件，并導(dǎo)出：

// 引入組件
import Hello from './Hello.vue'
import World from './World.vue'
 
// 定義 Loading 對(duì)象
const installObj = {
  // install 是默認(rèn)的方法。當(dāng)外界在 use 這個(gè)組件的時(shí)候，就會(huì)調(diào)用本身的 install 方法，同時(shí)傳一個(gè) Vue 這個(gè)類的參數(shù)。
  install: function (Vue) {
    Vue.component('sayHello', Hello),
    Vue.component('sayWorld', World)
  }
}
 
// 導(dǎo)出
export default installObj

3、在 main.js 中引入index.js

import Vue from 'vue'
import App from './App.vue'
// 這里用什么名字，并不重要
import installObj from './/index'
 
// 只要這里引用對(duì)就行
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>

結(jié)果：