关于typescript:Leafage-诞生记一

这一篇开始，来记录 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

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

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

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 是什么样子的吧：