Win10 安装Node.js 以及 Vue项目的创建
一、Node.js和Vue介绍
1. Node.js
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。它允许你在服务器端运行 JavaScript，使得你能够使用 JavaScript 来编写后端代码。以下是 Node.js 的一些关键特点：
-
事件驱动和非阻塞 I/O：Node.js 使用事件驱动模型和非阻塞 I/O 操作，这使得它在处理高并发请求时非常高效。
-
单线程：尽管 Node.js 是单线程的，但它通过事件循环和回调机制来处理多个任务，实现了高效的并发处理。
-
npm（Node Package Manager）：Node.js 配备了 npm，这是一个包管理工具，允许你轻松地安装和管理第三方模块和库。
-
广泛应用：Node.js 常用于构建网络应用程序，如 RESTful API、实时应用（例如聊天应用）和微服务架构。
-
全栈开发：Node.js 的出现使得 JavaScript 可以在前端和后端都使用，简化了全栈开发。
2. Vue.js
Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。它的核心库专注于视图层，并且易于与其他库或现有项目集成。以下是 Vue.js 的一些关键特点：
-
声明式渲染：Vue.js 使用声明式的模板语法来绑定 DOM 和 Vue 实例的数据，简化了界面的更新过程。
-
组件化：Vue.js 鼓励使用组件来构建应用程序，将界面拆分成可重用的、独立的组件，增强了代码的可维护性和复用性。
-
响应式数据绑定：Vue.js 提供了响应式的数据绑定机制，自动跟踪依赖关系并在数据变化时更新视图。
-
指令系统：Vue.js 提供了丰富的内置指令（例如
v-if、v-for、v-bind），帮助开发者高效地实现常见的 DOM 操作。 -
生态系统：Vue.js 有一个丰富的生态系统，包括 Vue Router（用于路由管理）、Vuex（用于状态管理）以及其他社区插件，帮助开发者构建复杂的应用。
-
易于上手：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://registry.npmmirror.com
无报错后输入：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项目，记得细心哦，感谢各位看官的观看，下期见，谢谢~