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

springboot+vue入门干货教程

关于vue

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

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

https://blog.youkuaiyun.com/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.youkuaiyun.com/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