首页 > 其他分享 >初识Sringboot3+vue3环境准备

初识Sringboot3+vue3环境准备

时间:2024-01-04 12:06:56浏览次数:26  
标签:npm node Sringboot3 cache Node 初识 vue3 js 安装


环境准备

后端环境准备

初识Sringboot3+vue3环境准备_NPM

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

初识Sringboot3+vue3环境准备_vue.js_02

   

初识Sringboot3+vue3环境准备_java_03

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

配置环境

初识Sringboot3+vue3环境准备_java_04

 

初识Sringboot3+vue3环境准备_java_05

初识Sringboot3+vue3环境准备_vue.js_06


环境

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项目

初识Sringboot3+vue3环境准备_java_07

创建项目

初识Sringboot3+vue3环境准备_java_08

创建空项目,配置maven

初识Sringboot3+vue3环境准备_NPM_09

环境准备-Maven

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

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

初识Sringboot3+vue3环境准备_maven_10

IDEA配置本地maven

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

初识Sringboot3+vue3环境准备_NPM_11

初识Sringboot3+vue3环境准备_java_12

初识Sringboot3+vue3环境准备_vue.js_13

初识Sringboot3+vue3环境准备_npm_14

配置阿里云远程仓库镜像

初识Sringboot3+vue3环境准备_maven_15

<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环境准备_NPM_16

初识Sringboot3+vue3环境准备_vue.js_17

前端环境准备

编码工具: 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环境准备_maven_18

下载安装完成后

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

node -v

初识Sringboot3+vue3环境准备_java_19

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

初识Sringboot3+vue3环境准备_NPM_20

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_21

F:\Program Files\nodejs\node_global

初识Sringboot3+vue3环境准备_vue.js_22

NODE_PATH

F:\Program Files\nodejs\node_modules

初识Sringboot3+vue3环境准备_java_23

初识Sringboot3+vue3环境准备_maven_24

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

初识Sringboot3+vue3环境准备_vue.js_25

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

初识Sringboot3+vue3环境准备_maven_26

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

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

初识Sringboot3+vue3环境准备_java_27

查看当前npm 源的 URL

初识Sringboot3+vue3环境准备_npm_28

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

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

初识Sringboot3+vue3环境准备_vue.js_29

初识Sringboot3+vue3环境准备_vue.js_30

标签:npm,node,Sringboot3,cache,Node,初识,vue3,js,安装
From: https://blog.51cto.com/u_15081423/9098247

相关文章

  • VUE3 + Three.js 坑
    VUE3+Three.js坑1.问题描述将scene、camera、renderer、controls等变量用reactive变成响应式时,页面渲染会报错:three.module.js?5a89:24471UncaughtTypeError:'get'onproxy:property'modelViewMatrix'isaread-onlyandnon-configurabledatapropertyontheprox......
  • VUE框架Vue3下使用watch监听reactive下的数据变化并使深度监视起效------VUE框架
    <template><h1>{{data.counter}}</h1><button@click="data.counter++">按一下加一</button><h1>{{data.a.b.c.d.counter1}}</h1><button@click="data.a.b.c.d.counter1++">按一下加一&l......
  • 初识C语言1(C语言的部分基础认知)(初识系列主要目的在于在脑海中初步建立对C语言的认知,建
    C语言是一门通用计算机编程语言,广泛应用于底层开发。 简述写C语言代码的过程       C语言规定:main函数是程序的入口,同时main函数有且只有一个。(一个工程之中)......
  • 初识HTML5(2)
    在本文中,我将介绍HTML5的超链接标记和表格的相关标记。超链接标记超链接是HTML中非常重要的元素,它用于在不同网页或不同部分之间创建链接。以下是一些与超链接相关的标记和属性:使用<a>标签来定义超链接,其中href属性用于指定链接的目标URL,target属性用于指定链接如何打开。......
  • 初识HTML5
    HTML是一种超文本标记语言,用于创建和设计网页。HTML5是HTML的第五个版本,具有更丰富的功能和更好的效果。在开发过程中,我们可以使用Hbuilder作为开发工具,以及使用Chrome浏览器进行测试。HTML5的基本文档结构包括以下几个标签:<!DOCTYPEhtml>用于定义HTML5文档,<html>、<head>、<bod......
  • 【电影推荐系统】Spring Boot + Vue3 前后端分离项目
    目录0前言1项目前端介绍1.1项目启动和编译1.1.1项目启动1.1.2项目编译1.2前端技术栈1.3功能模块前端界面展示1.3.1基础功能模块1.3.2用户模块1.3.3特色功能展示1.3.4界面自适应实现2项目后端介绍2.1项目打包部署2.1.1项目打包2.1.2项目部署2.2后端功能实现3数据......
  • vue3的ref、reactive、toRef、toRefs
    用处:用于在setup中创建响应式变量导出:import{ref,reactive,toRef,toRefs}from'vue'区别:ref用来定义基础数据类型,String,Number,Boolean,Symbol;通过Object.defineProperty()的get和set来实现响应式;js操作数据需要.value,模版中读取不需要.valuereactive用来定义......
  • 在Vue3中实现前端导出Excel功能
    在Vue3中,可以使用第三方库如xlsx来导出Excel文件。以下是一个基本示例:一、Vue3常规写法安装xlsx库首先,你需要安装xlsx库。使用以下命令进行安装:npminstallxlsx导入函数在Vue组件中,导入所需的函数:import{writeFile}from'xlsx';创建模拟数据创建一个函数来生成Excel文件的数......
  • 01初识AXI4总线
    软件版本:vitis2021.1(vivado2021.1)操作系统:WIN1064bit硬件平台:适用XILINXA7/K7/Z7/ZU/KU系列FPGA登录"米联客"FPGA社区-www.uisrc.com视频课程、答疑解惑!1概述起初SoC片上总线处于发展阶段,不像微机总线那样成熟,目前还没有统一的标准,因此各大厂商和组织纷纷推出自己的标准,......
  • https初识
    1.服务器环境,两台服务器做前端代理,两台服务器做后端真实服务器。这里都是nginx代理服务器后端服务器172.16.5.50172.16.5.52172.16.5.51172.16.5.532、 后端两台服务器修改nginx配置文件:cd/etc/nginx/conf.dvimwww_hello80.conf###server{li......