快速创建一个SpringBoot + Vue的前后端分离项目

本篇介绍前端项目的搭建，后端的搭建过程在这
技术栈：

vue
element-ui
axios
mavon-editor
markdown-it
github-markdown-css

首先需要安装node，可去官网下载
node 是一个包管理工具，可方便地对程序添加依赖

//查看node是否安装成功
node -v
v12.18.1

//查看所有源
npm config get registry

//切换下载源
npm config set registry https://registry.npm.taobao.org

下载完node以后，下载vue

npm install --g vue-cli

输入vue -V查看下载是否成功

vue -V
@vue/cli 4.4.6

使用vue ui 来初始化一个项目，系统会自动打开一个网址，然后在Vue项目管理器中新建一个项目

设置好项目名后直接下一步

选择手动

下一步，这里Router和VueX是要选上的，Linter我不喜欢用，取消了选择

最后创建项目

点击运行

就可以访问网址了

element ui

安装

npm i element-ui -S

在src/main.js中进行全局注册，该文件是项目的入口

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

axios

在前后端分离项目中，发起的请求都可以通过axios完成，它对https请求进行了完善的封装，返回的是一个promise对象，我们还可以通过它对请求拦截
安装

npm i axios -S

在src/main.js中全局注册

import axios from 'axios'
Vue.prototype.$axios = axios

至此前端的基本架构搭建完成。