動態載入 Vue App Day 22

第 11 屆 iThome 鐵人賽

DAY 23

Modern Web

VueJS 從前端到後端系列第 23 篇

11th鐵人賽 javascript vuejs vue.js

閃光洽

2019-09-24 10:05:39

1146 瀏覽

部落格同步刊登 [IT 鐵人賽] 動態載入 Vue App Day 22

昨天又再次說到動態載入元件，今天則來聊一下 Vue App 是不是也能做這種事情。我們之前在第七天的時候有稍微提了一下。基本上就是 90% 以上的人不會做這種事 ，然後我大概就是那個 10% 會做這種蠢事的人。

我說過了，如果是兩組 App 想要綁定在不同的地方，溝通上會是個問題。根據昨天我尚未釋出的 Webpack 的結構來說，也不是一件不能做到的事情。至於什麼時候會釋出，大概就是等 Day 24 我聊到 Webpack 設定的時候吧（奸詐）。

Hybrid 加上多個 App

一般專案請勿這樣使用，使用前請詳閱公開說明書。

這裡沒有什麼難度，就是多綁一個 #app2 進去而已。但是，如果你只是一人團隊，一人開發的話，這樣用老實說沒有什麼好處。不過，當你的 #app2 是另外一個人在製作，那麼這件事情就會變得比較有趣一點。

當然，我們之前也提過關於溝通的問題。這個時候就丟給 EventBus 去解決即可。

<template>
  <div class="about">
    <h1>My Component</h1>
  </div>
</template>

<script>
import EventBus from '@/utils/EventBus'

export default {
  name: 'MyComponent',
  mounted () {
    setTimeout(() => {
      console.log('Call App 1')
      EventBus.$emit('callApp1')
    }, 1000)
  }
}
</script>

<style scoped>
h1 {
  text-align: center;
}
</style>

實際上這樣做的好處？

就是你的客戶要你先做兩個版給他，然後對方又有選擇性障礙，你只好找一堆人一起開發 #app1, #app2, #app3 ，只要客戶不要回頭選第一個，大家就平安喜樂、好聚好散。

不過在我這邊的需求，除了可以透過昨天所說的動態元件來解決外，切割不同的 App 也是一個作法。我們主要的訴求在於：

徹底撤回修例。
收回暴動定義。
撤銷對今為所有反送中抗爭者控罪。
徹底追究警隊濫權情況。
立即實行雙真普選。

五大訴求，缺一不可（靠么不是這五個）！

一個網站、各自表述。
你跟我跟他可以共用，他跟我跟你不行。
快速切換人頭帳號視覺外觀。
兩個樣式，一邊一版，不互相干涉。
獨立入口。

五大訴求，有缺再補。

當我們在製作所謂的「樣版」的時候，比較常見到的幾種操作方法，多是針對一個網站的骨幹，再次重新的長出新的樣貌出來。那麼，我們每次針對這樣的「樣版」，要去操作的 Vue App 是不是就變得很冗餘。

vue create template-1
vue create template-2
vue create template-3
vue create template-4
vue create template-5

然後你就有了五套。

所以，我在這邊的作法大致上是使用同一套 Vue App 的基底，然後針對同一個骨幹長出不一樣的 外觀樣式 App 來套用。所以說，最根本的 node_modules 我也只有一套，我的 package.json 也只有一個。最終這個 Vue App 可以依據不同的設定，指定不同的 App 來達到不同的外觀。

順手工商一下，

獎金獵人小酒館第二屆奇幻獎－服裝繪圖大賽
 獎金獵人小酒館第三屆奇幻獎｜故事寫作大賽
 獎金獵人小酒館第四屆奇幻獎繪圖組
 獎金獵人小酒館第四屆奇幻獎文學組
 獎金獵人小酒館第五屆奇幻獎：新東方異獸檔案
 【小酒館名酒爭霸】獎金獵人第六屆奇幻獎：酒標設計大賽

以上全部都是用同一個 Vue App 骨幹，搭配不同的 App/Components，來達到完全不一樣的網站模版以及功能。現在知道我為何一直在聊動態載入了嗎？其實，就是因為複雜以及多變的需求，所以身為工程師，總是得在這種地方省點時間、空間，以及省點事。

雖然說前置作業撞牆的時間很多，但是終究還是可以找到幾個方法來面對這些改變。這大概就是身為一個渺小的工程師存在的價值吧。

再談全域註冊

為何我們會把元件或是某些 App 所使用的東西做 全域註冊 ，也就是昨天所提及的 Vue.component(...) 這種方式？到底這麼做的好處是什麼？

https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/components/_globals.js
昨天文末我有推薦一個 Github，這裡面有個小巧思，我覺得很實用。利用 require.context 來讀取資料夾當中的檔案，然後把他做成全域註冊元件。這麼一來你就不用每次都在那邊 require 或是 import 一堆東西，也不需要在元件裡面一直重複引用。

或許你會覺得，把元件註冊到全域不是挺麻煩的，要用到再引入就好了啊？其實主要的目的與好處，我們可以整理出這幾個面向：

這個元件使用頻率非常的高。
這個元件使用頻率非常的高。
這個元件使用頻率非常的高。

我們以 BootstrapVue 為例子，他所提供的元件，通常你都是需要用到的時候，可能才會用 import 把他拿進來。或者是，直接使用 Vue.use(...) 的方式來做。而，其實，對於這種套件來說，通常都直接建議你使用 Vue.use(...) 的方式。而這種方式，其實就跟我們註冊在全域的元件，是大同小異的事情。

差別只在於，當你不是 每一個 BootstrapVue 的元件都會用到，爾或是你只想要用某幾個東西的時候，那麼，使用 import 會比直接整包拿進來要好。這件事情當你在打包正式環境使用的檔案時，你就會看出差異。

小結

其實重點是 $mount('#app') 有第二個參數可以用，亦即 $mount('#app', true) 。但是在這種 Hybrid 模式底下，因為你不是真的使用 SSR，所以即便你第二個參數傳入 true ，其實影響不大。再者，如果在正式環境底下，你可能會因為後端所產生的 DOM 與 VDOM 結構不符，而造成 App 無法渲染。

官方其實有寫，我這邊再次提醒一下。