SpringBoot-Vue项目搭建基础

最新推荐文章于 2024-07-14 21:33:55 发布
最新推荐文章于 2024-07-14 21:33:55 发布
阅读量497 收藏 1
点赞数
分类专栏： 笔记 文章标签： node.js vue.js npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45636013/article/details/120682956
版权
本文档详细介绍了如何搭建SpringBoot-Vue项目的初始环境，包括安装node.js，使用IDEA创建项目文件夹，通过npm安装Vue CLI并解决安装问题。接着，通过vue create命令创建项目，选择配置项，最后在IDEA中配置npm脚本以实现项目自动启动并打开浏览器展示Vue界面。此外，还提及了安装组件库element-plus的快速入门步骤。
摘要由CSDN通过智能技术生成

SpringBoot-Vue项目搭建基础

1.安装部署环境

node.js+IDEA

node.js

https://nodejs.org/zh-cn/

在这里插入图片描述

2.新建文件夹

例如：springboot-vue-demo

3.文件目录地址处cmd命令

命令可看vue.js文档

https://v3.cn.vuejs.org/guide/installation.html#%E5%8F%91%E5%B8%83%E7%89%88%E6%9C%AC%E8%AF%B4%E6%98%8E

执行以下命令：

node -v (查看node版本)

npm -v (查看npm版本)

npm install -g @vue/cli

(脚手架，下载慢的换cnpm，安装报错的原因是npm代理问题，使用淘宝镜像即可解决 ，加入以下代码

npm config set registry http://registry.npm.taobao.org

最低0.47元/天 解锁文章
啾啾～
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SpringBoot+Vue搭建
xmp
06-07 331
Vue脚手架安装element-ui 前后端分离解决跨越问题
Springboot+vue项目的搭建，自用
weixin_45208256的博客
05-24 2528
Springboot+vue整合 先安装Node.js 使用npm安装node.js 在cmd中输入 $ npm install vue 对vue.js进行安装 之后用vue create Gaokao-demo创建vue项目 之后再文件夹下用npm run serve 对vue项目进行启动 访问localhost:8080访问到vue界面 再直接将项目拖动到IDEA上进行打开 之后再进行配置 核心是src文件夹下内容，assets是静态资源、components是组件，router中的index.j
搭建SpringBoot+Vue框架
zd15690912965的博客
10-08 8936
自己学习框架做项目
SpringBoot + vue 管理系统
最新发布
小林的博客
07-14 1414
SpringBoot + vue 管理系统步骤： 生成的pom.xml文件 创建项目工程目录结构配置文件application.yml 设置统一返回数据 构建一个vue项目功能模块分为六部分：班级管理、学员管理、部门管理、员工管理、员工信息统计、学员信息统计开发的部门管理功能包含： 3.1.2、后端代码实现 service接口 serviceImpl 3.2、员工管理 我们可以把员工管理功能分为： 3.2.2、后端代码实现 mapper.xml 因为需要涉及到oss文件上传所
山东大学软件学院2022项目实训——（一）vue环境的搭建
m0_51588039的博客
04-19 1143
环境的配置： 首先需要需要下载npm包管理器，在官网即可下载： http://nodejs.cn/download/ 各种帖子中有相关的下载安装教程，不再赘述。下载安装后使用cmd控制台，输入npm -v和node -v命令查看版本，检验安装是否成功。 官网上有相关vue的安装教程，使用npm，使用npm install -g @vue/cli命令，即可安装vue。 官网网址： https://cn.vuejs.org/index.html 在合适位置创建一个文件夹，在文件夹内打开cmd。 使用命令vue
springboot+vue.js搭建图书管理系统开源项目
03-12
此项目为图书管理系统前台，使用vue.js,vue-resource,vue-router,iView2.0UI框架,vue-quill-editor等技术实现前台页面， 后台采用的是springboot+mybatis等技术实现数据持久化以及api服务调用，后台地址：appapidemo
spring boot + vue + element-ui开发入门——windows配置环境
qq_38808144的博客
09-06 3379
一、node.js开发环境   windows系统，去网站https://nodejs.org/en/download/，下载对应的安装程序，并安装Windows Installer (.msi) 接下来，开始配置环境变量。   我这里，node.js安装在“F:\nodejs”目录下，这根据你的具体安装路径而设置。   2.配置“NODE_PATH”为：F:\nodejs 这关系...
SpringBoot-Vue-OnlineExam.zip
06-15
本项目"SpringBoot-Vue-OnlineExam.zip"就是这样一个实现前后端分离的在线考试系统，它巧妙地融合了SpringBoot和Vue.js两大主流技术，为用户提供流畅的考试体验。 SpringBoot是由Pivotal团队维护的Java框架，其核心...
springboot和vue搭建的电商管理系统springboot-vue.zip
05-14
该项目利用了基于springboot + vue + mysql的开发模式框架实现的课设系统，包括了项目的源码资源、sql文件、相关指引文档等等。 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理...
springboot-vue-crud
08-13
"springboot-vue-crud"项目，正如其名，旨在展示如何使用Spring Boot后端与Vue.js前端构建一个完整的 CRUD（创建、读取、更新、删除）应用。这个项目涵盖了从搭建环境到实现功能的全过程，为开发者提供了宝贵的学习...
基于前后端分离的SpringBoot-Vue的一个仿知乎项目+源代码+文档说明
11-29
基于前后端分离的SpringBoot+Vue的一个仿知乎项目 ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动...
springBoot+vue初始化前后端分离项目搭建（含数据库）
09-01
springBoot+vue初始化前后端分离项目搭建（含数据库） 适合初学习 包含如何跨域 axios 比较简单清晰 https://www.cnblogs.com/mike-mei/p/13597036.html
基于SpringBoot和Vue.js构建的后台管理系统
08-07
基于Spring Boot和Vue.js构建的后台管理系统
Springboot + Vue + elementUI 快速搭建后台管理系统。springboot-vue-adm.zip
02-04
本文将深入探讨如何利用Springboot、Vue和ElementUI来快速搭建一个后台管理系统。 一、Springboot：强大的后端基础 Springboot是由Pivotal团队提供的开源框架，它简化了Spring应用的初始搭建以及开发过程。其核心...
超详细SpringBoot+Vue项目部署(两个Vue项目)
qq_52030824的博客
09-18 2万+
超详细SpringBoot+Vue项目部署(两个Vue项目)
【springboot系列】vue工程+springboot结合
haibo_bear的博客
05-16 2617
前言： 本文基于【springboot系列】前端工程之从零开始创建vue工程。 基于springboot+vue项目制作。 项目地址： springboot后端：github地址 vue前端：github地址 正文 一、前端vue 接入axios进行网络访问： npm install --save axios vue-axios 在main.js引入import配置地址进行使用： 此处使用...
Vue中demo@0.1.0 serve `vue-cli-service serve`解决方法
m0_67401935的博客
03-09 1万+
情况: 日常 cnpm run serve,突然报错 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! demo@0.1.0 serve: `vue-cli-service serve` npm ERR! Exit status 1 npm ERR! Failed at the demo@0.1.0 serve script. npm ERR! This is probably not a problem with npm. There is likely
Vue中demo@0.1.0 serve: `vue-cli-service serve`解决方法
热门推荐
qq_42822993的博客
04-01 3万+
情况: 日常 cnpm run serve,突然报错 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! demo@0.1.0 serve: `vue-cli-service serve` npm ERR! Exit status 1 npm ERR! Failed at the demo@0.1.0 serve script. npm ERR! This is probably not a problem with npm. There is likely
如何解决npm run serve运行vue项目时，出现报错:XXX不是内部或外部命令，也不是可运行的程序或批处理文件。node:internal/modules/cjs/loader:998
weixin_69005296的博客
02-02 792
出现报错:> vue-demo1@0.1.0 serve > vue-cli-service serve '素材\day03\day03\准备代码\05-脚手架相关代码\vue-demo1\node_modules\.bin\' 不是内部或外部命令，也不是可运行的程序 或批处理文件。大家在做的时候看下自己路径是否含有&符号，如果有删除就好了，路径当中含有&符号会报错，但是原因不会详细说明，一定要检查路径！在看某马视频做VUE脚手架时，用npm run serve运行。
springboot+vue项目搭建
04-07
SpringBoot+Vue项目搭建是指使用SpringBoot作为后端框架，用Vue作为前端框架的一种项目开发方式。它可以结合SpringBoot的优秀性能和Vue的便捷开发，实现快速、高效地开发Web应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值