溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Vue怎么創建應用入口”，在日常操作中，相信很多人在Vue怎么創建應用入口問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue怎么創建應用入口”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
默認情況下 src/main.js 是直接初始化一個 Vue 應用
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')但在后臺類項目中，應用在被用戶可操作前，一定是需要登錄的，這就導致很多時候，我們會套一個函數。
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')
}這樣只要不調用 render 函數，那么應用就不會被創建，用戶也就無法操作。
但這樣會導致頁面處于空白狀態，為了友好，可以加一些加載動畫效果.
打開 public/index.html 文件，將你的 Loading 效果放在 div#app 中。
<body> <div id="app"> <!-- 這里寫你的 Loading 動畫 --> </div> </body>
當我們創建應用，Vue 會自動清空 div#app 里面的內容，所以不需要關系初始化后的清理工作。
當有了 Loading 動畫之后，我們就可以去獲取，如 授權認證 和 菜單獲取 等操作。
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() {
// 獲取用戶信息，沒有就跳轉到登錄頁
// 獲取菜單數據
}
main().then(render)一旦數據準備完畢，應用就顯示了，就不會出現應用一閃而過的問題了。
正常而言，一個 前端工程 只會存在一個 前端應用，也就是比較熟悉的 SPA 模式，但有時候也需要導出多個 html 文件，每一個 html 文件都對應一個 Vue 實例，這種開發模式也被稱為 MPA 模式。
但不管是 SPA 還是 MPA，對于工程而言，源碼都是放在一起的，所以配置都是一樣的。
Vue CLI 默認的應用類型是 SPA 單頁應用，但在提供了 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',
},
}
}添加 登錄頁 的 應用入口 和 應用視圖 文件
├── src/ │ ├── views/ +│ │ └── login/ +│ │ └── Login.vue # 應用視圖 +│ ├── login.js # 應用入口 │ └── main.js ├── vue.config.js └── package.json
創建視圖文件
<template> <!-- src/login/Login.vue --> <div> This is login page</div> </template>
創建應用入口
// /src/login.js
import Vue from 'vue'
import Login from './views/login/Login.vue'
new Vue({
render: h => h(Login)
}).$mount('#app')重啟你的應用
# 啟動之后，在當前項目項目地址后面加上 login.html 就可以看到新增的頁面了 $ open http://localhost:8080/login.html
到此，關于“Vue怎么創建應用入口”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
