【node】nodeJs入门-官方安装和mvn管理-手把手步骤

文章介绍了NodeJs作为服务端JavaScript的使用,强调了前端基础工具如HTML、CSS、JavaScript的局限性。接着,推荐了NVM(NodeVersionManager)用于方便地管理NodeJs的不同版本,并详细阐述了在Windows上下载、安装和验证NVM及NodeJs的步骤,包括如何使用NPM检查已安装的Node版本。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • NodeJs简单说就是运行在服务端的JavaScript。
    前端三件套,html、css、javascript这几个是最基本的工具。使用这些工具,我们作为开发人员可以创建网站和应用程序的用户界面。
    但是如果我们想要创建自己的服务,他们叁就不行了,这时就需要请出我们接下来的嘉宾——node

在这里插入图片描述

你需要的前置知识

仅仅是一些简单基础的计算机知识和术语,放心,很简单。如果你JavaScript掌握的好(或者你学习过PHP,Java等语言),你将会更加得心应手。( ̄y▽, ̄)╭

开始

下载安装

1 官网安装

大家应该用有Windows也有Mac,不过都无所谓,到官网安装就行了。
node官方链接


虽然说直接在官方安装一个特定的版本也是可以的,但是为了以后的方便,我推荐使用mvn(Node Version Manager),这个Nodejs版本管理器,它可以让我们方便的切换Nodejs版本。
下面我以我自己的电脑为例(windows)来演示安装过程。

2 mvn安装

链接:mvn
在这里插入图片描述

下载最新版,nvm-setup.exe就行了。
在这里插入图片描述

然后就按照步骤进行操作,nextnextnext
安装好后就试试安装成功了没有,win+R,输入cmd打开终端,键入下面任何一个命令,看到版本号就可以说明是成功了。

nvm version 或
nvm -v      或
nvm --version

在这里插入图片描述

好!让我们接下来用nvm来下载安装node,我们可以去官网上看看最新版: 在这里插入图片描述

18.16.0
so,我们使用如下命令安装

nvm install 18.16.0

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AyHfaNCe-1682943104273)(vx_images/361093222257377.png)]

如果下载失败了,使用淘宝镜像,参考文章【nvm安装node失败,使用淘宝镜像!】

好接下来我们使用命令

npm list

查看nvm中的node列表

成功!

使用use使用特定版本的node,使用list查看会发现对应版本前有*号,代表成功使用该版本,这时使用node -vnpm -v就可以看到版本也是对的。
在这里插入图片描述

<think>我们正在处理用户关于安装前后端开发环境或设置框架的问题。根据引用内容,我们可以提供一些指导步骤。用户需求:安装前后端开发环境或设置框架。根据引用[1],我们有一个完整的安装配置列表,包括JDK、maven、idea、mysql、navicat、tomcat、node.js、HBuilderX。引用[2]提到前后端框架的搭建,以及前后端如何通过axios交互。引用[3]提到了SpringBoot前后端分离低代码开发框架。引用[4]提到前端开发环境需要的一些库工具,如Vue,VueRouter,Webpack等。因此,我们可以将安装分为后端环境前端环境。同时,由于用户可能使用不同的技术栈,我们可以给出一个通用的步骤,并针对常见技术(如Java后端Vue前端)提供具体示例。步骤:1.后端环境安装(以Java为例):-安装JDK:从Oracle官网下载JDK并安装,配置环境变量JAVA_HOMEPATH。-安装Maven:下载Maven,解压,配置环境变量MAVEN_HOMEPATH,并设置settings.xml(如果需要)。-安装IDE(如IntelliJIDEA):下载并安装,配置JDKMaven路径。-安装数据库(如MySQL):下载MySQL安装包,按照步骤安装,设置root密码。-安装数据库管理工具(如Navicat):下载安装,连接MySQL数据库。-安装Tomcat:下载Tomcat,解压,在IDE中配置Tomcat服务器。2.前端环境安装-安装Node.js:下载Node.js安装包,安装后使用npm(Node管理器)。-安装前端IDE(如HBuilderX或WebStorm):下载并安装-安装VueCLI:通过npm全局安装VueCLI,用于创建Vue项目。-安装其他前端依赖:在项目中使用npm或yarn安装需要的库(如axios,vue-router等)。3.设置前后端分离框架:-后端:使用SpringBoot创建RESTfulAPI(引用[2][3])。-前端:使用VueCLI创建项目,使用axios与后端交互(引用[2][4])。下面我们将详细说明这些步骤,并给出一些代码示例(如Mavennpm命令)配置示例。注意:由于不同操作系统(Windows,macOS,Linux)的安装步骤可能有所不同,这里以通用步骤为主,用户需要根据自己系统调整。</think>### 如何安装前后端开发环境及设置框架 #### 后端环境安装(以Java Spring Boot为例) 1. **JDK安装** - 下载JDK 17+ [Oracle官网](https://www.oracle.com/java/) - 配置环境变量: ```bash # Windows示例 setx JAVA_HOME "C:\Program Files\Java\jdk-17" setx PATH "%PATH%;%JAVA_HOME%\bin" ``` - 验证:`java -version` 2. **Maven安装** - 下载[Apache Maven](https://maven.apache.org/) - 配置环境变量: ```bash setx MAVEN_HOME "D:\apache-maven-3.8.6" setx PATH "%PATH%;%MAVEN_HOME%\bin" ``` - 验证:`mvn -v` 3. **IDE配置(IntelliJ IDEA)** - 安装后配置: - 设置JDK路径:`File > Project Structure > SDKs` - 配置Maven:`Settings > Build > Maven` 4. **数据库安装(MySQL)** - 下载[MySQL Community Server](https://dev.mysql.com/downloads/mysql/) - 配置root密码 - 使用Navicat连接数据库: - 新建连接:主机`localhost`,端口`3306` #### 前端环境安装(以Vue.js为例) 1. **Node.js安装** - 下载[Node.js LTS版本](https://nodejs.org/) - 验证: ```bash node -v # 检查Node版本 npm -v # 检查npm版本 ``` 2. **Vue CLI安装** ```bash npm install -g @vue/cli vue --version # 验证安装 ``` 3. **创建Vue项目** ```bash vue create my-frontend cd my-frontend npm run serve # 启动开发服务器 ``` #### 前后端框架对接配置 1. **后端Spring Boot配置** - 添加跨域支持: ```java @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:8080") // 前端地址 .allowedMethods("*"); } } ``` - 创建RESTful API: ```java @RestController @RequestMapping("/api") public class DemoController { @GetMapping("/hello") public String hello() { return "Hello from Spring Boot!"; } } ``` 2. **前端Vue对接** - 安装axios: ```bash npm install axios ``` - 调用后端API: ```javascript // src/services/api.js import axios from 'axios'; const api = axios.create({ baseURL: 'http://localhost:8081' }); export const getHello = () => api.get('/api/hello'); ``` - 组件中使用: ```vue <script> import { getHello } from './services/api'; export default { async mounted() { const res = await getHello(); console.log(res.data); // 输出后端响应 } } </script> ``` 3. **启动流程** ```mermaid graph LR A[启动后端 Spring Boot] --> B[端口8081] C[启动前端 Vue] --> D[端口8080] D -->|axios请求| B B -->|JSON响应| D ``` #### 验证环境 1. 后端访问:`http://localhost:8081/api/hello` 应返回字符串:`Hello from Spring Boot!` 2. 前端控制台:应打印后端响应数据 > **注意事项** > - 确保前后端端口不同(如前端8080,后端8081) > - 生产环境需配置Nginx反向代理解决跨域问题 > - 推荐使用yarn替代npm管理前端依赖(安装:`npm install -g yarn`) [^1]: Java前后端开发环境安装与配置完整版 [^2]: 手把手搭建前后端开发框架 [^3]: Spring Boot前后端分离低代码框架 [^4]: 前端开发环境MEMO
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ljl2107

感谢我能帮助到你

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值