SSR框架选型

1、核心需求

• 响应式网站
• 文章模块存在SEO需求

2、技术选型

SEO：SSG or SSR

VUE的SEO主要有以下两种方式：SSG（Static-Site Generation）静态站点生成、SSR（Server-side Rendering）服务端渲染。

由于文章模板并不是固定的内容，如果采用SSG则需要在每次文章（或其他动态增减的内容）发生变动时需要重新运行命令生成html文件，所以最后还是决定采用SSR服务端渲染来作为SEO问题的解决方案。

关于SSR框架，VUE官网中也有几个官方推荐：Nuxt、Quasar、Vite SSR。

Vite SSR本身太过于硬核，大部分功能需要自行开发，也缺乏常规组件的支持，本次技术选型暂不考虑，下面是Nuxt和Quasar的技术对比：

功能对比	Nuxt	Quasar
中文文档	部分支持（传送门）	旧版本全部支持（传送门）新版本暂无中文文档
node版本要求	^18.16.0	^14.0.0
周下载量	494,613 image.png image.png	122,820 image.png image.png
SSG	支持	支持
SSR	支持	支持
过去一年的更新频率	2004次提交，20个版本	1207次提交，53个版本
最后版本更新时间	v3.1.2（2023年02月03日）	v2.11.5（2023年01月11日）
特点	配置简单	框架自身提供UI组件 支持编译多端

Quasar原生提供了一套UI组件库，基于该组件库可以编译成网站、客户端、app等多端内容，但也是因为提供了UI组件库，所以Quasar本身的配置和改动也较为复杂；Nuxt 3则仅提供了基础的服务端方法来区分服务端渲染和客户端渲染，整体的配置和结构比较简单。
由于官网本身内容少、结构简单的特点，最终选择nuxt作为了SSR的解决方案。

CSS：响应式框架

响应式的需求有两种实现方式：媒体查询 和 第三方响应式框架。

官网的需求比较简单，自己写媒体查询也基本能完成任务。但考虑到从头开始写媒体查询，在浏览器兼容性、特别是移动端浏览器兼容性上存在较大风险，于是最终计划采用第三方响应式框架。

第三方响应式框架有很多，这里选了两个主流的框架：tailwind 和 bootstrap，一个项目创立时间久，一个市场流行度高。下面是他们的一些参数对比：

功能对比	tailwind v3	bootstrap v5
中文文档	部分支持（传送门）	全部（传送门）
兼容性	主流浏览器	主流浏览器
node版本要求	12.13.0	-
代码提示	WebStorm / VS Code	不支持
生产环境体积	72.8kb（css）	167kb（css）+ 77kb（js）
自定义主题	支持	支持
周下载量	3,967,782 image.png image.png	5,423,072 image.png image.png
过去一年的更新频率	526次提交，20个版本更新	798次提交，7个版本
最后版本更新时间	v3.2.4（2022年11月12日）	v5.3.0（2022年12月25日）

从整体数据看，bootstrap的下载量无疑比tailwind高出许多，但从各版本的下载量来看，tailwind最新版的使用数量达到总数的60%以上，而bootstrap仅有12%。这代表着如果tailwind在互联网上会有更多的学习教程及使用说明，遇到问题后可找到的解决方案也会比bootstrap多出许多。所以经过团队成员沟通，最终选择了tailwind。

另一个老生长谈的问题是：IE浏览器的兼容性。首先参考备注2和备注3的市场份额图，目前全球和中国的主流浏览器占比中已经没有了IE系列浏览器的位置，Other部分的浏览器占总体的3%和8%。即使是国区的8%中还包含着其他公司开发的浏览器和个人爱好者开发的小众浏览器，实际上IE浏览器的占比已经非常低了。另一个原因是随着IE浏览器的市场急剧减少，大部分前端框架的新版本都已经停止了对IE系列的开发支持。如果为了维系IE浏览器用户而去使用失去LTS版本维护的、陈旧的框架版本，似乎是一件得不偿失的事情。

备注：
1、仅tailwind v1.9、bootstrap v4支持IE浏览器（目前IE浏览器的市场占有率极小，可以忽略）；
2、2022年全球浏览器市场份额：
image.png
3、2022年中国境内浏览器市场份额：
image.png

2、响应式官网尺寸标准

3、技术选型

vue3 + vite + vuex + tailwind.css + nuxt.js v3

4、前置要求

• npm版本：≥ 6.1
• node版本：≥ 16.11 （升级至18.12.1）
• vue版本：3.2.45

  采用nvm完成node多版本管理

5、安装步骤

1
2
3
4
5
6

# 创建应用
> npm init nuxt-app <project-name>
# 安装依赖
> npm install
# 本地启动
npm run dev -- -o

6、目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.
|-- assets
|   `-- css
|       `-- tailwind.css
|-- components
|   |-- footer.vue
|   `-- navbar.vue
|-- layouts
|-- middleware
|-- pages
|   `-- test.vue
|-- public
|-- README.md
|-- app.config.ts					// 应用配置文件
|-- app.vue
|-- nuxt.config.ts				// nuxt配置文件
|-- package-lock.json
|-- package.json
|-- tailwind.config.ts
`-- tsconfig.json

7、资源链接

• vue3
  • 官方文档：https://cn.vuejs.org/guide/introduction.html#what-is-vue
• nuxt.js
  • 官方文档：https://nuxt.com/docs/getting-started/introduction
• tailwindcss
  • 图标库：https://heroicons.com/
  • 组件库：https://headlessui.com/vue/transition
  • 官方文档：https://tailwindcss.com/docs/installation
  • 第三方下载库：https://github.com/davidivkovic/tailwindui
  • 在线模板演示：https://tailwindui-davidivkovic.vercel.app
• 其他
  • 不合时宜的 CSS：Tailwind CSS 引发的思考：https://zhuanlan.zhihu.com/p/425134873
  • Tailwind CSS （可能）是名过其实的：https://juejin.cn/post/6930196913119576077
  • 关于TailwindCSS的一些思考：http://cdn.shymean.com