01 - Vue3 UI Framework - 開始

寫在前面

一年多沒寫過博客了，作業、生活逐漸磨平了棱角，

寫代碼容易，寫博客難，堅持寫高水平的技術博客更難，

技術控決定慢慢拾起這份堅持，用作技術學習的階段性總結，

開始

大前端時代，最近在面試前端工程師的程序中，有感而發，技術更新迭代快，學習成本高，瀏覽了各大博客論壇，千差萬別，比較混亂，最終決定參考 Element UI 的設計風格，主題色選擇紫色（受到 MaterialDesignInXamlToolkit 的影響），寫一套基于 Vue3 的 UI 框架庫和對應的官方網站，方便后期在專案中快速使用，也算是對 Vue3 新特性的學習和總結，

先看一下 Jeremy UI 官網 效果吧！目前專案依然處于開發階段，小伙伴們有興趣可以跟著一起練習一下，也歡迎參與到專案中，專案參考地址 GitHub ，歡迎 star、issue、fork 和 PR，

分析官網

界面布局

1. 頂部邊欄

2. 首頁

3. 檔案頁

　　3.1 側邊欄

　　3.2 內容區域

主題風格

紫色

詳細說明

搭建官網

創建方式有很多，而我這里選擇通過 Vite 進行創建 Vue3 專案，為什么選 Vite 呢？如下是 Vite 官網 的說法：

現實問題

在瀏覽器支持 ES 模塊之前，JavaScript 并沒有提供原生機制讓開發者以模塊化的方式進行開發，這也正是我們對 “打包” 這個概念熟悉的原因：使用工具抓取、處理并將我們的原始碼模塊串聯成可以在瀏覽器中運行的檔案，

時過境遷，我們見證了諸如 webpack、Rollup 和 Parcel 等工具的變遷，它們極大地改善了前端開發者的開發體驗，

然而，當我們開始構建越來越大型的應用時，需要處理的 JavaScript 代碼量也呈指數級增長，包含數千個模塊的大型專案相當普遍，我們開始遇到性能瓶頸 —— 使用 JavaScript 開發的工具通常需要很長時間（甚至是幾分鐘！）才能啟動開發服務器，即使使用 HMR，檔案修改后的效果也需要幾秒鐘才能在瀏覽器中反映出來，如此回圈往復，遲鈍的反饋會極大地影響開發者的開發效率和幸福感，

Vite 旨在利用生態系統中的新進展解決上述問題：瀏覽器開始原生支持 ES 模塊，且越來越多 JavaScript 工具使用編譯型語言撰寫，

緩慢的服務器啟動

當冷啟動開發服務器時，基于打包器的方式啟動必須優先抓取并構建你的整個應用，然后才能提供服務，

Vite 通過在一開始將應用中的模塊區分為 依賴 和 原始碼 兩類，改進了開發服務器啟動時間，

• 依賴 大多為在開發時不會變動的純 JavaScript，一些較大的依賴（例如有上百個模塊的組件庫）處理的代價也很高，依賴也通常會存在多種模塊化格式（例如 ESM 或者 CommonJS），

  Vite 將會使用 esbuild 預構建依賴，Esbuild 使用 Go 撰寫，并且比以 JavaScript 撰寫的打包器預構建依賴快 10-100 倍，

• 原始碼 通常包含一些并非直接是 JavaScript 的檔案，需要轉換（例如 JSX，CSS 或者 Vue/Svelte 組件），時常會被編輯，同時，并不是所有的原始碼都需要同時被加載（例如基于路由拆分的代碼模塊），

  Vite 以 原生 ESM 方式提供原始碼，這實際上是讓瀏覽器接管了打包程式的部分作業：Vite 只需要在瀏覽器請求原始碼時進行轉換并按需提供原始碼，根據情景動態匯入代碼，即只在當前螢屏上實際使用時才會被處理，

  

  

緩慢的更新

基于打包器啟動時，重建整個包的效率很低，原因顯而易見：因為這樣更新速度會隨著應用體積增長而直線下降，

一些打包器的開發服務器將構建內容存入記憶體，這樣它們只需要在檔案更改時使模塊圖的一部分失活^[1]，但它也仍需要整個重新構建并多載頁面，這樣代價很高，并且重新加載頁面會消除應用的當前狀態，所以打包器支持了動態模塊熱多載（HMR）：允許一個模塊 “熱替換” 它自己，而不會影響頁面其余部分，這大大改進了開發體驗 —— 然而，在實踐中我們發現，即使采用了 HMR 模式，其熱更新速度也會隨著應用規模的增長而顯著下降，

在 Vite 中，HMR 是在原生 ESM 上執行的，當編輯一個檔案時，Vite 只需要精確地使已編輯的模塊與其最近的 HMR 邊界之間的鏈失活^[1]（大多數時候只是模塊本身），使得無論應用大小如何，HMR 始終能保持快速更新，

Vite 同時利用 HTTP 頭來加速整個頁面的重新加載（再次讓瀏覽器為我們做更多事情）：原始碼模塊的請求會根據 304 Not Modified 進行協商快取，而依賴模塊請求則會通過 Cache-Control: max-age=31536000,immutable 進行強快取，因此一旦被快取它們將不需要再次請求，

一旦你體驗到 Vite 的神速，你是否愿意再忍受像曾經那樣使用打包器開發就要打上一個大大的問號了，

為什么生產環境仍需打包

盡管原生 ESM 現在得到了廣泛支持，但由于嵌套匯入會導致額外的網路往返，在生產環境中發布未打包的 ESM 仍然效率低下（即使使用 HTTP/2），為了在生產環境中獲得最佳的加載性能，最好還是將代碼進行 tree-shaking、懶加載和 chunk 分割（以獲得更好的快取），

要確保開發服務器和生產環境構建之間的最優輸出和行為一致并不容易，所以 Vite 附帶了一套 構建優化 的 構建命令，開箱即用，

為何不用 ESBuild 打包？

雖然 esbuild 快得驚人，并且已經是一個在構建庫方面比較出色的工具，但一些針對構建 應用 的重要功能仍然還在持續開發中 —— 特別是代碼分割和 CSS 處理方面，就目前來說，Rollup 在應用打包方面更加成熟和靈活，盡管如此，當未來這些功能穩定后，我們也不排除使用 esbuild 作為生產構建器的可能，

在開始之前我們需要注意兼容性問題：

兼容性注意

Vite 需要 Node.js 版本 >= 12.0.0

使用 npm 創建 jeremy-ui 專案

直接創建

1 mkdir jeremy-ui
2 cd jeremy-ui
3 cva .

腳手架創建（根據提示資訊創建即可，注意選擇 vue -> vue-ts）

啟動專案

1 cd jeremy-ui
2 npm install
3 npm run dev

正常情況下，你就可以在瀏覽器上( http://localhost:3000/ ) 預覽專案了，

注意：

如果你不是通過腳手架去創建的專案，那么你可能需要將 main.js 改成 main.ts ，另外，你還需要在 src 目錄下添加 shims.d.ts 檔案，讓 ts 檔案能夠識別 vue 后綴的檔案，

shims.d.ts 檔案原始碼如下：

1 declare module '*.vue' {
2   import { ComponentOptions } from 'vue'
3   const componentOptions: ComponentOptions
4   export default componentOptions
5 }

整體布局設計

根據之前的分析，我們能夠得出結論，首先，最大寬度限制需要作用到 app 上，所以相應的樣式應該寫在 app.vue 上，其次，首頁和檔案頁的頂邊欄，其功能為：

可見并不完全相同，也就是說不是同一個組件的復用，所以應該將頂邊欄組件分別嵌入首頁和檔案頁組件，而不是嵌入 app.vue ，然后，首頁顯然沒有側邊欄，所以首頁的內容直接寫在其模板內即可，而檔案頁需要側邊欄和內容區域，但是檔案頁的側邊欄，實際上與彈出的頂部選單是相同的內容，所以只需要撰寫一次，然后復用為側邊欄和頂部選單即可，

除此之外，檔案頁的內容區域，還要分別展示 markdown 內容和組件內容，所以內容區域要分成兩種進行撰寫，

綜上，首頁大致為上下結構，恒定不變；檔案頁大致為 T 字結構，小于 1200px 時為上下結構，附有彈出選單的選項，

總體樣式表 index.scss (可能需要修改 index.css 的后綴) 

 1 * {
 2   margin: 0;
 3   padding: 0;
 4   box-sizing: border-box;
 5 }
 6 ul,
 7 ol {
 8   list-style: none;
 9 }
10 a {
11   text-decoration: none;
12   color: inherit;
13   &:hover {
14     text-decoration: underline;
15     cursor: pointer;
16   }
17 }
18 h1,
19 h2,
20 h3,
21 h4,
22 h5,
23 h6 {
24   font-weight: normal;
25 }
26 
27 body {
28   font-size: 16px;
29   line-height: 1.5;
30   color: #1d2c40;
31   font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica,
32     "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB",
33     "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN",
34     "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti",
35     SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
36 }
37 .icon {
38   width: 1em; height: 1em;
39   vertical-align: -0.15em;
40   fill: currentColor;
41   overflow: hidden;
42 }

然后修改 main.ts 中的引入

1 import './index.scss'

最后完成 App.vue 的內容

 1 <template>
 2   <div class="app">
 3     <router-view />
 4   </div>
 5 </template>
 6 
 7 <script lang="ts">
 8 export default {
 9   name: "App",
10 };
11 </script>
12 <style lang="scss" scoped>
13 $max-width: 1200px;
14 .app {
15   max-width: $max-width;
16   margin-left: calc(50vw - 600px);
17   position: relative;
18   @media (max-width: $max-width) {
19     margin-left: 0;
20   }
21 }
22 </style>

依賴包的安裝

請參考 package.json 檔案，對應更新一下，然后再專案根目錄下執行  npm install   即可，

 1 {
 2   "name": "jeremy-ui",
 3   "version": "0.0.3",
 4   "files": [
 5     "lib/*"
 6   ],
 7   "main": "lib/jeremy.js",
 8   "scripts": {
 9     "dev": "vite",
10     "build": "vite build"
11   },
12   "dependencies": {
13     "github-markdown-css": "^4.0.0",
14     "marked": "^1.2.8",
15     "prismjs": "^1.23.0",
16     "vue": "^3.0.4",
17     "vue-router": "^4.0.4"
18   },
19   "devDependencies": {
20     "@vue/compiler-sfc": "^3.0.4",
21     "rollup-plugin-esbuild": "^4.7.2",
22     "rollup-plugin-scss": "^3.0.0",
23     "rollup-plugin-terser": "^7.0.2",
24     "rollup-plugin-vue": "^6.0.0",
25     "sass": "^1.44.0",
26     "vite": "^1.0.0-rc.13"
27   }
28 }

路由設計

既然有多個頁面，那肯定就要通過路由進行跳轉，路由顯然是使用 vue-router，首先安裝它，要注意，默認安裝的 vue-router 是 3.x.x 版本的，只能用于 vue2，要想用于 vue3，必須是 4.x.x 版本

通過  npm info vue-router  可以看到最新版（next 版本）是 4.0.4（如有變化，下載最新版即可），則我們通過  npm install [email protected]  安裝適合 vue3 的 vue-router，

Jeremy UI 官網的路由設計如下：

因為目前還沒有試圖，所以我們先把框架寫好，暫時寫一個空的引入即可，router.ts 如下

1 import { createWebHistory, createRouter } from 'vue-router'
2 
3 const history = createWebHistory()
4 const router = createRouter({
5     history,
6     routes: [
7     ]
8 })
9 export default router

然后再在 main.ts 中引入

1 import { createApp } from 'vue'
2 import App from './App.vue'
3 import './index.scss'
4 import router from './router'
5 
6 createApp(App).use(router).mount('#app')

使用 SVG

為了官網的相對美觀，我們決定使用 SVG，可以使用 icon font 提供的免費圖示，使用教程大致如下

1. 選擇喜歡的圖示，加入購物車
2. 新建一個專案，或選擇一個已有專案，將購物車里的圖示加入該專案
3. 進入”我的專案”，生成新的參考鏈接
4. 選擇 Symbol 模式，復制鏈接，粘貼到本地專案的 index.html 的新 script 標簽中

之后就可以在本地使用如下的方式參考 svg 了

1 <svg>
2     <use xlink:href="#icon-Vue"></use>
3 </svg>

svg 的命名，參考 icon font 上”我的專案”里設定的每個圖示的名稱，另外，如果專案中的圖示有任何變化，必須要重新生成參考鏈接！

相關資源

GitHub 倉庫：jeremy-ui

Jeremy UI 官網地址：Jeremy UI

GitHub 分支說明

小伙伴 clone 之后可以參考 main 分支，可以向 dev 分支提交 PR 哦！

參考資料

知乎 - 隨安 

掘金 - 大威Wayne

Vite 官方 - Vite

阿里矢量圖示庫 - Iconfont

TODO

02 - Vue3 UI Framework - 頂部邊欄

03 - Vue3 UI Framework - 首頁

04 - Vue3 UI Framework - 檔案頁

05 - Vue3 UI Framework - Button 組件

06 - Vue3 UI Framework - Dialog 組件

07 - Vue3 UI Framework - Switch 組件

08 - Vue3 UI Framework - Input 組件

09 - Vue3 UI Framework - Table 組件

10 - Vue3 UI Framework - Tabs 組件

11 - Vue3 UI Framework - Card 組件

12 - Vue3 UI Framework - 打包發布

13 - Vue3 UI Framework - 完善官網

14 - Vue3 UI Framework - 優化代碼

15 - Vue3 UI Framework - 完工部署

16 - Vue3 UI Framework - 域名配置

標籤：其他

上一篇：省、市、區、街道行政區資料以及行政區資料合并問題

下一篇：為什么進入EOF時會設定failbit？