这一篇开始,来记录 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 的文档来创立我的项目(先搞前端,弄出点页面,便于后端来写对应的接口)。
在这之前须要筹备环境,前端须要 nodejs,后端须要 jdk、maven/gradle
- 执行初始化命令:
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 是什么样子的吧: