前言
之前接触到了 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架构描述和整体思路
该项目主要以围绕 服务端渲染 的思路进行搭建，服务端渲染的整体思路我在前面的文章中也有提到，因为服务端项目我之前做过一个Vue2版本的，所用的技术栈比较过时，为了适应新环境的需要，该项目使用了前端领域最新最成熟的技术，整体架构如下图
