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 統一全局註冊組件
說明:
- Vue.use 可以接收一個對象, Vue.use(obj)
- 對象中需要提供一個 install 函數
- 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使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue項目中如何封裝axios(統一管理http請求)
- Vue中 Vue.prototype使用詳解
- Vue項目中token驗證登錄(前端部分)
- Vue開發實踐指南之應用入口
- vue獲取token實現token登錄的示例代碼