Vue開(kāi)發(fā)實(shí)踐指南之應(yīng)用入口
前言
Vue 開(kāi)發(fā)實(shí)踐為本人的最佳實(shí)踐，非業(yè)內(nèi)最佳，僅用于提供給各位做參考，這是系列文，但發(fā)布時(shí)間和內(nèi)容不固定。
通常情況下一個(gè) 前端工程 只會(huì)導(dǎo)出 一個(gè) 前端單頁(yè)應(yīng)用，而 main.js 就是這個(gè)應(yīng)用的入口文件。
創(chuàng)建應(yīng)用
默認(rèn)情況下 src/main.js 是直接初始化一個(gè) Vue 應(yīng)用
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
new Vue({
store,
router,
render: h => h(App)
}).$mount('#app')但在后臺(tái)類項(xiàng)目中，應(yīng)用在被用戶可操作前，一定是需要登錄的，這就導(dǎo)致很多時(shí)候，我們會(huì)套一個(gè)函數(shù)。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
function render() {
new Vue({
store,
router,
render: h => h(App)
}).$mount('#app')
}這樣只要不調(diào)用 render 函數(shù)，那么應(yīng)用就不會(huì)被創(chuàng)建，用戶也就無(wú)法操作。
添加 Loading 效果
但這樣會(huì)導(dǎo)致頁(yè)面處于空白狀態(tài)，為了友好，可以加一些加載動(dòng)畫效果.
打開(kāi) public/index.html 文件，將你的 Loading 效果放在 div#app 中。
<body>
<div id="app">
<!-- 這里寫你的 Loading 動(dòng)畫 -->
</div>
</body>當(dāng)我們創(chuàng)建應(yīng)用，Vue 會(huì)自動(dòng)清空 div#app 里面的內(nèi)容，所以不需要關(guān)系初始化后的清理工作。
開(kāi)始創(chuàng)建應(yīng)用
當(dāng)有了 Loading 動(dòng)畫之后，我們就可以去獲取，如 授權(quán)認(rèn)證 和 菜單獲取 等操作。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
function render() {
new Vue({
store,
router,
render: h => h(App)
}).$mount('#app')
}
async function main() {
// 獲取用戶信息，沒(méi)有就跳轉(zhuǎn)到登錄頁(yè)
// 獲取菜單數(shù)據(jù)
}
main().then(render)一旦數(shù)據(jù)準(zhǔn)備完畢，應(yīng)用就顯示了，就不會(huì)出現(xiàn)應(yīng)用一閃而過(guò)的問(wèn)題了。
多頁(yè)面改造
正常而言，一個(gè) 前端工程 只會(huì)存在一個(gè) 前端應(yīng)用，也就是比較熟悉的 SPA 模式，但有時(shí)候也需要導(dǎo)出多個(gè) html 文件，每一個(gè) html 文件都對(duì)應(yīng)一個(gè) Vue 實(shí)例，這種開(kāi)發(fā)模式也被稱為 MPA 模式。
但不管是 SPA 還是 MPA，對(duì)于工程而言，源碼都是放在一起的，所以配置都是一樣的。
Vue CLI 默認(rèn)的應(yīng)用類型是 SPA 單頁(yè)應(yīng)用，但在提供了 pages 字段。
// vue.config.js
module.exports = {
// 詳見(jiàn) https://cli.vuejs.org/zh/config/#pages
pages: {
index: {
title: '首頁(yè)',
entry: 'src/main.js',
},
login: {
title: '登錄頁(yè)',
entry: 'src/login.js',
},
}
}添加 登錄頁(yè) 的 應(yīng)用入口 和 應(yīng)用視圖 文件
├── src/ │ ├── views/ +│ │ └── login/ +│ │ └── Login.vue # 應(yīng)用視圖 +│ ├── login.js # 應(yīng)用入口 │ └── main.js ├── vue.config.js └── package.json
創(chuàng)建視圖文件
<template> <!-- src/login/Login.vue --> <div> This is login page</div> </template>
創(chuàng)建應(yīng)用入口
// /src/login.js
import Vue from 'vue'
import Login from './views/login/Login.vue'
new Vue({
render: h => h(Login)
}).$mount('#app')重啟你的應(yīng)用
# 啟動(dòng)之后，在當(dāng)前項(xiàng)目項(xiàng)目地址后面加上 login.html 就可以看到新增的頁(yè)面了 $ open http://localhost:8080/login.html
總結(jié)
到此這篇關(guān)于Vue開(kāi)發(fā)實(shí)踐指南之應(yīng)用入口的文章就介紹到這了,更多相關(guān)Vue應(yīng)用入口內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue.js將時(shí)間戳轉(zhuǎn)化為日期格式的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue.js將時(shí)間戳轉(zhuǎn)化為日期格式的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了rem使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue.js項(xiàng)目在apache服務(wù)器部署問(wèn)題解決
本文主要介紹了Vue.js項(xiàng)目在apache服務(wù)器部署問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了vue3?封裝自定義組件v-model及自定義組件使用v-model，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07
vue 組件使用中的一些細(xì)節(jié)點(diǎn)
這篇文章主要介紹了vue 組件使用中的一些細(xì)節(jié)點(diǎn)，大概有兩大細(xì)節(jié)點(diǎn)，本文通過(guò)基礎(chǔ)實(shí)例給大家介紹的非常詳細(xì)，需要的朋友參考下吧2018-04-04
詳解如何實(shí)現(xiàn)在Vue中導(dǎo)入Excel文件
這篇文章主要介紹了如何在Vue中導(dǎo)入Excel文件，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)或工作有一定幫助，感興趣的小伙伴可以跟隨小編一起了解一下2022-01-01
本文主要介紹了element可編輯表格驗(yàn)證問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要為大家詳細(xì)介紹了基于Vue實(shí)現(xiàn)圖書管理功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Vue異步請(qǐng)求導(dǎo)致頁(yè)面數(shù)據(jù)渲染錯(cuò)誤問(wèn)題解決方法示例
這篇文章主要為大家介紹了Vue中異步請(qǐng)求導(dǎo)致頁(yè)面數(shù)據(jù)渲染錯(cuò)誤問(wèn)題解決方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
最近一直在做 Vue項(xiàng)目代碼層面上的優(yōu)化，寫文章是很easy的事情，今天小編給大家分享Vue.js 父子組件通信的十種方式，感興趣的的朋友跟隨小編一起看看吧2018-10-10