日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 Vue 正文

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

作者：zhengxs2018 ? 更新時間： 2022-03-30 Vue

前言

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

總結

原文鏈接：https://juejin.cn/post/7053452468822212644

欄目分類
最近更新