vue3.0项目 从零开始搭建个人博客

博客项目是从2022年1月初开始，到2022年2月末结束，经历了从界面设计，前后端开发，项目部署维护一整套流程，期间学习了不少知识，体会颇深，在这里记录一下。

最初是在去年12月年末趁着阿里云服务器打折，200RMB购买了最低配服务器（1核2G/3年），恰逢vue3.0发布将近一年多时间，看到大家都在热情拥抱vue3.0，琢磨着在自己的小水管上实践一下，便搭建这款博客项目，一方面是想了解一个项目从搭建到部署的完整过程，另一方面也能回顾思考一下这期间的学习过程，以便更好的了解自己。对于新手想要了解项目上线部署流程还是有点参考意义的，写的匆忙，还有很多不完善的地方望轻吐槽~~

项目介绍

博客项目参考借鉴了一些优秀的开源项目和个人博主文章，后台管理部分是在优秀的开源项目jeecgboot基础上编写，博客界面样式借鉴了IOS大佬王巍onevcat的博客样式实现了自适应布局和部分功能。说明一下，作为一个前端码农，后端接口和服务端部署环境搭建都是从零开始学习，所有功能的实现都是现学现用，安全性和稳定性都没有保证。期间，也经历了几次服务器被劫持挖矿、数据库数据被删除勒索比特币，说起来也是一把心酸泪。

项目链接地址，欢迎star：

博客前端界面

博客后台管理系统

博客项目源码

项目目录下主要分为三个部分分别对应：

• tuma-parent：项目后端；
• tuma-vue-manage：项目前端后台管理系统；
• tuma-vue-web：项目前端博客界面；

前端项目

前端项目分为两个部分，博客前端项目：vue3.0（ant-design-vue@2.2.8、axios@0.21.1、vue-router@4.0.12、vuex@4.0.0-beta.4）；后台管理项目：jeecgboot开源框架vue2.0（ant-design-vue@1.7.2、vue-router@3.0.1、vuex@3.1.0）。

1.博客前端项目主要实现的功能有：

• 自适应PC和移动端的展示界面。
• 用户登录、注册。
• 首页文章列表、浏览量、点赞量、评论量的数据展示。
• 文章详情查看、锚点定位、搜索、点赞、评论。
• 文章分类、标签的筛选查看。
• 文章归档的时间轴展示。

随着vue3.0正式版本上线和时间的推移，几个知名的UI组件库纷纷推出了vue3.0版本，比如element plus、ant design vue等，vue3.0的生态也趋于成熟。因为只是想实践一下vue3.0语法，编写之初便放弃了服务端渲染和SEO想法，使用了vue-cli搭建项目，UI使用了ant design vue。单页应用结合小水管尽管做了代码压缩和路由懒加载等处理，但首屏加载还是挺缓慢的~。

2.博客后台管理主要实现的功能有：

• 文章的新增、编辑、暂存、发布、撤回、删除、批量删除、搜索。

• 分类的新增、编辑、删除、批量删除、搜索。

• 标签的新增、编辑、删除、批量删除、搜索。

• 评论的查询、删除、批量删除。

如果不清楚jeecgboot可以移步阅读jeecgboot文档。该开源框架本身是为了提供解决构建企业级管理后台的方案，包含了一些报表、流程、消息、表单构建等我们博客项目用不上的功能，但是它提供了完整的用户登录鉴权逻辑以及一套增删改查配置可以快速生成前端页面功能还是比较方便使用的，所以博客后台管理是在这个框架上拓展的一个模块。

后端项目

后端项目也是采用了jeecgboot开源框架（mave@3.3.9、java@1.8、 springboot@2.3.5、redis@3.1.0、mybatis-plus@3.4.1、mysql@5.6），开发的接口也是对应前端项目和管理后台对应页面接口。

接口文档采用swagger，配置之后代码编写完毕也是可以快速生成在线文档方便查看和调试。

服务器部署

服务器使用的是阿里云服务器，装的系统是Alibaba Cloud Linux 64。为了支持项目运行，服务器配置了java环境、安装了mysql数据库以及nginx、node、redis、ftp等。安装部署过程中也是遇到不少问题，每个问题之后有时间也会出几期详细教程。

项目启动

clone 博客的后端、前端、后台管理项目目录到本地并安装各自的依赖。

后端项目

1. 本机安装配置好java1.8、maven3.3.9、数据库mysql5.7、redis、navicat、nginx等工具和环境。

2. 本地数据库运行tuma-parent/db/jeecgboot-mysql-5.7-20220228.sql文件配置数据环境。

3. 启动mysql、redis服务。

4. IntelliJ IDEA导入tuma-parent的springboot项目，配置数据库连接、redis端口等相关配置文件。

5. 启动后台服务。

前端项目

1. 后台管理项目、前端博客展示项目分别安装依赖包。
2. 改写request的接口请求地址为本地服务接口。
3. 启动前端项目。

至此，项目应该是可以正常启动。

项目截图