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