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

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

在这里插入图片描述

运行项目

在这里插入图片描述在这里插入图片描述

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

殷丿grd_志鹏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值