初识Sringboot3+vue3环境准备

这篇具有很好参考价值的文章主要介绍了初识Sringboot3+vue3环境准备。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

后端环境准备

环境准备-创建应用springboot3项目

环境准备-Maven

IDEA配置本地maven

前端环境准备

依赖管理NPM安装配置


环境准备

后端环境准备

初识Sringboot3+vue3环境准备,java,vue.js,npm

下载JDK17https://www.oracle.com/java/technologies/downloads/#jdk17-windows

初识Sringboot3+vue3环境准备,java,vue.js,npm

   

初识Sringboot3+vue3环境准备,java,vue.js,npm

安装就下一步下一步,选择安装路径 

配置环境

初识Sringboot3+vue3环境准备,java,vue.js,npm

初识Sringboot3+vue3环境准备,java,vue.js,npm

初识Sringboot3+vue3环境准备,java,vue.js,npm

初识Sringboot3+vue3环境准备,java,vue.js,npm

环境

JDK17+、IDEA2021+、maven3.5+、vscode

初识Sringboot3+vue3环境准备,java,vue.js,npm

后端

基础:javaSE,javaWeb、JDBC、SMM框架(Spring+SpringMVC+MyBatis)、MyBatis-Plus

前端

html、css、javascript,jquery、vue3、Element-ui

springboot是springboot提供的一个子项目,用于快速构建Spring应用项目。快速导入依赖,解决jar包冲突问题,编码更简单、配置更简单、部署更简单、监控更简单。

Springboot特征

1、起步依赖:整合Maven依赖,配置更简单

2、自动配置:bean自动注入ioc容器,编码更简单

3、内置tomcat、Jetty等

环境准备-创建应用springboot3项目

初识Sringboot3+vue3环境准备,java,vue.js,npm

创建项目

初识Sringboot3+vue3环境准备,java,vue.js,npm

创建空项目,配置maven

初识Sringboot3+vue3环境准备,java,vue.js,npm

环境准备-Maven

Maven是apache基金会的开源项目,使用java语法开发,maven单词的本意是:专家,内行

Maven是项目管理工具,可以对java项目进行自动化构建和依赖管理。

初识Sringboot3+vue3环境准备,java,vue.js,npm

IDEA配置本地maven

https://maven.apache.org/download.cgi

初识Sringboot3+vue3环境准备,java,vue.js,npm

初识Sringboot3+vue3环境准备,java,vue.js,npm

初识Sringboot3+vue3环境准备,java,vue.js,npm

初识Sringboot3+vue3环境准备,java,vue.js,npm

配置阿里云远程仓库镜像

初识Sringboot3+vue3环境准备,java,vue.js,npm

<mirror>

    <id>alimaven</id>

    <name>aliyun maven</name>

    <url>http://maven.aliyun.com/nexus/content/groups/public/</url>

    <mirrorOf>central</mirrorOf>

    </mirror>

检验设置是否生效

mvn help:system

初识Sringboot3+vue3环境准备,java,vue.js,npm

初识Sringboot3+vue3环境准备,java,vue.js,npm

前端环境准备

编码工具: VSCode

依赖管理:NPM

项目构建: Vuecli

NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。2020年3月17日,Github宣布收购npm,GitHub现在已经保证npm将永远免费。

NPM也可以理解为Maven

依赖管理NPM安装配置

NPM官网

https://nodejs.org/en/download/

初识Sringboot3+vue3环境准备,java,vue.js,npm

下载安装完成后

验证 Node.js 是否已成功安装

node -v

初识Sringboot3+vue3环境准备,java,vue.js,npm

在nodejs安装目录创建node_global和node_cache文件夹

初识Sringboot3+vue3环境准备,java,vue.js,npm

cmd命令,依次输入:
npm config set prefix "D:\Nodejs\node_global"
npm config set cache "D:\Nodejs\node_cache"

npm config set prefix “D:\Nodejs\node_global”:将 Node.js 全局安装包的安装路径设置为 “D:\Nodejs\node_global”。在使用 npm install -g 命令全局安装 Node.js 模块时,将会将模块安装到指定的目录中。
npm config set cache “D:\Nodejs\node_cache”:将 Node.js 模块缓存路径设置为 “D:\Nodejs\node_cache”。在使用 npm install 命令安装 Node.js 模块时,将会将模块缓存到指定的目录中。

修改系统环境变量

初识Sringboot3+vue3环境准备,java,vue.js,npm

F:\Program Files\nodejs\node_global

初识Sringboot3+vue3环境准备,java,vue.js,npm

NODE_PATH

F:\Program Files\nodejs\node_modules

初识Sringboot3+vue3环境准备,java,vue.js,npm

初识Sringboot3+vue3环境准备,java,vue.js,npm

使用npm install express -g全局安装 Express 模块

初识Sringboot3+vue3环境准备,java,vue.js,npm

说明文件权限不够,允许完全控制得以解决

初识Sringboot3+vue3环境准备,java,vue.js,npm

更改 npm 的默认源为淘宝源
npm config set registry https://registry.npm.taobao.org

恢复默认的 npm 官方源
npm config set registry https://registry.npmjs.org

初识Sringboot3+vue3环境准备,java,vue.js,npm

查看当前npm 源的 URL

初识Sringboot3+vue3环境准备,java,vue.js,npm

使用淘宝源全局安装 cnpm。cnpm 是一个基于 npm 的淘宝定制版,可以在国内更快地安装 Node.js 包

npm install -g cnpm --registry=https://registry.npm.taobao.org

初识Sringboot3+vue3环境准备,java,vue.js,npm

初识Sringboot3+vue3环境准备,java,vue.js,npm文章来源地址https://www.toymoban.com/news/detail-764909.html

到了这里,关于初识Sringboot3+vue3环境准备的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 初识VUE3

    https://cn.vuejs.org/ 全局安装vite 安装vite前要先查看镜像源地址并使用国内镜像源地址 VUE3官网 https://cn.vuejs.org/api/composition-api-lifecycle.html#onmounted

    2024年02月22日
    浏览(29)
  • 初识esbuild、构建vue3脚手架

    esbuild 非常快速的 web 打包器,使用 go 语言编写。 📦 特点: 无需缓存也能很快速的编译打包。 内置 js、css、ts、jsx 类型文件编译。 支持 es6 和 commonjs 模块。 可以编译打包成 esm 模块和 common JS 模块 tree shaking 摇树优化、优化资源大小、source-map 代码映射 启动本地服务,在监听

    2024年02月01日
    浏览(32)
  • Vue3技术1之Vue3简介、创建Vue3工程、分析工程结构、安装开发者工具与初识setup

    2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.0 性能的提升、源码的升级、更好的支持TypeScript、新的特性 官方文档 确保vue/cli版本在4.5.0以上 vue --version 安装或者升级@vue/cli npm install -g @vue/cli 创建 vue crea

    2023年04月11日
    浏览(32)
  • 助你丝滑过度到 Vue3 初识 ②②

    @作者 : SYFStrive   @博客首页 : HomePage 📜: VUE3~TS 📌: 个人社区(欢迎大佬们加入) 👉: 社区链接🔗 📌: 觉得文章不错可以点点关注 👉: 专栏连接🔗 👉 TypeScript (🔥) 👉 微信小程序 (🔥) 👉 UNIAPP开发 (🔥) 提示:以下是本篇文章正文内容 简介 : 2020年9月

    2024年02月11日
    浏览(38)
  • 【Vue3+Ts】项目启动准备和配置项目代码规范和css样式的重置

    创建项目( 使用Vite 构建工具创建项目模板) 创建完项目,npm install 一下即可 目录介绍 插件安装 看一下vscode推荐的插件 安装所推荐的插件,为了更好的类型检测 创建别名 编译说明 项目配置 配置icon和标题 配置项目别名 配置ts.config.json 检测vscode的插件是否配置 配置项目代

    2024年02月10日
    浏览(35)
  • 【尚医通】vue3+ts前端项目开发笔记 2 —— 创建项目、封装网络请求、集成elment-plus 、重置样式、准备状态管理/路由 等开发前准备

    服务器地址:http://syt.atguigu.cn 医院接口:http://139.198.34.216:8201/swagger-ui.html 公共数据接口:http://139.198.34.216:8202/swagger-ui.html 会员接口:http://139.198.34.216:8203/swagger-ui.html 短信验证码接口:http://139.198.34.216:8204/swagger-ui.html 订单接口:http://139.198.34.216:8206/swagger-ui.html 文件上传接口:

    2024年02月13日
    浏览(38)
  • 【前端Vue】Vue3+Pinia小兔鲜电商项目第4篇:静态结构搭建和路由配置,1. 准备分类组件【附代码文档】

    Vue3+ElementPlus+Pinia开发小兔鲜电商项目完整教程(附代码资料)主要内容讲述:认识Vue3,使用create-vue搭建Vue3项目1. Vue3组合式API体验,2. Vue3更多的优势,1. 认识create-vue,2. 使用create-vue创建项目,1. setup选项的写法和执行时机,2. setup中写代码的特点。什么是pinia,创建空Vue项目并安装

    2024年04月11日
    浏览(35)
  • django-vue-admin ubuntu 20.04 环境准备 记录

    django-vue-admin 运行记录 https://django-vue-admin.com/document/hjbs.html https://django-vue-admin.com/document/hjbs.html https://bbs.django-vue-admin.com/article/9.html https://gitee.com/liqianglog/django-vue-admin/tree/demo_project 1. 安装 ubuntu-20.04.6 桌面版 ubuntu-20.04.6-desktop-amd64.iso 桌面版本 桌面版的目的是 有浏览器可以看

    2024年02月11日
    浏览(72)
  • vue3集成bpmn.js

    1 安装依赖  注意依赖会有冲突,最好按照下列版本来安装: 2 编写页面 (1)引入相关依赖  (2)编写DIV (3)DIV样式调整  (4)页面初始化时,创建bpmn画板 (5)汉化bpmn assets/bpmn/zh.js assets/bpmn/translate.js index.vue中,引入translate.js\\\' new BpmnModel时,加入汉化组件 页面效果图如

    2024年02月10日
    浏览(28)
  • 前端(四)——vue.js、vue、vue2、vue3

    😊博主:小猫娃来啦 😊文章核心: vue.js、vue、vue2、vue3从全局到局部 Vue.js是一款流行的JavaScript框架 vue,vue2,vue3都是vue.js的不同版本。 Vue:Vue.js的第一个版本,也称为Vue 1.x。它于2014年首次发布,并获得了广泛的应用和认可。 Vue2:Vue.js的第二个版本,也称为Vue 2.x。它在Vu

    2024年02月12日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包