Vue開發實踐指南之應用入口

Posted on by

前言

Vue 開發實踐為本人的最佳實踐，非業內最佳，僅用於提供給各位做參考，這是系列文，但發佈時間和內容不固定。

通常情況下一個 前端工程 隻會導出 一個 前端單頁應用，而 main.js 就是這個應用的入口文件。

創建應用

默認情況下 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 函數，那麼應用就不會被創建，用戶也就無法操作。

添加 Loading 效果

但這樣會導致頁面處於空白狀態，為瞭友好，可以加一些加載動畫效果.

打開 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開發實踐指南之應用入口的文章就介紹到這瞭,更多相關Vue應用入口內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：