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ǎo)入less(樣式的導(dǎo)入例子,css,less) //import '@/assets/xxx.less' //導(dǎo)入js(例如) //import xxx from 'xxx.js' // 是否啟動(dòng)生產(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實(shí)例從而調(diào)用myVue的router、store等等 //調(diào)用注意 main.$store,main.$router即使是vue原型鏈上的axios也可以被調(diào)用 //main.$axios
第二部分:Vue.use的作用以及什么時(shí)候使用
在Vue中引入使用第三方庫通常我們都會(huì)采用import的形式引入進(jìn)來,但是有的組件在引入之后又做了Vue.use()操作,有的組件引入進(jìn)來又進(jìn)行了Vue.prototype.$something = something,那么它們之間有什么聯(lián)系呢?
- 先說一下Vue.prototype,在Vue項(xiàng)目中通常我們引入axios來進(jìn)行請(qǐng)求接口數(shù)據(jù),通過npm安裝之后我們只需在我們的文件中import axios from "axios"就可以使用,有時(shí)候我們會(huì)加上一句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' // 是否啟動(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組件的文件中, //可以通過this.$http直接來使用axios new Vue({ router, store, render: h => h(App) }).$mount('#app')
Vue.use是什么?(官方文檔)
通過全局方法 Vue.use() 使用插件,Vue.use 會(huì)自動(dòng)阻止多次注冊(cè)相同插件,它需要在你調(diào)用 new Vue() 啟動(dòng)應(yīng)用之前完成,Vue.use() 方法至少傳入一個(gè)參數(shù),該參數(shù)類型必須是 Object 或 Function,如果是 Object 那么這個(gè) Object 需要定義一個(gè) install 方法,如果是 Function 那么這個(gè)函數(shù)就被當(dāng)做 install 方法。在 Vue.use() 執(zhí)行時(shí) install 會(huì)默認(rèn)執(zhí)行,當(dāng) install 執(zhí)行時(shí)第一個(gè)參數(shù)就是 Vue,其他參數(shù)是 Vue.use() 執(zhí)行時(shí)傳入的其他參數(shù)。就是說使用它之后調(diào)用的是該組件的install 方法。
Vue.use()什么時(shí)候使用?
它在使用時(shí)實(shí)際是調(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' // 注冊(cè)elementUi import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) // 是否啟動(dòng)生產(chǎn)消息 Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')
利用 Vue.use 統(tǒng)一全局注冊(cè)組件
說明:
- Vue.use 可以接收一個(gè)對(duì)象, Vue.use(obj)
- 對(duì)象中需要提供一個(gè) install 函數(shù)
- install 函數(shù)可以拿到參數(shù) Vue, 且將來會(huì)在 Vue.use 時(shí), 自動(dòng)調(diào)用該 install 函數(shù)
第一步:提供統(tǒng)一注冊(cè)的入口文件 src/componets/index.js
// 該文件負(fù)責(zé)所有的公共組件的全局注冊(cè) // vue插件機(jī)制: Vue.use import PageTools from './PageTools' export default { install(Vue) { Vue.component('PageTools', PageTools) } }
第二步:在入口處進(jìn)行注冊(cè) src/main.js Vue.use 注冊(cè)使用自己的插件模塊
import Components from './components' Vue.use(Components)
補(bǔ)充:關(guān)于main.js方便小技巧
首先我先舉個(gè)例子:
在開發(fā)的過程中有一個(gè)發(fā)送短信的接口需要聯(lián)調(diào),而我們?cè)诼?lián)調(diào)接口的時(shí)候需要傳手機(jī)號(hào),而好多的頁面都有發(fā)送短信的功能。如果我們每次聯(lián)調(diào)接口的時(shí)候都把手機(jī)號(hào)寫死傳給后端,這樣就很麻煩了,那么我們可以利用main.js全局定義的方法進(jìn)行操作了,那么我們就大大提高了效率!
首先我們上代碼
main.js const sendPhoneNumber = {applyPhone:"123456789",approvalPhone:"987654321"}; Vue.prototype.sendPhoneNumber = sendPhoneNumber;
在頁面上聯(lián)調(diào)接口的時(shí)候可以直接寫
this.sendPhoneNumber.applyPhone this.sendPhoneNumber.approvalPhone
這樣就大大方便了我們,就可以不用每次再一個(gè)頁面一個(gè)頁面進(jìn)行修改了
總結(jié)
到此這篇關(guān)于vue項(xiàng)目中main.js使用方法的文章就介紹到這了,更多相關(guān)vue項(xiàng)目main.js使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue如何在用戶要關(guān)閉當(dāng)前網(wǎng)頁時(shí)彈出提示的實(shí)現(xiàn)
這篇文章主要介紹了vue如何在用戶要關(guān)閉當(dāng)前網(wǎng)頁時(shí)彈出提示的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05Vue2中Element?DatePicker組件設(shè)置默認(rèn)日期及控制日期范圍
后臺(tái)項(xiàng)目想使用時(shí)間選擇器選擇一段時(shí)間進(jìn)行數(shù)據(jù)篩選,所以下面這篇文章主要給大家介紹了關(guān)于Vue2中Element?DatePicker組件設(shè)置默認(rèn)日期及控制日期范圍的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11VUE設(shè)置和清除定時(shí)器的方式及遇到的問題
?最近需要再頁面里做個(gè)倒計(jì)時(shí),發(fā)現(xiàn)用clearInterval()清除定時(shí)器失效,下面這篇文章主要給大家介紹了關(guān)于VUE設(shè)置和清除定時(shí)器的方式及遇到的問題的相關(guān)資料,需要的朋友可以參考下2022-10-10vue無法加載文件C:\xx\AppData\Roaming\npm\vue.ps1系統(tǒng)禁止運(yùn)行腳本
這篇文章主要介紹了vue?:?無法加載文件?C:\xx\AppData\Roaming\npm\vue.ps1...系統(tǒng)上禁止運(yùn)行腳本問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07Vue中的基礎(chǔ)過渡動(dòng)畫及實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue中的基礎(chǔ)過渡動(dòng)畫原理解析,需要的朋友可以參考下2018-12-12