一、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项目,记得细心哦,感谢各位看官的观看,下期见,谢谢~
标签:Node,vue,js,点击,Vue,安装 From: https://blog.csdn.net/weixin_64178283/article/details/142417724