資訊專欄INFORMATION COLUMN
我們都知道初始化vue實(shí)例就是main.js，并且它還需要插件，現(xiàn)在我們就討論下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中引入使用第三方庫(kù)通常我們都會(huì)采用import的形式引入進(jìn)來，但是有的組件在引入之后又做了Vue.use()操作，有的組件引入進(jìn)來又進(jìn)行了Vue.prototype.$something = something，那么它們之間有什么聯(lián)系呢？
我們想大家Vue的引入使用第三方庫(kù)通常我們都會(huì)采用import的形式引入進(jìn)來，還有一種就是有的組件在引入之后又做了Vue.use()操作，再有就是引入進(jìn)來又進(jìn)行了Vue.prototype.$something = something，安這三種方式都有什么關(guān)聯(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如何使用？（官方文檔）
現(xiàn)在我們說說Vue.use使用方法，如果通過全局方法 Vue.use() 使用插件，Vue.use 就自動(dòng)阻止多次注冊(cè)相同插件，由此，我們要換個(gè)思路調(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)，而好多的頁(yè)面都有發(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;在頁(yè)面上聯(lián)調(diào)接口的時(shí)候可以直接寫
this.sendPhoneNumber.applyPhone this.sendPhoneNumber.approvalPhone
這樣一改就不必在在一個(gè)頁(yè)面一個(gè)頁(yè)面進(jìn)行修改了，調(diào)用就調(diào)動(dòng)就簡(jiǎn)單很多。
請(qǐng)大家多多關(guān)注后續(xù)更多精彩內(nèi)容。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/127855.html
摘要：在這一步，實(shí)例已完成以下的配置數(shù)據(jù)觀測(cè)，屬性和方法的運(yùn)算，事件回調(diào)?？梢灾苯訉懙葮?biāo)簽的寫法之前會(huì)的工程師上手框架的成本較低 簡(jiǎn)介 1.美團(tuán)工程師推出的基于Vue.js封裝的用于開發(fā)小程序的框架2.融合了原生小程序和Vue.js的特點(diǎn)3.可完全組件化開發(fā) 特點(diǎn) 1.組件化開發(fā)2.完成的Vue.js開發(fā)體驗(yàn)(前提是熟悉Vue)3.可使用Vuex管理狀態(tài)4.Webpack構(gòu)建項(xiàng)目5.最終H5...
摘要：二服務(wù)端渲染初體驗(yàn)使用的服務(wù)端渲染功能，需要引入提供的服務(wù)端渲染模塊，其作用是創(chuàng)建一個(gè)渲染器，該渲染器可以將實(shí)例渲染成字符串。 詳解Vue服務(wù)端渲染 一、服務(wù)端渲染 - 簡(jiǎn)介 所謂服務(wù)端渲染就是將代碼的渲染交給服務(wù)器，服務(wù)器將渲染好的html字符串返回給客戶端，再由客戶端進(jìn)行顯示。 服務(wù)器端渲染的優(yōu)點(diǎn) 有利于SEO搜索引擎優(yōu)化，因?yàn)榉?wù)端渲染是將渲染好的html字符串返回給了客戶端，...
摘要：打開瀏覽器輸入，會(huì)看到構(gòu)建的項(xiàng)目的主頁(yè)目錄結(jié)構(gòu)使用編輯器打開推薦使用，下面具體看看目錄結(jié)構(gòu)在中，根據(jù)我們?cè)跇?gòu)建項(xiàng)目的時(shí)候的選項(xiàng)，有以下幾個(gè)命令。 構(gòu)建一個(gè) vue 項(xiàng)目最簡(jiǎn)單的方式就是使用腳手架工具 vue-cli 。前端的三大框架都有自己的腳手架工具，其作用就是用配置好的模板迅速搭建起一個(gè)項(xiàng)目工程來，省去自己配置 webpack 配置文件的基本內(nèi)容，大大降低了初學(xué)者構(gòu)建項(xiàng)目的難度。這...
摘要：使用插件安裝使用測(cè)試訪問頁(yè)面注意大大的紅字，如果要在本項(xiàng)目下測(cè)試，需要修改項(xiàng)目名稱，不然報(bào)項(xiàng)目名字和包名字是一致的錯(cuò)，無法安裝的如下結(jié)束語(yǔ)這個(gè)筆記繼上一篇插件開發(fā)流程詳解從開發(fā)到發(fā)布至一，替換了開發(fā)和測(cè)試的項(xiàng)目架構(gòu)。 前記：上一篇 https://www.cnblogs.com/adouw...，說到了一個(gè)完整的vue插件開發(fā)、發(fā)布的流程，總結(jié)下來就講了這么一個(gè)事，如何注入vue,...
摘要：有兩種方法，一種是在開發(fā)環(huán)境中設(shè)置通過的，另一種是在服務(wù)器上修改的配置設(shè)置。這樣我們以后使用訪問接口就可以不加了，打包后訪問也不用手動(dòng)去除統(tǒng)一管理在項(xiàng)目開發(fā)過程中，會(huì)涉及到很多接口的處理，當(dāng)項(xiàng)目足夠大時(shí)，就需要統(tǒng)一管理接口。 這篇文章總結(jié)了vue項(xiàng)目的所遇到的問題，包括跨域、用戶認(rèn)證、接口統(tǒng)一管理、路由配置、兼容性處理，性能優(yōu)化等內(nèi)容。 項(xiàng)目github地址 : 前端 https:...
閱讀 561·2023-03-27 18:33
閱讀 750·2023-03-26 17:27
閱讀 647·2023-03-26 17:14
閱讀 603·2023-03-17 21:13
閱讀 537·2023-03-17 08:28
閱讀 1823·2023-02-27 22:32
閱讀 1315·2023-02-27 22:27
閱讀 2199·2023-01-20 08:28
