系列大纲 |
---|
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 |
---|
运行项目 |
---|
至此前端开发环境就基本搭建完成 |
---|
之后会用到百度的图表之类的,到时候需要的时候在引入就行 |