首页 > 编程语言 >Win10 安装Node.js 以及 Vue项目的创建

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

时间:2024-09-21 18:19:14浏览次数:11  
标签:Node vue 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项目,记得细心哦,感谢各位看官的观看,下期见,谢谢~

标签:Node,vue,js,点击,Vue,安装
From: https://blog.csdn.net/weixin_64178283/article/details/142417724

相关文章

  • Vue学习笔记6:分别使用纯JavaScript和Vue的v-if 指令来有条件地渲染网页元素
    0缘起有时我们的网页需要根据需要用户的选择展示不同的页面元素。例如:<p>你喜欢哪种水果?</p><p> <label> <inputtype="radio"value="苹果"name="fruit"/> 苹果 </label></p><p> <label> <inputtype="ra......
  • 使用`xlsx-js-style`插件导出表格,并添加样式导出
    安装npminstallxlsx-js-style--save使用引入importXLSXfrom'xlsx-js-style'//1.创建一个工作簿constwb=XLSX.utils.book_new()//表格标题//这里设置标题是怕数据没有,返回空表,连标题都没有//这里的权重,没有数据tableData里的高,果如ta......
  • 什么是 Web Worker 以及如何在 NextJS 中使用它
    先决条件reactjs/nextjs基础知识什么是网络工作者javascript是一种单线程语言,它使用的线程称为主线程浏览器实际上使用其他线程来自浏览器api的webworker是您使用javascript创建和注册附加线程的一种方式当您只能在主线程上工作时,为什么还要创建其他线程呢?假......
  • 什么是反应? Reactjs 概念和术语概述
    什么是react?react是一个javascript库,用于构建用户界面,特别是单页应用程序(spa)。它允许开发人员创建可重用的组件来管理其本地状态并处理用户交互。react遵循单向数据流,这意味着数据从父组件流向子组件,从而促进更好地管理数据和ui状态。关键react术语和概念......
  • springboot+vue在线动漫信息平台【开题+程序+论文】
    系统程序文件列表开题报告内容研究背景随着互联网的飞速发展,动漫文化在全球范围内迅速普及,成为年轻人娱乐与社交的重要载体。传统动漫传播方式受限于时间与空间,已难以满足日益增长的动漫爱好者需求。在线动漫信息平台作为连接创作者与观众的桥梁,不仅能够提供丰富多样的动漫......
  • springboot+vue自行车租赁管理系统【开题+程序+论文】
    系统程序文件列表开题报告内容研究背景随着城市化进程的加速和环保意识的提升,自行车作为绿色出行方式,其租赁服务在近年来得到了迅猛发展。传统的自行车租赁方式存在管理效率低下、信息不透明、用户体验不佳等问题,已难以满足现代都市人便捷、高效、环保的出行需求。因此,开发......
  • springboot+vue幼儿园管理系统【开题+程序+论文】
    系统程序文件列表开题报告内容研究背景随着教育信息化的不断深入,幼儿园作为儿童成长启蒙的重要阶段,其管理模式的现代化与智能化已成为必然趋势。传统的幼儿园管理方式往往依赖于纸质记录和人工操作,不仅效率低下,还容易出错,难以满足当前家长对幼儿教育透明化、个性化、高质量......
  • 了解如何在 <lines (Modulojs) 中创建 API 支持的 Zelda BOTW 怪物画廊 Web 组件
    模数教程回来了!大家好!暑假结束后,我带着modulo教程回来了。我正在制作更多教程-请继续关注。也就是说,如果您对我的下一个主题有任何特别的想法,请务必在评论中告诉我!我的上一篇教程是关于api驱动的pokémondanceparty组件的超级快速且有趣的“仅html,无js”教程,不到30......
  • 了解现代 Web 开发中的 chunkjs:代码分割和性能优化指南
    在Web开发中,尤其是使用React、Vue或Angular等现代JavaScript框架时,chunk.js指的是在应用程序的构建过程中创建的JavaScript捆绑文件。当捆绑或编译Web应用程序时,Webpack或Vite等构建工具会将JavaScript代码分割成称为“块”的较小文件。这些块通常是为了性能优......
  • 基于Node.js+vue基于springboot的电商后台管理系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展和电子商务行业的蓬勃兴起,电商企业面临着前所未有的机遇与挑战。为了提升运营效率、优化客户体验并增强市场竞争力,电商企业亟需构......