Vue怎么創(chuàng)建應(yīng)用入口

發(fā)布時間：2022-01-18 09:07:33 來源：億速云閱讀：147 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹“Vue怎么創(chuàng)建應(yīng)用入口”，在日常操作中，相信很多人在Vue怎么創(chuàng)建應(yīng)用入口問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue怎么創(chuàng)建應(yīng)用入口”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(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

到此，關(guān)于“Vue怎么創(chuàng)建應(yīng)用入口”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

向AI問一下細(xì)節(jié)

Vue怎么創(chuàng)建應(yīng)用入口

創(chuàng)建應(yīng)用

添加 Loading 效果

開始創(chuàng)建應(yīng)用

多頁面改造

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽