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'
// 導(dǎo)入less(樣式的導(dǎo)入例子，css,less)
//import '@/assets/xxx.less'
//導(dǎo)入js(例如)
//import xxx from 'xxx.js'
// 是否啟動生產(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
// 其他js文件可以引用main.js的myVue實例從而調(diào)用myVue的router、store等等
//調(diào)用注意 main.$store,main.$router即使是vue原型鏈上的axios也可以被調(diào)用
//main.$axios
第二部分：Vue.use的作用以及什么時候使用
在Vue中引入使用第三方庫通常我們都會采用import的形式引入進來，但是有的組件在引入之后又做了Vue.use()操作，有的組件引入進來又進行了Vue.prototype.$something = something，那么它們之間有什么聯(lián)系呢？
- 先說一下Vue.prototype，在Vue項目中通常我們引入axios來進行請求接口數(shù)據(jù)，通過npm安裝之后我們只需在我們的文件中import axios from "axios"就可以使用，有時候我們會加上一句Vue.prototype.$axios = axios，prototype我們應(yīng)該是再熟悉不過了
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是什么？（官方文檔）
通過全局方法 Vue.use() 使用插件，Vue.use 會自動阻止多次注冊相同插件，它需要在你調(diào)用 new Vue() 啟動應(yīng)用之前完成，Vue.use() 方法至少傳入一個參數(shù)，該參數(shù)類型必須是 Object 或 Function，如果是 Object 那么這個 Object 需要定義一個 install 方法，如果是 Function 那么這個函數(shù)就被當(dāng)做 install 方法。在 Vue.use() 執(zhí)行時 install 會默認(rèn)執(zhí)行，當(dāng) install 執(zhí)行時第一個參數(shù)就是 Vue，其他參數(shù)是 Vue.use() 執(zhí)行時傳入的其他參數(shù)。就是說使用它之后調(diào)用的是該組件的install 方法。
Vue.use()什么時候使用？
它在使用時實際是調(diào)用了該插件的install方法，所以引入的當(dāng)前插件如果含有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)
// 是否啟動生產(chǎn)消息
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
利用 Vue.use 統(tǒng)一全局注冊組件
說明:
- Vue.use 可以接收一個對象, Vue.use(obj)
- 對象中需要提供一個 install 函數(shù)
- install 函數(shù)可以拿到參數(shù) Vue, 且將來會在 Vue.use 時, 自動調(diào)用該 install 函數(shù)
第一步：提供統(tǒng)一注冊的入口文件 src/componets/index.js
// 該文件負(fù)責(zé)所有的公共組件的全局注冊
// 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)
補充：關(guān)于main.js方便小技巧
首先我先舉個例子：
在開發(fā)的過程中有一個發(fā)送短信的接口需要聯(lián)調(diào)，而我們在聯(lián)調(diào)接口的時候需要傳手機號，而好多的頁面都有發(fā)送短信的功能。如果我們每次聯(lián)調(diào)接口的時候都把手機號寫死傳給后端，這樣就很麻煩了，那么我們可以利用main.js全局定義的方法進行操作了，那么我們就大大提高了效率!
首先我們上代碼
main.js
const sendPhoneNumber = {applyPhone:"123456789",approvalPhone:"987654321"};
Vue.prototype.sendPhoneNumber = sendPhoneNumber;
在頁面上聯(lián)調(diào)接口的時候可以直接寫
this.sendPhoneNumber.applyPhone this.sendPhoneNumber.approvalPhone
這樣就大大方便了我們，就可以不用每次再一個頁面一個頁面進行修改了
總結(jié)
到此這篇關(guān)于vue項目中main.js使用方法的文章就介紹到這了,更多相關(guān)vue項目main.js使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了WebPack配置vue多頁面的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
Vue中使用iframe踩坑問題記錄 iframe+postMessage
這篇文章主要介紹了Vue中使用iframe踩坑問題記錄 iframe+postMessage，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了關(guān)于Vue中的watch監(jiān)視屬性,Vue中的watch默認(rèn)不監(jiān)視對象內(nèi)部值的改變,當(dāng)被監(jiān)視的屬性變化時，回調(diào)函數(shù)自動調(diào)用，進行相關(guān)操作,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue2使用?element表格展開功能渲染子表格的方式,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
在Vue應(yīng)用中,跨標(biāo)簽頁的通信通常涉及到兩個或多個瀏覽器標(biāo)簽頁之間的信息共享,由于每個標(biāo)簽頁或窗口都是獨立的JavaScript執(zhí)行環(huán)境,它們不能直接通過Vue或其他JavaScript庫來直接相互通信,但是,有一些方法可以實現(xiàn)這種跨標(biāo)簽頁的通信,以下是一些常用的跨標(biāo)簽頁通信方法2025-03-03
Vue使用pdf-lib實現(xiàn)為文件流添加水印并預(yù)覽
這篇文章主要為大家詳細(xì)介紹了Vue如何使用pdf-lib實現(xiàn)為文件流添加水印并預(yù)覽的功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下2023-03-03
在vue中根據(jù)光標(biāo)的顯示與消失實現(xiàn)下拉列表
這篇文章主要介紹了在vue中根據(jù)光標(biāo)的顯示與消失實現(xiàn)下拉列表，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了在 Vue 中編寫 SVG 圖標(biāo)組件的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
這篇文章主要給大家介紹了關(guān)于Vue如何實現(xiàn)分頁功能的相關(guān)資料,Vue分頁功能的實現(xiàn)需要前端和后端共同配合完成,文中通過代碼實例介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
vue element插件this.$confirm用法及說明(取消也可以發(fā)請求)
這篇文章主要介紹了vue element插件this.$confirm用法及說明(取消也可以發(fā)請求)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10