快捷導(dǎo)航

vue項目中main.js的用法

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

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

一、main.js文件解析

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

//基礎(chǔ)配置
import Vue from 'vue'
import App from './App.vue'
  
//引入已經(jīng)配置好的路由和vuex
import router from './router'
import store from './store/store'
  
// 是否啟動生產(chǎn)消息
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的作用與使用

把方法或?qū)傩苑诺絍ue實例的原型上，全局可用，使用通過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'
// 是否啟動生產(chǎn)消息
Vue.config.productionTip = false
// 設(shè)置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文件，并引入兩組件，并導(dǎo)出：

// 引入組件
import Hello from './Hello.vue'
import World from './World.vue'
 
// 定義 Loading 對象
const installObj = {
  // install 是默認的方法。當外界在 use 這個組件的時候，就會調(diào)用本身的 install 方法，同時傳一個 Vue 這個類的參數(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'
 
// 只要這里引用對就行
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é)果：