3

初识Sringboot3+vue3环境准备

 8 months ago
source link: https://blog.51cto.com/u_15081423/9098247
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

初识Sringboot3+vue3环境准备

精选 原创

后端环境准备

初识Sringboot3+vue3环境准备_NPM

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

初识Sringboot3+vue3环境准备_java_02

初识Sringboot3+vue3环境准备_maven_03

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

初识Sringboot3+vue3环境准备_vue.js_04
初识Sringboot3+vue3环境准备_npm_05
初识Sringboot3+vue3环境准备_npm_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环境准备_npm_08

创建空项目,配置maven

初识Sringboot3+vue3环境准备_npm_09

环境准备-Maven

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

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

初识Sringboot3+vue3环境准备_NPM_10

IDEA配置本地maven

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

初识Sringboot3+vue3环境准备_NPM_11
初识Sringboot3+vue3环境准备_npm_12
初识Sringboot3+vue3环境准备_maven_13
初识Sringboot3+vue3环境准备_NPM_14

配置阿里云远程仓库镜像

初识Sringboot3+vue3环境准备_npm_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环境准备_NPM_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环境准备_vue.js_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环境准备_maven_21

F:\Program Files\nodejs\node_global

初识Sringboot3+vue3环境准备_maven_22

NODE_PATH

F:\Program Files\nodejs\node_modules

初识Sringboot3+vue3环境准备_npm_23
初识Sringboot3+vue3环境准备_vue.js_24

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

初识Sringboot3+vue3环境准备_maven_25

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

初识Sringboot3+vue3环境准备_npm_26

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

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

初识Sringboot3+vue3环境准备_npm_27

查看当前npm 源的 URL

初识Sringboot3+vue3环境准备_maven_28

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

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

初识Sringboot3+vue3环境准备_maven_29

初识Sringboot3+vue3环境准备_NPM_30
  • 收藏
  • 评论
  • 分享
  • 举报

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK