Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】

这是我自己的环境搭建记录,分享给大家一起学习~~
后续还会再补充自己做的小项目【含前端和后端】
如有任何问题,欢迎大家批评指正!

目录

    • 一、安装JDK
    • 二、安装IDEA集成开发环境
    • 三、安装webstorm
    • 四、安装Maven包管理工具
    • 五、安装配置Node.js,@Vue/cli
    • 六、安装配置MySQL
    • 七、IDEA社区版连接MySQL

一、安装JDK

  1. 百度搜索JDK8,在官网下载适配自己电脑型号的exe文件
    【JDK8和JDK1.8是一个东西,不同的叫法而已】
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第1张图片
  2. 双击运行exe文件,进行安装
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第2张图片
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第3张图片
    【安装的中途还会让你设置一下jre(Java Runtime Environment)的安装路径】
  3. 配置环境变量
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第4张图片
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第5张图片
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第6张图片
    【变量名就写JAVA_HOME,不要动】

Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第7张图片
4. 检查是否安装成功
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第8张图片

二、安装IDEA集成开发环境

  1. 百度搜索IDEA,我下载的是社区版【Ultimate的配置过程基本一样】
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第9张图片
  2. 双击exe文件进行安装
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第10张图片
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第11张图片
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第12张图片
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第13张图片
  3. 安装完成后,创建个项目试试,双击图标
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第14张图片
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第15张图片
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第16张图片
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第17张图片
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第18张图片

三、安装webstorm

【这里就不放图了,主要步骤和IDEA是一样的】

  1. 百度搜索webstorm,官网下载
  2. 双击exe一步步next安装即可
  3. 安装完成后,打开后需要进行激活(需要教程的可以在评论区留下你的邮箱)

四、安装Maven包管理工具

  1. 官网下载编译好的Maven【 https://maven.apache.org/download.cgi 】
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第19张图片

  2. 解压到某个文件夹下
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第20张图片

  3. 配置环境变量
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第21张图片
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第22张图片
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第23张图片
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第24张图片
    后边依次点击确定即可

  4. 验证是否安装成功
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第25张图片

  5. 配置本地仓库----修改settings文件
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第26张图片
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第27张图片
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第28张图片

  6. 配置镜像----修改settings文件
    在这里插入图片描述

<mirror>
	<id>alimavenid>
	<mirrorOf>centralmirrorOf>
	<name>aliyun mavenname>
	<url>http://maven.aliyun.com/nexus/content/repositories/central/url>
mirror>
  1. 配置JDK----修改settings文件
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第29张图片
<profile>
      <id>jdk-1.8id>
      <activation>
        <activeByDefault>trueactiveByDefault>
        <jdk>1.8jdk>
      activation>
      
      <properties>
        <maven.compiler.source>1.8maven.compiler.source>
        <maven.compiler.target>1.8maven.compiler.target>        
        <maven.compiler.compilerVersion>1.8maven.compiler.compilerVersion>
      properties>
profile>
  1. 在IDEA中配置Maven
    【对于当前的项目,想用maven进行管理,设置过程如下】:
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第30张图片
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第31张图片
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第32张图片
    【想让所有新创建项目都默认通过maven进行管理,设置如下】:
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第33张图片
-DarchetypeCatalog=internal

Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第34张图片
……………………………………接下来创建一个基于Maven的普通Java 项目………………………

Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第35张图片
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第36张图片
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第37张图片
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第38张图片
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第39张图片

【如果是要创建一个Web项目,那模板就选web的那个就行】

五、安装配置Node.js,@Vue/cli

  1. 官网下载node.js
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第40张图片
  2. 安装【中途选择安装路径,其他Next即可】
  3. 检查是否安装成功
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第41张图片
  4. 修改环境变量,修改配置路径【node_global、node_cache】
    (如果不配置的话,npm install xxx 会默认安装到C盘的路径下)

Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第42张图片

npm config set prefix “……”
npm config get prefix
npm config set cache “……”
npm config get cache
在这里插入图片描述
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第43张图片

Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第44张图片

Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第45张图片
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第46张图片

在这里插入图片描述
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第47张图片
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第48张图片
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第49张图片

Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第50张图片
5. 安装淘宝镜像cnpm

npm install -g cnpm --registry=http://registry.npm.taobao.org
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第51张图片

  1. 安装vue脚手架3.x的版本,@vue/cli

cnpm install -g @vue/cli
vue -V
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第52张图片
在这里插入图片描述

要是想安装指定版本的vue/cli,需要用下述命令:
npm install -g @vue/[email protected] // 后面为版本号

  1. 项目启动测试【webstorm中打开的项目】
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第53张图片
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第54张图片
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第55张图片

六、安装配置MySQL

  1. 下载 【https://dev.mysql.com/downloads/windows/installer/8.0.html】
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第56张图片
  2. 双击进行安装
    Next
    Next
    Yes
    Execute Next
    Next
    Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第57张图片

Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第58张图片

Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第59张图片
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第60张图片
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第61张图片
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第62张图片
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第63张图片
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第64张图片
Execute
Finish

Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第65张图片
3. 启动和停止MySQL命令【安装完默认就是开启的啦哈】
在这里插入图片描述
4. 连接MySQL数据库
方式一: 利用MySQL提供的客户端命令行工具】
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第66张图片

Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第67张图片

方式二: 利用系统自带的命令行工具执行指令】
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第68张图片
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第69张图片
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第70张图片
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第71张图片

七、IDEA社区版连接MySQL

【IDEA社区版不支持连接数据库,我们需要下载一个插件】
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第72张图片
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第73张图片

Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第74张图片
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第75张图片
Java小白 前端后端开发 环境搭建【jdk+idea+webstorm+maven+nodejs+vue+mysql】_第76张图片
【但是社区版的IDEA操作MySQL功能上非常局限,太不友好了,所以我准备换成Ultimate了!】
【安装过程类似于社区版,有需要激活教程的,可以在评论区留下你们的邮箱~】

后续的环境部署,请继续跟进:【续】Java小白 前端后端开发 环境搭建

你可能感兴趣的:(环境搭建,java,intellij-idea,idea,maven,spring)