springboot+vue入门干货教程(安装及使用)+实例搭建

springboot+vue入门干货教程

关于vue

1,首先,安装node环境,自己去官网下载LTS版本安装包一步步安装即可

2,环境配置,详情参考此处

https://blog.csdn.net/m0_56951095/article/details/124093469

3,配置npm镜像源更换为淘宝镜像最新地址,此处是npm安装失败或者缓慢的主要原因

npm config set registry https://registry.npmmirror.com

4,安装 webpack-cli 依赖(在管理员cmd下执行)

npm install webpack webpack-cli -g

5,全局安装vue-cli:

npm install --global vue-cli

6,找到一个准备存放vue项目的文件夹,管理员cmd下输入vue ui(此处需要vue3.0以上版本支持,更新指令npm install @vue/cli -g)

在这里插入图片描述
启动成功进入此页面
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/cf9906b06c4941528e27c969a1c69d09.png
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

项目创建成功后,用Idea导入并打开(idea2024以上版本直接open就行)

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

创建完成!!!

vue如何使用

新建一个BookView.vue页面

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

绑定路由

在这里插入图片描述

往bookview.vue里写静态数据

在这里插入图片描述

srpingboot创建及使用

创建一个springboot项目

在这里插入图片描述
在这里插入图片描述
创建完成,打开
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/d7478e17eaa84e0b81a38c79ed0b8d3e.png
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

前后端交互,采用axios获取数据

在这里插入图片描述

引入后若启动报错,换成vue2.*项目 或者 参考配置https://blog.csdn.net/weixin_45098257/article/details/115787630?share_token=AC5E6A42-2C56-461E-BCB3-0DF1D0648257&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_ios&utm_campaign=client_share&wxshare_count=1

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值