本文个人博客地址：https://www.leafage.top/posts/detail/2133Y9Q4
这一篇开始，来记录 Leafage 的诞生记录。
首先需要知道一些主要的目标是什么：
- 个人分享网站；
- 容易被检索到；
- 开发容易，部署简单；
- 尽可能好看些，有自己的风格；
- 动态网站，而非静态页面；
基于以上目标，然后根据自己对前端的技术了解和掌握（工作主要是后台开发，会一些angular和vue），来开始进行技术选型：
1. 前端开发技术，可选的有：
- nuxtjs (vue技术栈)：上手简单，模块分离；
- nextjs (react技术栈)：html、css、ts 代码写一起，不习惯；
- nest (angular技术栈)：难度较高；
通过了解和查阅对比文章（参考推荐：https://blog.csdn.net/Fundebu... ），最终选择nuxtjs来实现；
2. 后端开发技术：
- spring boot：这个基于java其实没有什么选择，肯定用 spring boot框架；
- spring data：代码高度集成spring，各种数据库支持；
- mybatis：需要写sql，不支持mongodb
因为主要得需要是存储文章，而且前期没有什么设计，也是摸着石头过河，所以选择mongodb，灵活，简单，因此，选择了spring data来做；
一开始选择得是mysql + mongodb来实现，后来觉得麻烦，而且为了学习webflux就做了两个版本（webmvc + mysql，webflux + mongodb）;
学习一个技术的最好的资料就是官方的文档，及示例，接下来就跟着nuxtjs的文档来创建项目（先搞前端，弄出点页面，便于后端来写对应的接口）。
执行初始化命令：
npx create-nuxt-app leafage执行完命令之后，会看到让再一次设置项目名称，如果不需要，则直接回车即可：
注：下面操作，前面没有（）的通过上下选择，回车确认；前面有（）的，通过空格键选则，回车确认；
- 选择编程语言（javascript/typescript）：
- 选择包管理工具（yarn/npm）：
- 选择UI框架，根据自己的喜好选择，再用过了iveiw、ant design、element、vuetify之后，我选择了tailwindcss：
- 选择 nuxtjs 模块，axios适用于接口请求的工具，pwa就不解释了，content是静态资源数据，支持json, html，md等：
- 选择Lint工具：
- 选择测试框架：
- 选择是要创建SSR项目还是单页面应用：
- 选择服务端渲染还是静态化页面，我们需要从后台获取数据，所以选择服务端渲染：
- 选择开发工具：
- 如果第10步选择了pull request，则会出现该选项：
- 选择git/svn，确认了git/svn账号，就开始创建了：
接着就是漫长的等待，下载依赖。。。完成之后如下：
哇塞，有点小小的激动哦。快根据上面的提示，运行起来看一看效果。
先执行yarn build，完成后，会打印各个文件的大小等信息：
然后执行 yarn start ，就能启动了，快看看 http://localhost:3000 是什么样子的吧：