初识Sringboot3+vue3环境准备

简介: 初识Sringboot3+vue3环境准备

环境准备

后端环境准备



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


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


配置环境


环境

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


后端

基础: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项目



创建项目


创建空项目,配置maven


环境准备-Maven


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


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


IDEA配置本地maven


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


配置阿里云远程仓库镜像

<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


前端环境准备


编码工具: 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/


下载安装完成后


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


node -v


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


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 模块时,将会将模块缓存到指定的目录中。


修改系统环境变量


F:\Program Files\nodejs\node_global


NODE_PATH


F:\Program Files\nodejs\node_modules


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


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


更改 npm 的默认源为淘宝源

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


恢复默认的 npm 官方源

npm config set registry https://registry.npmjs.org


查看当前npm 源的 URL


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

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

目录
相关文章
|
18天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
15天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
36 7
|
17天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
39 3
|
15天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
36 1
|
15天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
37 1
|
18天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
19天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
22天前
|
JavaScript API
vue3知识点:ref函数
vue3知识点:ref函数
30 2
|
22天前
|
API
vue3知识点:reactive函数
vue3知识点:reactive函数
25 1
|
22天前
|
JavaScript 前端开发 API
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
vue3知识点:Vue3.0中的响应式原理和 vue2.x的响应式
24 0