# vue-blog

**Repository Path**: carpONE_admin/vue-blog

## Basic Information

- **Project Name**: vue-blog
- **Description**: 一个基于SpringBoot+Vue开发的前后端分离博客项目，适合新手练习。
ui采用element-ui，
注：来源-微信公众号：MarkerHub
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-11-14
- **Last Updated**: 2023-03-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, JavaScript

## README

# vueblog-vue

> 作者：吕一明
>
> 关注公众号：MarkerHub，回复【vueblog】，获取项目源码！
>
> [项目视频](https://link.juejin.cn/?target=https%3A%2F%2Fwww.bilibili.com%2Fvideo%2FBV1PQ4y1P7hZ%2F)
>
> [项目演示](https://link.juejin.cn/?target=http%3A%2F%2Fwww.markerhub.com%3A8084%2Fblogs)
>
> 转载请保留此引用，感谢！



### 一、介绍

一个基于SpringBoot + Vue开发的前后端分离博客项目，带有超级详细开发文档和讲解视频。还未接触过vue开发，或者前后端分离的同学。



### 二、技术栈：

![](./src/assets/技术栈.png)



### 三、项目效果：

![](./src/assets/project_view.png)

![](./src/assets/project_view1.png)

### 四、环境准备 （window）

#### 1、node.js安装以及配置

[node.js安装](http://8.142.44.85:2022/index.php/2021/11/09/nodejs%e5%ae%89%e8%a3%85%e5%92%8c%e9%85%8d%e7%bd%ae%ef%bc%88%e5%ae%8c%e6%95%b4%e7%89%88%ef%bc%89/)

#### 2、vue的可视化管理工具界面

```bash
npm install -g @vue/cli
```

**安装vue-cli后在终端面板输入**<span style="color:red">切记要以管理员身份允行终端面板</span>

```bash
vue ui
```

运行vue ui之后，会为我们打开一个[http://localhost:8080](https://link.juejin.cn/?target=http%3A%2F%2Flocalhost%3A8080) 的页面：

然后切换到【创建】，注意创建的目录最好是和你运行vue ui同一级。这样方便管理和切换。然后点击按钮【在此创建新目录】

![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/97bebb1424b940138e95adf88d0aa2a9~tplv-k3u1fbpfcp-watermark.awebp)

下一步中，项目文件夹中输入项目名称“vueblog-vue”，其他不用改，点击下一步，选择【手动】，再点击下一步，如图点击按钮，勾选上路由Router、状态管理Vuex，去掉js的校验。

![图片](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7323c9782b774a1384618afe57be2ef2~tplv-k3u1fbpfcp-watermark.awebp)

下一步中，也选上【Use history mode for router】，点击创建项目，然后弹窗中选择按钮【创建项目，不保存预设】，就进入项目创建啦。

#### 3、安装element-ui

接下来我们引入element-ui组件（[element.eleme.cn](https://link.juejin.cn/?target=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN%2Fcomponent%2Finstallation)）

命令很简单：

```bash
# 切换到项目根目录
cd vueblog-vue
# 安装element-ui
cnpm install element-ui --save
```

然后我们打开项目src目录下的main.js，引入element-ui依赖。

```js
import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"
Vue.use(Element)
```

#### 四、安装axios

安装axios（[www.axios-js.com/](https://link.juejin.cn/?target=http%3A%2F%2Fwww.axios-js.com%2F)），axios是一个基于 promise 的 HTTP 库，这样我们进行前后端对接的时候，使用这个工具可以提高我们的开发效率。

安装命令：

```bash
cnpm install axios --save
```

然后同样我们在main.js中全局引入axios。

```js
import axios from 'axios'
Vue.prototype.$axios = axios //
```

组件中，我们就可以通过this.$axios.get()来发起我们的请求了。

### 五、开始搞起

[文档教学](http://8.142.44.85:2022/index.php/2021/11/14/vue-blog/)

[视频教学](https://link.juejin.cn/?target=https%3A%2F%2Fwww.bilibili.com%2Fvideo%2FBV1PQ4y1P7hZ%2F)