前言
之前接触到了 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版本的，所用的技术栈比拟过期，为了适应新环境的须要，该我的项目应用了前端畛域最新最成熟的技术，整体架构如下图