基于vue的个人博客（在Vue+SpringBoot中如何实现博客管理平台）

本文目录

• 在Vue+SpringBoot中如何实现博客管理平台
• 如何利用VuePress搭建个人博客
• 如何将vue创建的个人博客部署到github pages上

在Vue+SpringBoot中如何实现博客管理平台

V部落是一个多用户博客管理平台。这篇文章主要介绍了Vue+SpringBoot开发V部落博客管理平台,需要的朋友可以参考下
V部落是一个多用户博客管理平台，采用Vue+SpringBoot开发。
***隐藏网址***
***隐藏网址***
登陆页面
文章列表

发表文章

用户管理

栏目管理

数据统计

技术栈
后端技术栈
后端主要采用了：
1.SpringBoot
2.SpringSecurity
3.MyBatis
4.部分接口遵循Restful风格
5.MySQL
前端技术栈
前端主要采用了：
1.Vue
2.axios
3.ElementUI
4.vue-echarts
5.mavon-editor
6.vue-router
还有其他一些琐碎的技术我就不在这里一一列举了。
快速运行
1.克隆本项目到本地
git@github.com:lenve/VBlog.git
2.找到blogserver项目中resources目录下的vueblog.sql文件，在MySQL数据库中执行
3.根据自己本地情况修改数据库配置，数据库配置在SpringBoot项目的application.properties中
4.在IntelliJ IDEA中运行blogserver项目
***隐藏网址***
5.进入到vueblog目录中，在控制台依次输入如下命令：
# 安装依赖
npm install
# 在 localhost:8080 启动项目
***隐藏网址***
6.最后可以用WebStorm等工具打开vueblog项目，继续开发，开发完成后，当项目要上线时，依然进入到vueblog目录，然后执行如下命令：
npm run build该命令执行成功之后，vueblog目录下生成一个dist文件夹，将该文件夹中的两个文件static和index.html拷贝到SpringBoot项目中resources/static/目录下，然后就可以像第4步那样直接访问了。
步骤5中需要大家对NodeJS、NPM等有一定的使用经验，不熟悉的小伙伴可以先自行搜索学习下，推荐Vue 官方教程 。
项目依赖
1. vue-echarts
2. mavonEditor
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
vue vuex vue-rouert 权限路由（详细教程）
在Angular中如何实现orderBy排序与模糊查询
在Angular中如何实现敏感文字提示
在Angular中如何实现隐藏显示

如何利用VuePress搭建个人博客

这次给大家带来如何利用VuePress搭建个人博客，利用VuePress搭建个人博客的注意事项有哪些，下面就是实战案例，一起来看一下。
VuePress
vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器，实际上就是一个vue的spa应用，内置webpack，可以用来写文档。
一个基于 Vue SSR 的静态站生成器，本来的目的是爽爽的写文档，但是我发现用来撸一个人博客也非常不错。
这是VuePress的官方文档
上手搭建
你可以跟着文档上的例子自己玩一玩，不过由于VuePress的文档也是用VuePress来实现的，所以我取巧直接拿VuePress仓库中的docs目录拿来玩耍。
1.首先安装VuePress到全局
npm install -g vuepress
2.然后把VuePress仓库克隆到你的电脑
git clone git@github.com:docschina/vuepress.git
在docs文件中执行（请确保你的 Node.js 版本 》= 8）
cd vuepress
cd docs
vuepress dev当你看到这一行就说明已经成功了：
***隐藏网址***
发现真的打开了vuepress文档：
下面的工作就是数据的替换了，但我们应该先看一下docs的目录结构：
├─.vuepress
│ ├─components
│ └─public
│ └─icons
│ └─config.js // 配置文件
├─config // Vuepress文档的配置参考内容
├─default-theme-config // Vuepress文档的默认主题配置内容
├─guide // Vuepress文档的指南内容
└─zh // 中文文档目录
├─config
├─default-theme-config
└─guide
└─README.md // 首页配置文件文档分成了两部分，中文文档在/zh/目录下，英文文档在根目录下。
其实目录里面的东西都挺好看懂的，首先guide 、default-theme-config、config 这三个目录中的都是Vuepress文档的主要内容，从中文文档里也可以看到只有这三个目录被替换了。
首页配置
默认主题提供了一个主页布局，要使用它，需要在你的根目录 README.md 的 YAML front matter 中指定 home：true，并加上一些其他的元数据。
我们先看看根目录下的README,md：
home: true // 是否使用Vuepress默认主题
heroImage: /hero.png // 首页的图片
actionText: Get Started → // 按钮的文字
actionLink: /guide/ // 按钮跳转的目录
features: // 首页三个特性
- title: Simplicity First
details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright ? 2018-present Evan You // 页尾实在看不懂，官网有比我更详细的配置说明。
导航配置
导航配置文件在.vuepress/config.js中
在导航配置文件中nav是控制导航栏链接的，你可以把它改成自己的博客目录。
nav: [
{
text: ’Guide’,
link: ’/guide/’,
},
{
text: ’Config Reference’,
link: ’/config/’
},
{
text: ’Default Theme Config’,
link: ’/default-theme-config/’
}
]剩下的默认主题配置官方文档都有很详细的文档说明这里就不在_嗦了。
更改默认主题色
你可以在.vuepress/目录下创建一个override.styl文件。
vuepress提供四个可更改的颜色：
$accentColor = #3eaf7c // 主题色
$textColor = #2c3e50 // 文字颜色
$borderColor = #eaecef // 边框颜色
$codeBgColor = #282c34 // 代码背景颜色我把它改成了这样：
侧边栏的实现
由于评论区里问的人较多，所以在这里更新一下，其实我就算在这里写的再详细也不如大家去看官方文档。
侧边栏的配置也在.vuepress/config.js中：
sidebar: [
{
title: ’JavaScript’, // 侧边栏名称
collapsable: true, // 可折叠
children: [
’/blog/JavaScript/学会了ES6，就不会写出那样的代码’, // 你的md文件地址
]
},
{
title: ’CSS’,
collapsable: true,
children: [
’/blog/CSS/搞懂Z-index的所有细节’,
]
},
{
title: ’HTTP’,
collapsable: true,
children: [
’/blog/HTTP/认识HTTP-Cookie和Session篇’,
]
},
]对应的文档结构：
├─blog // docs目录下新建一个博客目录
│ ├─CSS
│ ├─HTTP
│ └─JavaScript我的博客：brownhu
部署
在配置好你博客之后，命令行执行：
Vuepress build
当你看到这一行就说明成功了：
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
Node.js+console输出日志文件实例分析
如何使用Vue实现拖拽效果

如何将vue创建的个人博客部署到github pages上

Github
Pages只能存放静态页面，不能运行后台代码，不能动态生成文件，也不能有数据库。你看到的“博客引擎”其实是页面生成器，即把你写的模版等动态代码转
成静态页面，然后才能放到Github上。所以，Github
Pages基本上只能用来做项目主页