基于Spring Boot+Vue的博客系统 01——博客简介和项目初始化

废弃说明：
这个专栏的文章本意是记录笔者第一次搭建博客的过程，文章里里有很多地方的写法都不太恰当，现在已经废弃，关于SpringBoot + Vue 博客系列，笔者重新写了这个系列的文章，不敢说写的好，但是至少思路更加清晰，还在看SpringBoot + Vue 博客系列文章的朋友可以移步：https://blog.csdn.net/li3455277925/category_10341110.html，文章中有错误的地方或者大家有什么意见或建议都可以评论或者私信交流。

概述

为什么要自己搭建博客？

第一个原因是因为个人认为一个程序员应该有自己的博客，用来记录生活的点点滴滴，用来总结学习过程中踩过的坑。再者就是因为在网上看过很多教程，也有跟着网上的实战项目在做，但是这种跟着别人敲代码的感觉缺乏独立思考的过程。于是就想着自己做一个项目，尽可能地用到学过的知识。做到对学过知识的温故知新，加深记忆。

博客简介

• 前端主要用到 Vue、Vuex、BootstrapVue、axios等技术
• 后端是使用SpringBoot构建的一个单体应用，数据库为了方便演示暂时使用H2
• 博客主界面如下：
  

开始

1. 使用vue-cli快速构建项目

vue-cli官网：https://cli.vuejs.org/zh/guide/cli-service.html
参考博客：http://jspang.com/posts/2017/04/10/vue-cli.html

2. 使用vscode打开项目，结构如图
   

3. 使用命令npm run dev，运行项目，在浏览器中打开http://localhost:8080，如下图
   

4. 使用BootstrapVue

BootstrapVue官网：https://bootstrap-vue.js.org/

按照官网上面的步骤进行安装：1.运行npm install bootstrap-vue命令 2.修改main.js为如下内容

import Vue from 'vue'
import App from './App'
import router from './router'

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

下图为官网步骤：

5. 测试

修改HelloWord.vue，删除不必要的代码，放置一个巨幕

<template>
  <div class="hello">
    <b-jumbotron header="BootstrapVue">
      <p>测试使用BootstrapVue</p>
    </b-jumbotron>
  </div>
</template>

<script>
export default {
  name: "HelloWorld"
};
</script>

<style scoped>
</style>

页面效果如下：