從 Vue3 正式發(fā)布到現(xiàn)在，也快過去一年了（寫這行文字的時候是2021年09月08日，拖延癥...）。

但是就我最近招聘面試的一些經(jīng)歷來看，很多 Vue 技術(shù)棧的候選人依然還沒有使用過 Vue3。

關(guān)于他們沒有選擇使用 Vue3 這個事情，我覺得也是可以理解的。一方面，Vue3 直接放棄了 IE11。雖然 IE 的用戶數(shù)量在持續(xù)下降，但是想讓老板們直接放棄 IE11 還是有一些困難。

另外就是，做項目這種事情，有時候人們的選擇就是能用就行，升級 Vue3 可能并不能給項目帶來太多效益。對于一些歷史悠久的項目，甚至還要考慮 Vue3 新生態(tài)是否完善的問題，是不是能夠支撐自己完美過渡。

誠然，擁抱新技術(shù)還存在著這么一些障礙，是否選擇新技術(shù)需要綜合去考量。但是從做技術(shù)的角度出發(fā)，我們還是要保持一個 Open 的心態(tài)，敢于去接受新鮮事物，即便短期不能直接用在工作中，也可以自己私下感受下新框架給我們帶來了什么新的體驗。

早些時候，我為了更深入地了解前后端完整鏈路，特意自己實現(xiàn)了個人博客。早期效果如下：

之后一方面是覺得博客做得太難看，另一方面是想嘗試在 Vue 項目中實踐 TS，于是2020年我就立了一個 Flag 做重構(gòu)，當時技術(shù)選型是 vue-class-component + vue-property-decorator，類組件 + 裝飾器模式。做了一段時間，感覺開發(fā)體驗也不是很好，慢慢就放棄了，等著 Vue3 的發(fā)布。

最近也是借著一些業(yè)余時間完成了自己的一個Flag，雖然延期了很久，但總算是有了結(jié)果。

首先分享下在線鏈接：Tusi博客^[1]

整體架構(gòu)

從技術(shù)選型來看，我還是選擇了一些比較接地氣的框架和技術(shù)。

其實對于博客這種 SEO 要求高的網(wǎng)站，優(yōu)選的方案還是 SSR，但我還是選擇了 CSR 方案（畢竟是個人項目，怎么舒服怎么來），后續(xù)時間充裕的情況下再考慮下 SEO 優(yōu)化。

Web 端這塊，我是直接選擇了 Vue3^[2] + TS^[3] 作為一個開發(fā)骨架。作為一個代碼潔癖選手，我還是非常傾向于使用 TS 的。

UI 方面，我選擇了 AntDesign 為主、ElementPlus 為輔的這樣一個組合，這兩個 UI 框架都是非常優(yōu)秀的，但二者都有一些對方?jīng)]實現(xiàn)的能力，所以我綜合使用了二者。讀者們也不用擔心性能問題，按需加載情況下，用兩套 UI 框架也沒有什么壓力，這一點我也是思考過的。

視覺效果這塊，基本上屬于我自己發(fā)揮想象了，憑著自己感覺做的一個整體效果。然后我也是采用了 Mobile First 的理念，優(yōu)先完成移動端視覺效果，結(jié)合 Media Query 去做一些其他屏幕的適配。

在客戶端這塊，除了 Web 端，我早期還是做了小程序的，這個可以在微信直接搜索到，名字也是Tusi博客。

回過頭來看，如果是這種跨端的系統(tǒng)，我應該優(yōu)選 uniapp 這類的方案，不過這個小程序我做得比較早，那會兒我?guī)缀踹€不會小程序開發(fā)，也是屬于一個邊學習邊開發(fā)的狀態(tài)。

后端這塊，也是開發(fā)得比較早，那會兒可選的 Node 框架也不多，所以我選擇了比較流行的 Express^[4]，這確實是一個易上手并且好用的框架，Express 不會給你灌輸太多的設(shè)計模式，對于初次接觸后端的朋友來說，是一個非常友好的選擇。

數(shù)據(jù)庫我選擇的是關(guān)系型數(shù)據(jù)庫 MySQL，接入層當然首選 Nginx 啦。

云服務器配置

我買的云服務器配置是：1核 2GB 1Mbps

這對于前期負載不是很高的個人項目來說，是足夠的。反正現(xiàn)在都支持彈性伸縮，不夠就加，問題不大。

部署方式

整體上采用了自動化部署的策略。Node 這塊是基于PM2去做進程守護和自動化部署。

前端則是基于 Github Actions 實現(xiàn)的CI/CD。

我購買的云服務器配置很普通，圖片資源放自己服務器上是不現(xiàn)實的，所以我的圖片資源是放在七牛云存儲。

未完待續(xù)

本文主要是對Tusi博客^[1]做了一個總體的介紹，讓大家先有個整體的印象。整個博客應用確實是比較簡單，但也算是一個前后端完整的系統(tǒng)，應該能給朋友們帶來一點幫助或思路。接下來，我將分幾篇文章詳細講講我是怎么實現(xiàn)這些功能的，敬請期待！

代碼，拿來吧你

本項目代碼已開源，具體見：

前端工程：vue3-ts-blog-frontend^[5]

后端工程：express-blog-backend^[6]

數(shù)據(jù)庫初始化腳本：關(guān)注公眾號前端司南，回復關(guān)鍵字“博客數(shù)據(jù)庫腳本”，即可獲取。

系列文章

Vue3+TS+Node打造個人博客系列文章如下，持續(xù)更新，歡迎閱讀！點贊關(guān)注不迷路！??

• Vue3+TS+Node打造個人博客（總覽篇）^[7]
• Vue3+TS+Node打造個人博客（數(shù)據(jù)庫設(shè)計）
• Vue3+TS+Node打造個人博客（后端架構(gòu)）
• Vue3+TS+Node打造個人博客（前端架構(gòu)）
• Vue3+TS+Node打造個人博客（分頁模型和滾動加載）
• Vue3+TS+Node打造個人博客（一鍵到頂和側(cè)邊彈射）
• Vue3+TS+Node打造個人博客（文章創(chuàng)作和Markdown渲染）
• Vue3+TS+Node打造個人博客（評論系統(tǒng)的巧妙設(shè)計）
• Vue3+TS+Node打造個人博客（Socket.IO在線聊天室）
• Vue3+TS+Node打造個人博客（登錄，權(quán)限，后臺管理）
• Vue3+TS+Node打造個人博客（自動化部署）
• Vue3+TS+Node打造個人博客（小程序博客）

參考