spring boot + vue 搭建环境
参考文档:https://blog.csdn.net/weixin_44215249/article/details/117376417?fromshare=blogdetail&sharetype=blogdetail&sharerId=117376417&sharerefer=PC&sharesource=qxpapt&sharefrom=from_link.
spring boot + vue 搭建环境
- 一、浏览器
- 二、jdk8安装及配置
- 三、maven安装及配置
- 下载安装maven
- 配置maven环境变量
- 配置本地仓库
- 配置阿里云的镜像
- Q&A
- 参考文档
- 四、 IDEA的安装及配置
- 下载安装IDEA
- 五、MySQL的安装及配置
- 下载安装MySQL
- 验证是否安装成功
- 参考文档
- 六、node.js安装及配置
- 下载node.js
- 环境变量配置
- 测试环境变量是否配置成功
- 安装淘宝镜像
- Q&A
- 七、git安装及配置
- git的下载
- 参考文档
软件 | 软件配置版本号 |
---|---|
jdk | jdk-8u181(1.8.0_181)(总是提示版本太低,升级之后的版本是1.8.0_411) |
maven | apache-maven-3.8.8 |
IDEA | ideaIU-2023.3.5 |
MySQL | mysql Ver 8.0.36 |
nodejs | 长期支持版本: 18.19.1-x64.msi |
一、浏览器
比较推荐chrome浏览器,下载之后可以做这些操作:设置搜索引擎为Bing,设置下载地址,安装自己需要的扩展插件,导入书签(如果有)
谷歌浏览器下载地址: https://www.google.cn/chrome/index.html.
二、jdk8安装及配置
参考以下博客:APP测试环境部署:https://blog.csdn.net/qxpapt/article/details/136067615?fromshare=blogdetail&sharetype=blogdetail&sharerId=136067615&sharerefer=PC&sharesource=qxpapt&sharefrom=from_link.
三、maven安装及配置
maven下载地址: https://maven.apache.org/download.cgi.
下载安装maven
1、选择适合的maven下载 ,我下载的是apache-maven-3.8.8 版本
注意:Maven的版本要老于IDEA的版本,否则导入Maven工程时会报错!
Binary是可执行版本,已经编译好可以直接使用。
Source是源代码版本,需要自己编译成可执行软件才可使用。
tar.gz格式的文件比zip文件小很多,用于unix操作系统。
zip格式用于Windows操作系统
2、下载解压缩安装时必须要解压到一个没有中文的没有空格的文件夹内(很多带中文路径会报错)
配置maven环境变量
1、环境变量配置
点击【此电脑】-单击右键-【属性】-【高级系统设置】-【环境变量】
变量名 | 变量值 |
---|---|
M2_HOME | F:\Maven\apache-maven-3.8.8 |
Path | %M2_HOME%\bin或F:\Maven\apache-maven-3.8.8\bin |
a.在系统变量中添加新的变量:进入控制面板》系统》高级系统设置》环境变量(Window11)》新建系统变量》变量值是Maven的解压地址
b.在path中添加maven的bin目录,就是你的Maven安装目录下的bin文件夹的绝对路径,便于执行命令,编辑完后点击确定
2、检验环境是否配置成功
win+R运行cmd,在控制台敲入 mvn -v 命令,出现下列类似内容时,说明配置成功。
配置本地仓库
本地仓库存储着我们每个项目有可能用到的插件和 jar 包, Maven安装成功后会在C盘下面有个默认的本地仓库: 它的默认地址是 C:\Users\用户名.m2(eg:${user.home}/.m2/repository)找到 setings.xml 配置文件,配置其其他位置的本地仓库:添加: < localRepository >xxx < /localRepository>即可。
1、在Maven解压路径同层级创建仓库目录repo,用作maven的本地库,也可以创建在其他地方,创建在Maven下是方便管理
2、配置使用本地仓库,找到F:\Maven\apache-maven-3.8.8\conf目录下的settings.xml文件(注意你自己的解压安装路径)
找到节点localRepository,在注释外添加自己仓库的位置,这里我添加的是:
<localRepository>F:\Maven\repo</localRepository>
localRepository节点用于配置本地仓库,本地仓库其实起到了一个缓存的作用,当我们从maven中获取jar包的时候,maven首先会在本地仓库中查找,如果本地仓库有则返回;如果没有则从远程仓库中获取包,并在本地库中保存。此外,我们在maven项目中运行mvn install,项目将会自动打包并安装到本地仓库中。
配置阿里云的镜像
1、在settings.xml配置文件中找到mirrors节点。
2、添加如下配置
国外的服务器下载jar包很慢所以我们改为阿里云服务器,此镜像为阿里云仓库镜像(该镜像有多个,可以选择适合自己的)
注意:要添加在和两个标签之间,其它配置同理。虽然mirrors可以配置多个子节点,但是它只会使用其中的一个节点,即默认情况下配置多个mirror的情况下,只有第一个生效,只有当前一个mirror无法连接的时候,才会去找后一个。
<!--阿里云仓库 -->
<mirrors>
<mirror>
<id>aliyunmaven</id>
<mirrorOf>*</mirrorOf>
<name>阿里云公共仓库</name>
<url>https://maven.aliyun.com/repository/public</url>
</mirror>
</mirrors>
3、下载本地仓库缺省文件
win+R运行cmd,输入mvn help:system测试,配置成功则会出现下图情况,下载的时间可能会有些长,耐心等待一下,下载完成后本地仓库中会出现一些文件
Q&A
1、报错信息 这个应该是< localRepository >xxx < /localRepository>路径写错(一定要仔细检查)
2、 mirrors 节点需要一一对应起来
可以用记事本打开这个配置文件,查看报错信息,定位代码是第几行
参考文档
Maven的安装与配置(设置本地Maven仓库、IDEA配置Maven)
https://blog.csdn.net/hanjmm/article/details/126108846.
mvn help:system报错总结:
https://blog.csdn.net/qq_47994979/article/details/118249347.
spring boot + vue 搭建开发环境
https://blog.csdn.net/weixin_44215249/article/details/117376417.
我的settings.xml文件配置如下:
<?xml version="1.0" encoding="UTF-8"?>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<!--
| This is the configuration file for Maven. It can be specified at two levels:
|
| 1. User Level. This settings.xml file provides configuration for a single user,
| and is normally provided in ${user.home}/.m2/settings.xml.
|
| NOTE: This location can be overridden with the CLI option:
|
| -s /path/to/user/settings.xml
|
| 2. Global Level. This settings.xml file provides configuration for all Maven
| users on a machine (assuming they're all using the same Maven
| installation). It's normally provided in
| ${maven.conf}/settings.xml.
|
| NOTE: This location can be overridden with the CLI option:
|
| -gs /path/to/global/settings.xml
|
| The sections in this sample file are intended to give you a running start at
| getting the most out of your Maven installation. Where appropriate, the default
| values (values used when the setting is not specified) are provided.
|
|-->
<settings xmlns="http://maven.apache.org/SETTINGS/1.2.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.2.0 https://maven.apache.org/xsd/settings-1.2.0.xsd">
<!-- localRepository
| The path to the local repository maven will use to store artifacts.
|
| Default: ${user.home}/.m2/repository
<localRepository>/path/to/local/repo</localRepository>
-->
<localRepository>F:\Maven\repo</localRepository>
<!-- interactiveMode
| This will determine whether maven prompts you when it needs input. If set to false,
| maven will use a sensible default value, perhaps based on some other setting, for
| the parameter in question.
|
| Default: true
<interactiveMode>true</interactiveMode>
-->
<!-- offline
| Determines whether maven should attempt to connect to the network when executing a build.
| This will have an effect on artifact downloads, artifact deployment, and others.
|
| Default: false
<offline>false</offline>
-->
<!-- pluginGroups
| This is a list of additional group identifiers that will be searched when resolving plugins by their prefix, i.e.
| when invoking a command line like "mvn prefix:goal". Maven will automatically add the group identifiers
| "org.apache.maven.plugins" and "org.codehaus.mojo" if these are not already contained in the list.
|-->
<pluginGroups>
<!-- pluginGroup
| Specifies a further group identifier to use for plugin lookup.
<pluginGroup>com.your.plugins</pluginGroup>
-->
</pluginGroups>
<!-- proxies
| This is a list of proxies which can be used on this machine to connect to the network.
| Unless otherwise specified (by system property or command-line switch), the first proxy
| specification in this list marked as active will be used.
|-->
<proxies>
<!-- proxy
| Specification for one proxy, to be used in connecting to the network.
|
<proxy>
<id>optional</id>
<active>true</active>
<protocol>http</protocol>
<username>proxyuser</username>
<password>proxypass</password>
<host>proxy.host.net</host>
<port>80</port>
<nonProxyHosts>local.net|some.host.com</nonProxyHosts>
</proxy>
-->
</proxies>
<!-- servers
| This is a list of authentication profiles, keyed by the server-id used within the system.
| Authentication profiles can be used whenever maven must make a connection to a remote server.
|-->
<servers>
<!-- server
| Specifies the authentication information to use when connecting to a particular server, identified by
| a unique name within the system (referred to by the 'id' attribute below).
|
| NOTE: You should either specify username/password OR privateKey/passphrase, since these pairings are
| used together.
|
<server>
<id>deploymentRepo</id>
<username>repouser</username>
<password>repopwd</password>
</server>
-->
<!-- Another sample, using keys to authenticate.
<server>
<id>siteServer</id>
<privateKey>/path/to/private/key</privateKey>
<passphrase>optional; leave empty if not used.</passphrase>
</server>
-->
</servers>
<!-- mirrors
| This is a list of mirrors to be used in downloading artifacts from remote repositories.
|
| It works like this: a POM may declare a repository to use in resolving certain artifacts.
| However, this repository may have problems with heavy traffic at times, so people have mirrored
| it to several places.
|
| That repository definition will have a unique id, so we can create a mirror reference for that
| repository, to be used as an alternate download site. The mirror site will be the preferred
| server for that repository.
|-->
<!-- mirrors>
<mirror
| Specifies a repository mirror site to use instead of a given repository. The repository that
| this mirror serves has an ID that matches the mirrorOf element of this mirror. IDs are used
| for inheritance and direct lookup purposes, and must be unique across the set of mirrors.
|
<mirror>
<id>mirrorId</id>
<mirrorOf>repositoryId</mirrorOf>
<name>Human Readable Name for this Mirror.</name>
<url>http://my.repository.com/repo/path</url>
</mirror>
</mirror>
-->
<mirror>
<id>maven-default-http-blocker</id>
<mirrorOf>external:http:*</mirrorOf>
<name>Pseudo repository to mirror external repositories initially using HTTP.</name>
<url>http://0.0.0.0/</url>
<blocked>true</blocked>
</mirror>
<!--阿里云仓库 -->
<mirrors>
<mirror>
<id>aliyunmaven</id>
<mirrorOf>*</mirrorOf>
<name>阿里云公共仓库</name>
<url>https://maven.aliyun.com/repository/public</url>
</mirror>
</mirrors>
<!-- profiles
| This is a list of profiles which can be activated in a variety of ways, and which can modify
| the build process. Profiles provided in the settings.xml are intended to provide local machine-
| specific paths and repository locations which allow the build to work in the local environment.
|
| For example, if you have an integration testing plugin - like cactus - that needs to know where
| your Tomcat instance is installed, you can provide a variable here such that the variable is
| dereferenced during the build process to configure the cactus plugin.
|
| As noted above, profiles can be activated in a variety of ways. One way - the activeProfiles
| section of this document (settings.xml) - will be discussed later. Another way essentially
| relies on the detection of a system property, either matching a particular value for the property,
| or merely testing its existence. Profiles can also be activated by JDK version prefix, where a
| value of '1.4' might activate a profile when the build is executed on a JDK version of '1.4.2_07'.
| Finally, the list of active profiles can be specified directly from the command line.
|
| NOTE: For profiles defined in the settings.xml, you are restricted to specifying only artifact
| repositories, plugin repositories, and free-form properties to be used as configuration
| variables for plugins in the POM.
|
|-->
<profiles>
<!-- profile
| Specifies a set of introductions to the build process, to be activated using one or more of the
| mechanisms described above. For inheritance purposes, and to activate profiles via <activatedProfiles/>
| or the command line, profiles have to have an ID that is unique.
|
| An encouraged best practice for profile identification is to use a consistent naming convention
| for profiles, such as 'env-dev', 'env-test', 'env-production', 'user-jdcasey', 'user-brett', etc.
| This will make it more intuitive to understand what the set of introduced profiles is attempting
| to accomplish, particularly when you only have a list of profile id's for debug.
|
| This profile example uses the JDK version to trigger activation, and provides a JDK-specific repo.
<profile>
<id>jdk-1.4</id>
<activation>
<jdk>1.4</jdk>
</activation>
<repositories>
<repository>
<id>jdk14</id>
<name>Repository for JDK 1.4 builds</name>
<url>http://www.myhost.com/maven/jdk14</url>
<layout>default</layout>
<snapshotPolicy>always</snapshotPolicy>
</repository>
</repositories>
</profile>
-->
<!--
| Here is another profile, activated by the system property 'target-env' with a value of 'dev',
| which provides a specific path to the Tomcat instance. To use this, your plugin configuration
| might hypothetically look like:
|
| ...
| <plugin>
| <groupId>org.myco.myplugins</groupId>
| <artifactId>myplugin</artifactId>
|
| <configuration>
| <tomcatLocation>${tomcatPath}</tomcatLocation>
| </configuration>
| </plugin>
| ...
|
| NOTE: If you just wanted to inject this configuration whenever someone set 'target-env' to
| anything, you could just leave off the <value/> inside the activation-property.
|
<profile>
<id>env-dev</id>
<activation>
<property>
<name>target-env</name>
<value>dev</value>
</property>
</activation>
<properties>
<tomcatPath>/path/to/tomcat/instance</tomcatPath>
</properties>
</profile>
-->
</profiles>
<!-- activeProfiles
| List of profiles that are active for all builds.
|
<activeProfiles>
<activeProfile>alwaysActiveProfile</activeProfile>
<activeProfile>anotherAlwaysActiveProfile</activeProfile>
</activeProfiles>
-->
</settings>
四、 IDEA的安装及配置
下载安装IDEA
下载地址:https://www.jetbrains.com/idea/download/?section=windows#section=windows.
选择 Ultimate 版本进行下载安装,Community 版本为社区版,免费,只支持部分功能(部分通过文章链接进官网下载该软件,可能安装了汉化插件)
下载完后在本地找到该文件,双击运行 idea 安装程序
修改安装路径,我这里修改到了F盘
勾选创建卓main快捷方式
开始安装
安装成功进入的界面
选择New Project这里选择创建一个空的项目名为Server-side,最后点击创建即可
成功创建一个project
五、MySQL的安装及配置
下载安装MySQL
官网下载地址:https://www.mysql.com/downloads/.
按下图顺序点击进入下载页面
注意:这里MSI Installe有两个,第一个(大小2.4M)是通过联网在线安装,会在线下载安装包;第二个(大小437.3M)是离线安装。这里选择第二个(包含32位和64位安装包),下载到本地后进行安装。
双击下载的安装包,开始安装
选择Service only,点击Next
点击Execute,检测需要的安装,检测完毕后,接着点Next
密码验证方式(Authentication Method)【重要】
第一个是强密码校验,mysql推荐使用最新的数据库和相关客户端,MySQL8换了加密插件,所以如果选第一种方式,很可能导致你的navicat等客户端连不上mysql8;所以一定要选第二个(下图红框的地方),选完后点击next
设置密码,需要牢记,因为后面要用这个密码连接数据库,用户名为root
输完密码后,点击next继续。
服务器文件权限(Server File Permissions),选择第一个
验证是否安装成功
1、使用管理员身份打开cmd命令窗口,点击【开始】菜单,在搜索区域输入“命令提示符”,然后点击【以管理员身份运行】
2、在电脑中找到安装好的MySQL的bin文件目录 ,我的安装目录是:C:\Program Files\MySQL\MySQL Server 8.0\bin
3、在命令提示符中先输入cd C:\Program Files\MySQL\MySQL Server 8.0\bin 打开目录,然后输入mysql -h localhost -u root -p 登录数据库,再输入数据库密码,登录成功查看信息。
输入 status 命令可以查看 MySQL的 版本信息,说明安装成功
参考文档
安装教程:https://blog.csdn.net/weixin_39289696/article/details/128850498.
六、node.js安装及配置
下载node.js
1、选择对应你系统的Node.js版本,这里我选择的是Windows系统、64位,node.js下载地址:https://nodejs.cn/download/.
2、安装程序
下载完成后,双击安装包,开始安装Node.js,直接点击【Next】
直接点击【Next】按钮,可根据个人需求修改安装路径,我一般不会将这些软件放在C盘,以免造成卡顿
可根据自身需求进行,此处我选择默认安装,继续点击【Next】按钮
直接点击【Next】按钮
点击【Install】按钮进行安装
安装完毕,点击【Finish】按钮
3、测试是否安装成功
按下【win+R】键,输入cmd,打开cmd窗口
//命令行输入
node -v // 显示node.js版本
npm -v // 显示npm版本
//--成功显示版本说明安装成功
环境变量配置
1、创建文件夹
找到刚刚nodejs的安装目录,在安装目录下新建两个文件夹【node_global】和【node_cache】
创建完毕后,使用管理员身份打开cmd命令窗口,点击【开始】菜单,在搜索区域输入“命令提示符”,然后点击【以管理员身份运行】
在命令行输入以下命令
//npm config set prefix “nodejs的安装路径\node_global” (复制你刚刚创建的“node_global”文件夹路径)
npm config set prefix "F:\nodejs\node_global"
//npm config set cache “nodejs的安装路径\node_cache” (复制你刚刚创建的“node_cache”文件夹路径)
npm config set cache "F:\nodejs\node_cache"
2、配置环境变量
环境变量参数如下:
变量名 | 变量值 |
---|---|
NODE_PATH | F:\nodejs\node_global\node_modules |
Path(系统变量) | %NODE_PATH% |
Path(用户变量) | F:\nodejs\node_global |
【此电脑】-单击右键-【属性】-【高级系统设置】-【环境变量】-系统变量-新建
添加变量名为NODE_PATH的系统变量,查看【nodejs的安装路径\node_global】下是否多出【node_modules】的文件夹(我的路径是F:\nodejs\node_global)。 如果输入变量值之后没有自动创建【node_modules】文件夹,就在【node_global】下手动创建一个【node_modules】文件夹,再复制你创建的【node_modules】文件夹的路径地址到变量值
在【系统变量】中选择【Path】点击【编辑】-【新建】添加【%NODE_PATH%】,随后一直点击【确定】
在【用户变量】选择【Path】点击【编辑】
将默认的 C 盘下【 AppData\Roaming\npm 】修改成 【node_global】的路径,点击确定
测试环境变量是否配置成功
配置完成后,使用管理员身份打开cmd命令窗口(以下所有命令窗口都是管理员身份打开),点击【开始】菜单,在搜索区域输入“命令提示符”,然后点击【以管理员身份运行】,全局安装一个最常用的 express(npm install express -g) 模块进行测试
npm install express -g // -g代表全局安装
/*更新npm*/
npm install -g npm
出现以下界面即为配置成功
Tips:如果出现报错,请将报错信息百度一下,通过报错排查问题,是最快的解决路径。(因为我每次都不会看报错信息,只是百度命令导致不好定位问题,找到解决办法)
安装好的npm、express会出现在【node_global】下的【node_modules】文件夹里
安装淘宝镜像
以管理员身份在命令窗口运行以下命令:
npm config set registry https://registry.npm.taobao.org
/*npm是node官方的包管理器 查看是否安装成功*/
npm config get registry
为什么安装淘宝镜像? 它通过缓存和镜像npm的公开仓库来提供更快的下载速度。
当你在项目中配置了淘宝镜像后,所有的npm包都将从镜像站点下载,而不是从原始的npm仓库下载。 这大大提高了下载速度,特别是在中国地区。
要使用淘宝镜像,你需要在npm配置中设置registry为淘宝提供的镜像地址
安装成功如下图所示
Q&A
npm install express -g 总是报错 // -g代表全局安装总是报错
1、没有使用管理员身份运行cmd窗口
未使用管理员身份运行cmd报错,如下图:
2、修改一下【node_global】和【node_cache]的权限
修改【node_global】和【node_cache]的权限, 鼠标右击【node_global】的文件夹,点击【属性】,再点击【安全】,再点击【编辑】,将权限都勾上,随即点击【确定】即可,【node_cache】步骤同理。
3、以上两种都没有解决问题的话,我就使用了第三种
以管理员身份运行以下命令后,执行npm install express -g,安装成功
/*查看当前系统时间*/
date
/*查看返回系统时间是否正确*/
/*如果不正确使用以下命令来设置系统时间。
例如,如果你想将系统时间设置为2023年3月16日,你可以输入以下命令:*/
date 2023-03-16
/*清除npm的缓存*/
npm cache clean --force
/*更新npm*/
npm install -g npm
注意:有人说还要取消证书验证,执行第二行代码,但是npm config set strict-ssl false会绕过ssl验证导致连接容易受他人攻击,有安全风险。不得已的方法才会这么做,建议有其他优先解决的方法还是用其他方法
npm cache clean --force
npm config set strict-ssl false
npm install
4、还有一个输入命令的时候我把后面的注释也复制上去了,总是安装失败,要删掉注释
参考文档
报错教程:https://blog.csdn.net/tombosky/article/details/135835362.
安装教程:https://blog.csdn.net/WHF__/article/details/129362462.
七、git安装及配置
git的下载
git下载地址:https://git-scm.com/download/.
使用Windows系统自带的浏览器Edge访问git下载地址,能够自动识别电脑的操作系统,点击“Download for windows”或者“Windows”即可到Git版本页面。
查看电脑是多少位的操作系统(查看方式:此电脑》属性》系统》系统信息)来确定下载什么版本的git
Git for Windows Setup和Git for Windows Portable(便携版)两个版本都
可以,我选择的是64bit基本版本,选择"64-bit Git for Windows Setup"。
Git Portable是针对windows版git所设计的一款软件,是便携版或移动版的git。你可以选择将它安装在U盘等便携设备上。它不需要安装,也不会在注册表上留下记录。正因为这样,你也无法像桌面版的git那样,使用右键“git Bash here”或者“git GUI here”。
参考文档
git的安装与下载:https://blog.csdn.net/mukes/article/details/115693833.
配置参考教程:https://zhuanlan.zhihu.com/p/443527549.