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

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

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

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

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

基于以上目标,然后根据自己对前端的技术了解和掌握(工作主要是后台开发,会一些angular和vue),来开始进行技术选型:

1. 前端开发技术,可选的有:

  • nuxtjs (vue技术栈):上手简单,模块分离;
  • nextjs (react技术栈):html、css、ts 代码写一起,不习惯;
  • nest (angular技术栈):难度较高;

通过了解和查阅对比文章(参考推荐:https://blog.csdn.net/Fundebug/article/details/90510981 ),最终选择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

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

注:下面操作,前面没有()的通过上下选择,回车确认;前面有()的,通过空格键选则,回车确认;

  1. 选择编程语言(javascript/typescript):

  1. 选择包管理工具(yarn/npm):

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

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

  1. 选择Lint工具:

  1. 选择测试框架:

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

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

  1. 选择开发工具:

  1. 如果第10步选择了pull request,则会出现该选项:

  1. 选择git/svn,确认了git/svn账号,就开始创建了:

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

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

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

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