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

红太狼 2022-11-04 12:27 204阅读 0赞

本文个人博客地址：[https://www.leafage.top/posts/detail/2133Y9Q4  
][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/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

执行完命令之后，会看到让再一次设置项目名称，如果不需要，则直接回车即可：  
![3341aebdcd8d40a2df3fd8eeaef49db9.png][]  
**注：** 下面操作，前面没有（）的通过上下选择，回车确认；前面有（）的，通过空格键选则，回车确认；

1.  选择编程语言（javascript/typescript）：  
    ![b625f1224fda7bb2e3ad31a8a55cf8a2.png][]
2.  选择包管理工具（yarn/npm）：  
    ![a0886c621f0726c75ab502a00e25b534.png][]
3.  选择UI框架，根据自己的喜好选择，再用过了iveiw、ant design、element、vuetify之后，我选择了tailwindcss：  
    ![cdf9816d33d05e648e2adf1b6abe1ee8.png][]
4.  选择 nuxtjs 模块，axios适用于接口请求的工具，pwa就不解释了，content是静态资源数据，支持json, html，md等：  
    ![d7d591b7bdd2b1f93357a5ee8d3416d6.png][]
5.  选择Lint工具：  
    ![b7a90809b3bf840fbe3e6b26ed6baffa.png][]
6.  选择测试框架：  
    ![4e23f0ce81edbf39ce85bdc6ae9353b0.png][]
7.  选择是要创建SSR项目还是单页面应用：  
    ![5d50cf0accb8d95d88a7a83bd9198574.png][]
8.  选择服务端渲染还是静态化页面，我们需要从后台获取数据，所以选择服务端渲染：  
    ![258016bfb661b7150dea9cba9a3bbe41.png][]
9.  选择开发工具：  
    ![094c8d78f5c64adbb81778509f39d228.png][]
10. 如果第10步选择了pull request，则会出现该选项：  
    ![6773f12123602eec895790b273f19e15.png][]
11. 选择git/svn，确认了git/svn账号，就开始创建了：  
    ![b7e5ba57fcf6b3d99dd44a5282042499.png][]  
    接着就是漫长的等待，下载依赖。。。完成之后如下：  
    ![9938f915ab0a208abbcc5dbb8e564a74.png][]

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

首先看一下初始化的项目结构：

![d13bb6a24524deb8e51d516492b098ed.png][]

1.  assets：用于存放未编译的资源文件，例如字体；
2.  components：这里写组件，同时可以该目录下的vue文件中使用fetch()来加载数据；
3.  layouts：这里是配置总体布局，例如：header、main、footer，可以引入 components 目录下定义好的组件；
4.  middleware：中间件，例如：权限认证；
5.  pages：这里是写页面的目录，nuxtjs会根据这个目录下的文件、文件夹生成对应的路由信息；
6.  plugins：配置插件，例如：axios；
7.  static：存放静态资源，例如：image；
8.  store：就是vue的vuex；

接下来，启动服务，先执行yarn build，完成后，会打印各个文件的大小等信息：  
![b734a4c91b7ebac26be5f44ca843183a.png][]  
然后执行 yarn start ，就能启动了，快看看 http://localhost:3000 是什么样子的吧：

[https_www.leafage.top_posts_detail_2133Y9Q4]: https://www.leafage.top/posts/detail/2133Y9Q4
[Leafage]: https://www.abeille.top
[nuxtjs]: https://nuxtjs.org/
[3341aebdcd8d40a2df3fd8eeaef49db9.png]: /images/20221023/d7e827efb1ad4de79a1ec532123a4d7e.png
[b625f1224fda7bb2e3ad31a8a55cf8a2.png]: /images/20221023/b11bc32106ab43e4863cd564acc2f3d0.png
[a0886c621f0726c75ab502a00e25b534.png]: /images/20221023/7f20a15b579a4f3daa74a9c0e47cd02e.png
[cdf9816d33d05e648e2adf1b6abe1ee8.png]: /images/20221023/fb3c6186337d4a2c8a48c1a23e7b1ac4.png
[d7d591b7bdd2b1f93357a5ee8d3416d6.png]: /images/20221023/3ff89d6edc4342c199a591ef1463cc53.png
[b7a90809b3bf840fbe3e6b26ed6baffa.png]: /images/20221023/1b5cfbf830aa446ca25794acfb6cf17e.png
[4e23f0ce81edbf39ce85bdc6ae9353b0.png]: /images/20221023/11884dc044c84c40b84ec22a1b31f157.png
[5d50cf0accb8d95d88a7a83bd9198574.png]: /images/20221023/ac0e2ce1beca486c837d8aa9b8c0e03f.png
[258016bfb661b7150dea9cba9a3bbe41.png]: /images/20221023/4edba41d7777482795bec07490e591cb.png
[094c8d78f5c64adbb81778509f39d228.png]: /images/20221023/89d950f2ca68403395e19ecf7e08f1fb.png
[6773f12123602eec895790b273f19e15.png]: /images/20221023/2d1172f59d6e4170b634756ef96ddf72.png
[b7e5ba57fcf6b3d99dd44a5282042499.png]: /images/20221023/484a57ba6af74d96a93a733ab7a7359e.png
[9938f915ab0a208abbcc5dbb8e564a74.png]: /images/20221023/fa11e29f429d43dca46a6dfa0fe169f1.png
[d13bb6a24524deb8e51d516492b098ed.png]: /images/20221023/09f375775cf14793b4fe3a8c5395d0c8.png
[b734a4c91b7ebac26be5f44ca843183a.png]: /images/20221023/6ca279edf41c4032bdeae433368a6b84.png