关于ssr:手摸手搭建-VueTSExpress-全栈-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

架构形容和整体思路

该我的项目次要以围绕 服务端渲染 的思路进行搭建，服务端渲染的整体思路我在后面的文章中也有提到，因为服务端我的项目我之前做过一个 Vue2 版本的，所用的技术栈比拟过期，为了适应新环境的须要，该我的项目应用了前端畛域最新最成熟的技术，整体架构如下图