vue項目中main.js怎么使用

這篇文章主要介紹了vue項目中main.js怎么使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇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'
 
// 導入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.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 會自動阻止多次注冊相同插件，它需要在你調用 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 統一全局注冊組件

說明:

1. Vue.use 可以接收一個對象, Vue.use(obj)

2. 對象中需要提供一個 install 函數

3. 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

這樣就大大方便了我們，就可以不用每次再一個頁面一個頁面進行修改了

關于“vue項目中main.js怎么使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue項目中main.js怎么使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。