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