前后端开发环境的安装教程

1、nodejs安装

1.1、通过nvm安装(推荐)

去网站下载nvm 安装默认安装即可 nvm官网：https://nvm.uihtm.com/
安装完之后，去安装目录找到settings.txt文件
追加下面两行，配置淘宝镜像，用于加速下载

node_mirror: http://npm.taobao.org/mirrors/node/

npm_mirror:https://npm.taobao.org/mirrors/npm/

安装nodejs，建议选择LTS中的版本进行安装

nvm install --lts #安装最新lts版本nodejs

nvm ls #查看安装的nodejs版本

nvm use $vsersion #使用刚刚下载的版本

至此nodejs安装完成
安装pnpm

npm install pnpm -g 

pnpm config get registry #查看源

pnpm config set registry http://registry.npm.taobao.org #切换淘宝源

pnpm config set store-dir /path/to/.pnpm-store #设置存储路径

#nvm常用命令 其余命令看博客https://juejin.cn/post/6888604279679451143

nvm list available #查看可安装版本

nvm --version	#已安装的nvm版本

node -v  #查看安装的nodejs版本

nvm install --lts #下载最新的lts版本nodejs

nvm install $version #安装对应版本nodejs

nvm uninstall $version #卸载对应版本nodejs

pnpm常用命令

pnpm install 包   

pnpm i 包

pnpm add 包    # -S  默认写入dependencies

pnpm add -D    # -D devDependencies

pnpm add -g    # 全局安装

pnpm remove 包  #移除包

pnpm remove 包 --global #移除全局包

pnpm up                #更新所有依赖项

pnpm upgrade 包        #更新包

pnpm upgrade 包 --global   #更新全局包

1.2、直接安装

去官网https://nodejs.cn/download/下载安装包(.msi 结尾)
选择自定义安装目录，例如 D:\path\Nodejs
安装完成后，在安装目录 D:\path\Nodejs 下新建两个文件夹 node_cache 和 node_global
打开 cmd 命令窗，依次执行两条命令

npm config set prefix "D:\path\Nodejs\node_global"

npm config set cache "D:\path\Nodejs\node_cache"

设置系统变量：

（1）新增环境变量 NODE_PATH ： D:\path\Nodejs\node_global\node_modules
（2）在 PATH 变量添加：D:\path\Nodejs\node_global

设置国内淘宝镜像：

npm config set registry=https://registry.npmmirror.com/

安装pnpm

npm install pnpm -g

pnpm config get registry #查看源

pnpm config set registry http://registry.npm.taobao.org #切换淘宝源

pnpm config set store-dir /path/to/.pnpm-store

2、vscode常用插件

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code - 翻译为中文
Auto Close Tag - 自动添加 HTML/XML 结束标签
Auto Complete Tag - 为 HTML/XML 添加关闭标签和自动重命名成对的标签
Auto Rename Tag - 自动重命名成对的 HTML/XML 标签
Color Highlight - 颜色高亮插件
DotENV - 高亮.env 文件
EditorConfig for VS Code - 统一不同编辑器的一些配置
ESLint - 代码检查
Git Graph - Git 图形化操作工具
GitLens — Git supercharged - 显示具体某行代码的 git 信息
Icônes - 搜索 iconify 图标的插件
Iconify IntelliSense - Iconify 图标实时显示的插件
javascript console utils - 提供快捷键 ctrl+l 直接输入 console.log()
Material Icon Theme - 图标主题，显示文件和文件多种图标
Path Intellisense - 智能显示导入的路径
Prettier - Code formatter - 代码格式化插件
UnoCSS - unocss 写法提示插件

Vue Language Features (Volar) - Vue 服务插件
TypeScript Vue Plugin (Volar) - Vue 的 TS 服务插件
Vue VSCode Snippets - vue2、vue3 写法提示

3、jdk安装

下载jdk8 (https://www.oracle.com/java/technologies/downloads/#java8-windows)

下载jdk17 (https://www.oracle.com/java/technologies/downloads/#jdk17-windows)

下载windows下的x64 Installer即可，如果32位系统下载X86

注：如果你官网访问不了，可以去我的存储网盘下载，点击前往下载

根据下载程序下载，选择安装位置D:\Environment\jdk\{8,17}
设置环境变量

JAVA8_HOME：D:\Environment\jdk\8

JAVA17_HOME：D:\Environment\jdk\17

#根据你想安装的jdk版本，把JAVA后面添加上版本即可，这里展示版本17

CLASSPATH  ：.;%JAVA17_HOME%\lib;%JAVA17_HOME%\lib\dt.jar;%JAVA17_HOME%\lib\tools.jar;

Path：;%JAVA17_HOME%\bin;%JAVA17_HOME%\jre\bin

测试是否安装成功

java -version

4、maven和gradle安装

4.1、 maven安装

去官网https://maven.apache.org/download.cgi下载

Windows：apache-maven-3.8.1-bin.zip

Linux：apache-maven-3.8.1-bin.tar.gz

Mac：apache-maven-3.8.1-bin.tar.gz

解压到D:\Environment\maven-3.8.1
设置环境变量(windows可能不能立即生效，不行重启即可)

MAVEN_HOME D:\Environment\maven-3.8.1

Path %MAVEN_HOME%\bin

修改setting文件

#设置仓库地址

<localRepository>D:\Environment\maven\repository</localRepository>

#设置阿里云镜像  镜像地址：https://developer.aliyun.com/mvn/guide

<mirror>

    <id>aliyunmaven</id>

    <mirrorOf>*</mirrorOf>

    <name>阿里云公共仓库</name>

    <url>https://maven.aliyun.com/repository/public</url>

</mirror>

测试是否安装成功

mvn -v

idea中配置

找到settings->Build,Execution,Deployment->Build Tools->Maven

设置maven_home_path: D:\Environment\maven-3.8.1

user_settings_file: D:\Environment\maven-3.8.1\conf\settings.xml

local_repository: D:\Environment\maven-3.8.1\repository

4.2、gradle安装

去官网下载https://gradle.org/releases/ 选择一个版本的complete下载
解压文件到目录D:\Environment\gradle-8.1
设置环境变量

GRADLE_HOME D:\Environment\gradle-8.1

Path %GRADLE_HOME%\bin

设置全局镜像（针对所有项目）

在.gradle目录下创建init.gradle文件，并写入以下内容

allprojects {

    repositories {

        maven { url 'https://maven.aliyun.com/repository/central' }

        maven { url 'https://maven.aliyun.com/repository/public' }

        maven { url 'https://maven.aliyun.com/repository/google' }

        maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }

        google()

        jcenter()

    }

}

设置单项目镜像

在build.gradle文件添加

repositories {

        maven { url 'https://maven.aliyun.com/repository/central' }

        maven { url 'https://maven.aliyun.com/repository/public' }

        maven { url 'https://maven.aliyun.com/repository/google' }

        maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }

        google()

        jcenter()

}

测试

gradle -v

idea中配置

找到settings->Build,Execution,Deployment->Build Tools->Gradle

设置gradle_user_home: D:/Environment/gradle-8.1/.gradle

Build and run using 和 Run tests using 建议使用idea,因为优化更好

Distribution：Local installation : D:\Environment\gradle-8.1

5、idea常用插件

EasyCode  #快速生成mybatis配置
Maven Helper #maven依赖处理
MyBatis Log Free #查看mybatis具体执行sql
MybatisX #帮助关联mybatis文件 
MyBatisCodeHelperPro (Marketplace Edition) # 付费插件
Rainbow Brackets #帮助分清括号
Chinese (Simplified) Language Pack / 中文语言包 #中文包
Translation #翻译软件，用有道，需要密钥，可官网申请
Grep console #日志颜色

#激活码，具体是什么激活码自己体会（其实就是mbchp插件的）
SS05F85JCK-eyJsaWNlbnNlSWQiOiJTUzA1Rjg1SkNLIiwibGljZW5zZWVOYW1lIjoia2lkZHkgaW5zZWFtcyIsImFzc2lnbmVlTmFtZSI6IiIsImFzc2lnbmVlRW1haWwiOiIiLCJsaWNlbnNlUmVzdHJpY3Rpb24iOiIiLCJjaGVja0NvbmN1cnJlbnRVc2UiOmZhbHNlLCJwcm9kdWN0cyI6W3siY29kZSI6IlBGQVNUUkVRVUVTVCIsImZhbGxiYWNrRGF0ZSI6IjIwMjUtMDgtMDEiLCJwYWlkVXBUbyI6IjIwMjUtMDgtMDEiLCJleHRlbmRlZCI6ZmFsc2V9LHsiY29kZSI6IlBNWUJBVElTSEVMUEVSIiwiZmFsbGJhY2tEYXRlIjoiMjAyNS0wOC0wMSIsInBhaWRVcFRvIjoiMjAyNS0wOC0wMSIsImV4dGVuZGVkIjpmYWxzZX0seyJjb2RlIjoiUFJFRElTIiwiZmFsbGJhY2tEYXRlIjoiMjAyNS0wOC0wMSIsInBhaWRVcFRvIjoiMjAyNS0wOC0wMSIsImV4dGVuZGVkIjpmYWxzZX1dLCJtZXRhZGF0YSI6IjAxMjAyMjA4MDFQU0FOMDAwMDA1IiwiaGFzaCI6IlRSSUFMOjE1NzQwMDEzNCIsImdyYWNlUGVyaW9kRGF5cyI6NywiYXV0b1Byb2xvbmdhdGVkIjpmYWxzZSwiaXNBdXRvUHJvbG9uZ2F0ZWQiOmZhbHNlfQ==-ihQdYJRtmblGKHgUWj9bb9SYED6N6msYDjaYpGuBQMtNXfAOHilFOUft8oUHzFn7MMgUknADwOVTGF/u3ABUtkNy6JInrjzi4z+CqlR9tyHeyJqrrEa/mvFc0glfs9K8rDfjQu9UnJiWBSPKh7pWWqCCBFspSHeXVmswEouWdJOShLuAa/3WjhfpW2QKzvB4qwyNWQh7uFR20C5lR8fzB2T+oyz9PoYoNeSepQXKVdX1/o1u6jXCGfi4VHFnk2T8mXH2bn1WD6r+Q1DN4SEeRSC8KiSAdnAB0sbS5hgkg3COudhYSX5c4kEr9UK4Kq153+Yf1hPTU0yLbLdh0zTMcg==-MIIETDCCAjSgAwIBAgIBDTANBgkqhkiG9w0BAQsFADAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBMB4XDTIwMTAxOTA5MDU1M1oXDTIyMTAyMTA5MDU1M1owHzEdMBsGA1UEAwwUcHJvZDJ5LWZyb20tMjAyMDEwMTkwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQDCP4uk4SlVdA5nuA3DQC+NsEnZS9npFnO0zrmMWcz1++q2UWJNuGTh0rwi+3fUJIArfvVh7gNtIp93rxjtrQAuf4/Fa6sySp4c32MeFACfC0q+oUoWebhOIaYTYUxm4LAZ355vzt8YeDPmvWKxA81udqEk4gU9NNAOz1Um5/8LyR8SGsSc4EDBRSjcMWMwMkYSauGqGcEUK8WhfplsyF61lKSOFA6VmfUmeDK15rUWWLbOMKgn2cxFA98A+s74T9Oo96CU7rp/umDXvhnyhAXSukw/qCGOVhwKR8B6aeDtoBWQgjnvMtPgOUPRTPkPGbwPwwDkvAHYiuKJ7Bd2wH7rAgMBAAGjgZkwgZYwCQYDVR0TBAIwADAdBgNVHQ4EFgQUJNoRIpb1hUHAk0foMSNM9MCEAv8wSAYDVR0jBEEwP4AUo562SGdCEjZBvW3gubSgUouX8bOhHKQaMBgxFjAUBgNVBAMMDUpldFByb2ZpbGUgQ0GCCQDSbLGDsoN54TATBgNVHSUEDDAKBggrBgEFBQcDATALBgNVHQ8EBAMCBaAwDQYJKoZIhvcNAQELBQADggIBAB2J1ysRudbkqmkUFK8xqhiZaYPd30TlmCmSAaGJ0eBpvkVeqA2jGYhAQRqFiAlFC63JKvWvRZO1iRuWCEfUMkdqQ9VQPXziE/BlsOIgrL6RlJfuFcEZ8TK3syIfIGQZNCxYhLLUuet2HE6LJYPQ5c0jH4kDooRpcVZ4rBxNwddpctUO2te9UU5/FjhioZQsPvd92qOTsV+8Cyl2fvNhNKD1Uu9ff5AkVIQn4JU23ozdB/R5oUlebwaTE6WZNBs+TA/qPj+5/wi9NH71WRB0hqUoLI2AKKyiPw++FtN4Su1vsdDlrAzDj9ILjpjJKA1ImuVcG329/WTYIKysZ1CWK3zATg9BeCUPAV1pQy8ToXOq+RSYen6winZ2OO93eyHv2Iw5kbn1dqfBw1BuTE29V2FJKicJSu8iEOpfoafwJISXmz1wnnWL3V/0NxTulfWsXugOoLfv0ZIBP1xH9kmf22jjQ2JiHhQZP7ZDsreRrOeIQ/c4yR8IQvMLfC0WKQqrHu5ZzXTH4NO3CwGWSlTY74kE91zXB5mwWAx1jig+UXYc2w4RkVhy0//lOmVya/PEepuuTTI4+UJwC7qbVlh5zfhj8oTNUXgN0AOc+Q0/WFPl1aw5VV/VrO8FCoB15lFVlpKaQ1Yh+DVU8ke+rt9Th0BCHXe0uZOEmH0nOnH/0onD

未完，待补充......