spring boot+vue个人博客三：搭建前端vue整合element ui脚手架

系列大纲
GitHub（还没开发完成）
在线演示www.yzpnb.top
第一章：(后端)搭建spring boot脚手架：https://blog.youkuaiyun.com/grd_java/article/details/107452826
第二章：权限整合shiro+jwt，完成后端接口：https://blog.youkuaiyun.com/grd_java/article/details/107481570
第三章：搭建前端vue整合element ui脚手架：https://blog.youkuaiyun.com/grd_java/article/details/107498140
第四章：首页和公共头部组件：https://blog.youkuaiyun.com/grd_java/article/details/107507213
第五章：完成登陆注册页面，nginx网关对接后端：https://blog.youkuaiyun.com/grd_java/article/details/107515437
第六章：博客页面，观看博客，博客编辑功能：https://blog.youkuaiyun.com/grd_java/article/details/107525128
第七章：打包部署，多节点部署方案：https://blog.youkuaiyun.com/grd_java/article/details/107533253

一、vue开发环境搭建

1、搭建vue脚手架

我的方法和别人不一样，因为我是百分百拒绝全局安装vue的，所以我会单体安装vue
1、创建一个文件夹，安装vue ui依赖
npm install --save @vue/cli

打开vue ui搭建脚手架
这一步非常容易出错
1、先直接输入命令 vue ui
2、如果1不行，输入命令npm run vue ui
3、如果上面都不行，按下面步骤来

{
	"name":"www",
	"version":"0.0.1",
	"scripts": {
	  	    "test": "echo \"Error: no test specified\" && exit 1",
			"vue":"vue",
	  	    "ui":"vue ui"
	  	  }
}

然后进入图形化界面创建项目

创建完成后会出现项目仪表盘，直接将页面关掉就可以了
然后我们需要回到命令行 按ctrl +c退出预编译

到这里vue环境就搭建完成了

2、安装相关依赖

1、axios

npm install --save axios

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

简单的封装axios

import axios from 'axios'

// 创建axios实例
const service = axios.create({
  baseURL: 'http://localhost:9001', // api的base_url
  timeout: 20000 // 请求超时时间
})

export default service

2、element ui

npm install element-ui --save

引入使用

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

二、封装测试

3、封装异步请求

import request from '@/utils/request.js'
export default {
  getAllBanner() {
    return request({
      url: `/cmsservice/crm-banner/api/selectAllBanner`,
      method: 'get'
    })
  },
  getNewRecommended() {
    return request({
      url: `/eduservice/api/selectNewRecommended`,
      method: 'get'
    })
  },
 }

4、测试

<el-button>默认按钮</el-button>
<el-button type="primary" disabled>主要按钮</el-button>
import test from '@/api/test.js'

created(){
	  test.getAllBanner().then(response=>{
	  	alert("成功");
	  }).catch(error=>{
	  	alert("失败");
	  })
  }

异步测试

测试element ui

运行项目

至此前端开发环境就基本搭建完成
之后会用到百度的图表之类的，到时候需要的时候在引入就行