Leafage 诞生记（一、创建基于nuxt.js的项目）

本文个人博客地址：https://www.leafage.top/posts/detail/2133Y9Q4

这一篇开始，来记录 Leafage 的诞生记录。

首先需要知道一些主要的目标是什么：

1. 个人分享网站；
2. 容易被检索到；
3. 开发容易，部署简单；
4. 尽可能好看些，有自己的风格；
5. 动态网站，而非静态页面；

基于以上目标，然后根据自己对前端的技术了解和掌握（工作主要是后台开发，会一些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的文档来创建项目（先搞前端，弄出点页面，便于后端来写对应的接口）。

在这之前需要准备环境，前端需要nodejs，后端需要jdk、maven/gradle

1. 执行初始化命令：

   npx create-nuxt-app leafage

   执行完命令之后，会看到让再一次设置项目名称，如果不需要，则直接回车即可：

注：下面操作，前面没有（）的通过上下选择，回车确认；前面有（）的，通过空格键选则，回车确认；

2. 选择编程语言（javascript/typescript）：

3. 选择包管理工具（yarn/npm）：

4. 选择UI框架，根据自己的喜好选择，再用过了iveiw、ant design、element、vuetify之后，我选择了tailwindcss：

5. 选择 nuxtjs 模块，axios适用于接口请求的工具，pwa就不解释了，content是静态资源数据，支持json, html，md等：

6. 选择Lint工具：

7. 选择测试框架：

8. 选择是要创建SSR项目还是单页面应用：

9. 选择服务端渲染还是静态化页面，我们需要从后台获取数据，所以选择服务端渲染：

10. 选择开发工具：

11. 如果第10步选择了pull request，则会出现该选项：

12. 选择git/svn，确认了git/svn账号，就开始创建了：

接着就是漫长的等待，下载依赖。。。完成之后如下：

哇塞，有点小小的激动哦。快根据上面的提示，运行起来看一看效果。

先执行yarn build，完成后，会打印各个文件的大小等信息：

然后执行 yarn start ，就能启动了，快看看 http://localhost:3000 是什么样子的吧：