手摸手搭建 Vue+TS+Express 全栈 SSR 博客系统——项目架构和技术选型篇

前言

之前接触到了 NuxtJs ，做了一些案例，发现自己还是对整个 SSR 构建流程理解的没有很透彻，决定自己动手试试从0开始搭建 Vue SSR，并且由于苦于想重构自己的博客项目，也借此机会将最新的SSR技术运用到实际项目中。

前端技术选型

前端技术选型的中心在于对 SSR 的支持程度，如果一个第三方库编写时没有考虑到通用性，那么要将它集成到一个 SSR 应用中可能会很棘手，很有可能会出现在node中调用浏览器API的情况。

开发框架(Vue3)
选用 Vue3 作为主要开发框架，可以使用 hooks 写法抽离部分逻辑，使代码结构更加清晰。
预处理器(Stylus)
和平时使用的 SCSS 预处理器对比， Stylus 在 CSS 代码书写上比前者简洁了不少，而且在遵循书写规范的基础上包容度也很高，甚至可以省去不必要的冒号和分号等。
开发语言(TypeScript)
使用 TypeScript 进行类型约束，减少未知错误发生概率，大胆修改逻辑内容。
网络(Axios)
选用 Axios 的原因是其成熟的双端运行能力，这为项目中的 SSR 带来了优势。
UI框架(Element-plus)
选用适配 Vue3 的成熟 UI 库 Element-plus，其对 SSR 也有高度支持。
路由库(Vue-Router)
搭配 Vue3 的 Vue-Router4 ，同样也支持 SSR。
状态存储库(Pinia)
选用 Pinia ，第1点是其与 Vue3 适配，其给到了 TypeScript 智能补全的功能，且比 Vuex 更轻量更简洁(去除了 mutation )，支持 hook 写法，第2点是支持 SSR ,并且官方文档有很好的服务端支持。
模块打包工具(Webpack5)

选用最新的 Webpack5 ，也是想学习巩固一下相关配置用法。

Markdown 解析库(highLight + Marked)

highLight.js + Marked.js 搭配使用，提供更多的自定义配置，能把的网站整的花里胡哨的。

后端技术选型

后端技术基本在原有vue2-ssr项目后端基础上做了些许改动，使用了 Typescript 进行类型约束，由原来的sql字符拼接查询更换为 ORM 框架 Sequelize，对数据库进行更有效安全的访问。

Node.js
Express
MySQL
Sequelize（ORM 框架）
Axios

|-- project
    |-- client 客户端项目文件夹
    |-- server 服务端项目文件夹
    |-- .browserslistrc
    |-- .dockerignore
    |-- .gitignore
    |-- .prettierignore
    |-- .prettierrc
    |-- auto-imports.d.ts
    |-- babel.config.js
    |-- components.d.ts
    |-- nodem_dev.json
    |-- nodem_prod.json
    |-- package-lock.json
    |-- package.json
    |-- postcss.config.js
    |-- README.md
    |-- todo.md
    |-- tsconfig.json
    |-- version.md