Vue開發(fā)實踐指南之應(yīng)用入口
前言
Vue 開發(fā)實踐為本人的最佳實踐，非業(yè)內(nèi)最佳，僅用于提供給各位做參考，這是系列文，但發(fā)布時間和內(nèi)容不固定。
通常情況下一個 前端工程 只會導(dǎo)出 一個 前端單頁應(yīng)用，而 main.js 就是這個應(yīng)用的入口文件。
創(chuàng)建應(yīng)用
默認(rèn)情況下 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)用在被用戶可操作前，一定是需要登錄的，這就導(dǎo)致很多時候，我們會套一個函數(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 效果
但這樣會導(dǎo)致頁面處于空白狀態(tài)，為了友好，可以加一些加載動畫效果.
打開 public/index.html 文件，將你的 Loading 效果放在 div#app 中。
<body>
<div id="app">
<!-- 這里寫你的 Loading 動畫 -->
</div>
</body>當(dāng)我們創(chuàng)建應(yīng)用，Vue 會自動清空 div#app 里面的內(nèi)容，所以不需要關(guān)系初始化后的清理工作。
開始創(chuàng)建應(yīng)用
當(dāng)有了 Loading 動畫之后，我們就可以去獲取，如 授權(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() {
// 獲取用戶信息，沒有就跳轉(zhuǎn)到登錄頁
// 獲取菜單數(shù)據(jù)
}
main().then(render)一旦數(shù)據(jù)準(zhǔn)備完畢，應(yīng)用就顯示了，就不會出現(xiàn)應(yīng)用一閃而過的問題了。
多頁面改造
正常而言，一個 前端工程 只會存在一個 前端應(yīng)用，也就是比較熟悉的 SPA 模式，但有時候也需要導(dǎo)出多個 html 文件，每一個 html 文件都對應(yīng)一個 Vue 實例，這種開發(fā)模式也被稱為 MPA 模式。
但不管是 SPA 還是 MPA，對于工程而言，源碼都是放在一起的，所以配置都是一樣的。
Vue CLI 默認(rèn)的應(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)用
# 啟動之后，在當(dā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仿淘寶收貨地址并設(shè)置默認(rèn)地址的案例分析
這篇文章主要介紹了基于vue.js仿淘寶收貨地址并設(shè)置默認(rèn)地址的案例分析,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
最近小編遇到這樣的需求，要實現(xiàn)一個新聞?wù)故卷摴δ埽瑒偨拥竭@樣的需求還真是一頭霧水，不知從哪入手，今天小編通過實例代碼給大家介紹下vue實現(xiàn)新聞?wù)故卷摰牟襟E詳解，感興趣的朋友跟隨小編一起看看吧2019-04-04
vue實現(xiàn)兩個組件之間數(shù)據(jù)共享和修改操作
這篇文章主要介紹了vue實現(xiàn)兩個組件之間數(shù)據(jù)共享和修改操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
atom-design(Vue.js移動端組件庫)手勢組件使用教程
這篇文章主要介紹了atom-design(Vue.js移動端組件庫)手勢組件使用教程,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了詳解Vue template 如何支持多個根結(jié)點，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了Vue組件的層級關(guān)系，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Spring Boot/VUE中路由傳遞參數(shù)的實現(xiàn)代碼
在路由時傳遞參數(shù)，一般有兩種形式，一種是拼接在url地址中，另一種是查詢參數(shù)。這篇文章主要介紹了Spring Boot/VUE中路由傳遞參數(shù),需要的朋友可以參考下2018-03-03
關(guān)于echarts?清空上一次加載的數(shù)據(jù)問題
這篇文章主要介紹了關(guān)于echarts?清空上一次加載的數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue仿ios列表左劃刪除，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
vue axios數(shù)據(jù)請求get、post方法及實例詳解
axios是一個基于Promise,同時支持瀏覽器端和Node.js的HTTP庫，常用于Ajax請求。這篇文章主要介紹了vue axios數(shù)據(jù)請求get、post方法的使用 ,需要的朋友可以參考下2018-09-09