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-ifv-forv-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://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项目,记得细心哦,感谢各位看官的观看,下期见,谢谢~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1541464.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【24华为杯数模研赛赛题思路已出】国赛F题第二套思路丨附参考代码丨免费分享

2024年数模研赛E题解题思路 X 射线脉冲星光子到达时间建模思路分析 该题目是天文学背景的数学建模题目,其涉及到物理学中关于光线传播过程受多种因素的共同干扰的复合模型,以及天体和卫星的坐标变换和运动模型,首先我们要,建立卫…

JavaScript使用leaflet库显示信息窗口

前言 我们可千万不能忘记我们之前花的流程图哦,我们所有的计划都按照我们的流程图来去构建; 我们已经完成了,页面的加载,也已经完成获取用户当前的位置坐标,并且我们通过地图的API将当前的位置在地图中渲染出来&…

基于协同过滤推荐算法的影视推荐系统

作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、SSM项目源码 精品专栏:Java精选实战项目源码、Python精…

缓存数据和数据库数据一致性问题

根据以上的流程没有问题,但是当数据变更的时候,如何把缓存变到最新,使我们下面要讨论的问题 1. 更新数据库再更新缓存 场景:数据库更新成功,但缓存更新失败。 问题: 当缓存失效或过期时,读取…

【C++】C++库:如何链接外部库、静态链接和动态链接,以及如何自建库并使用

十三、C库:如何链接外部库、静态链接和动态链接,以及如何自建库并使用 本篇讲C库,先讲如何在项目中使用外部库,包括静态链接和动态链接的实现;再讲如何在VisualStudio中自建模块或库项目,让所有项目都能使…

Java-数据结构-排序-(一) (。・ω・。)

文本目录: ❄️一、排序的概念及引用: ➷ 排序的概念: ➷ 常见的排序算法: ❄️二、插入排序的实现: ➷ 1、直接插入排序: ☞ 直接插入排序的基本思想: ☞ 直接插入排序的实现: ▶…

OBB-最小外接矩形包围框-原理-代码实现

前言 定义:OBB是相对于物体方向对齐的包围盒,不再局限于坐标轴对齐,因此包围点云时更加紧密。优点:能够更好地贴合物体形状,减少空白区域。缺点:计算较为复杂,需要计算物体的主方向&#xff0c…

linux 操作系统下dhcpd命令介绍和案例应用

linux 操作系统下dhcpd命令介绍和案例应用 DHCP(动态主机配置协议)在Linux操作系统中用于自动为网络中的设备分配IP地址和其他网络配置 DHCP的基本概念 DHCP协议通过UDP工作,主要有两个用途: 自动分配IP地址给网络中的设备。提…

Sn=a+aa+aaa+aaaa+aaaaa的前五项之和,其中a是一个数字

//计算求和 //Snaaaaaaaaaaaaaaa的前五项之和&#xff0c;其中a是一个数字 //如&#xff1a;222222222222222 #include<stdio.h> #include<math.h> #define A 2 //数字a #define B 5 //前几项的和 int main() {int n 0;int sum 0;int i 0;for (i 0; i <B;…

STM32F407单片机编程入门(十一) ESP8266 WIFI模块实战含源码

文章目录 一.概要二.ESP8266 WIFI模块主要性能参数三.ESP8266 WIFI模块芯片内部框图四.ESP8266 WIFI模块原理图五.ESP8266 WIFI模块与单片机通讯方法1.硬件连接2.ESP8266模块AT指令介绍 六.STM32单片机与ESP8266WIFI模块通讯实验1.硬件准备2.软件工程3.软件主要代码4.实验效果 …

变电站绝缘套管红外检测数据集

包含以下4个数据文件&#xff1a; /train&#xff1a;训练集 /valid&#xff1a;验证集 /test&#xff1a;测试集 README.txt&#xff1a;数据说明 【数据说明】检测目标以Pascal VOC格式进行标注&#xff0c;对每个图像进行以下预处理&#xff0c;统一调整大小为640x640。数据…

死机检测电路

目录&#xff1a; 1、死机检测概述 2、活机状态 3、死机状态 1、死机检测概述 本内容分享一个“死机检测电路”&#xff0c;用作单片机&#xff08;MCU&#xff09;死机时&#xff0c;不至于持续给负载供电。‌持续负载供电&#xff0c;比如加热丝&#xff0c;可能会引发严…

在腾讯云申请https(我得是腾讯云服务器),通过宝塔设置https

参考 一键 HTTPS&#xff1a;https://cloud.tencent.com/document/product/400/58062 DNS 验证&#xff1a;https://cloud.tencent.com/document/product/400/54500?from_cn_redirect1 申请免费的证书 访问连接&#xff1a;https://console.cloud.tencent.com/ssl 点击页…

hive分区详细教程

为什么要分区&#xff1f; 为了提高sql的查询效率 比如&#xff1a; select * from orders where create_date20230826; 假如数据量比较大&#xff0c;这个sql就是全表扫描&#xff0c;速度肯定慢。 可以将数据按照天进行分区&#xff0c;一个分区就是一个文件夹&#xff0c;当…

软件设计师——操作系统

&#x1f4d4;个人主页&#x1f4da;&#xff1a;秋邱-CSDN博客☀️专属专栏✨&#xff1a;软考——软件设计师&#x1f3c5;往期回顾&#x1f3c6;&#xff1a;C: 类和对象&#xff08;上&#xff09;&#x1f31f;其他专栏&#x1f31f;&#xff1a;C语言_秋邱 一、操作系统…

伊犁云计算22-1 linux 逻辑卷管理

&#xff11;  三块硬盘  &#xff53;&#xff41;&#xff54;&#xff41;  先做组&#xff0c;再做逻辑 第一步添加三块硬盘&#xff0c;然后分区&#xff0c;装文件系统 这个过程参考之前的文章不说 新增了三块 &#xff53;&#xff44;&#xff42; &#xff…

vue3 快速入门系列 —— 基础

基础 前面我们已经用 vue2 和 react 做过开发了。 AIAutoPrediction 从 vue2 升级到 vue3 成本较大&#xff0c;特别是较大的项目。所以许多公司对旧项目继续使用vue2&#xff0c;新项目则使用 vue3。 有些UI框架&#xff0c;比如ant design vue1.x 使用的 vue2。但现在 an…

老年人养生之道:岁月静好,健康常伴

老年人养生之道&#xff1a;岁月静好&#xff0c;健康常伴 随着年岁的增长&#xff0c;老年人更需注重养生&#xff0c;以维持身心的和谐与健康&#xff0c;享受幸福晚年。养生不仅是一种生活态度&#xff0c;更是一种智慧的选择&#xff0c;它涵盖了饮食、运动、心理、社交等…

基于MPA-BP-Adaboost的多输入回归预测|海洋捕食者优化-BP神经网络

目录 一、主要内容&#xff1a; 二、运行效果&#xff1a; 三、Adaboost步骤&#xff1a; 四、MPA-BP的优化步骤&#xff1a; 五、本文完整代码数据下载&#xff1a; 一、主要内容&#xff1a; 本代码结合了海洋捕食者优化&#xff08;MPA&#xff09;算法与BP神经网络和A…

【医疗大数据】基于 B2B 的医疗保健系统中大数据信息管理的安全和隐私问题分析

基于 B2B 的医疗保健系统中大数据信息管理的安全和隐私问题分析 1、引言 1-1 医疗大数据的特点 10 V模型&#xff1a;在医疗领域&#xff0c;大数据的特点被描述为10 V&#xff0c;包括价值&#xff08;Value&#xff09;、体量&#xff08;Volume&#xff09;、速度&#xf…