当前位置： 首页 > news >正文

VUE路由与nodeJS环境搭建

news 2025/9/2 2:02:26

VUE路由

Vue路由是Vue.js提供的路由管理工具，它允许我们在应用程序中实现页面之间的导航，从而使单页面应用程序的开发更加方便。通过Vue路由，我们可以轻松地创建和管理多个视图，并在这些视图之间导航。

Vue路由使用HTML5的History API来实现无刷新页面的切换效果，同时还提供了很多高级特性，例如路由嵌套、路由参数、路由钩子等。

Vue路由的核心概念是路由器（router）和路由（route）。路由器是Vue提供的一个组件，它负责管理应用程序中的所有路由。每个路由都有一个对应的组件，当路由被匹配时，对应的组件将被渲染到当前页面中。

在Vue路由中，路由器通过配置路由表来管理路由。路由表是一个JavaScript对象，它包含了应用程序中所有的路由信息，每个路由都由一个路径和对应的组件构成。

VUE的特点

  1. 简单易学：Vue.js的API简单易懂，学习曲线较平滑。

  2. 数据双向绑定：Vue.js采用了数据双向绑定的机制，能够自动将数据的更改反映在视图上，同时也能根据用户操作更新数据。

  3. 组件化开发：Vue.js采用了组件化开发的方式，使开发变得更加模块化，更易于维护和管理。

  4. 轻量级：Vue.js文件只有20K大小，加载速度快。

  5. 支持虚拟DOM：虚拟DOM可以避免直接操作DOM时的性能损耗，Vue.js可以通过虚拟DOM快速渲染页面。

  6. 生态丰富：Vue.js有大量的第三方组件和插件，可以快速丰富应用的功能。

  7. 渐进式框架：Vue.js是一个渐进式框架，可以根据项目需要使用其部分功能，也可以完全使用其所有功能。

在Vue路由中，我们可以使用以下方法来配置路由表：

1.定义路由器：使用Vue提供的Router类来创建一个路由器实例。

2.定义路由表：为路由器实例定义一个路由表，其中每个路由都包含一个路径和对应的组件。

3.使用路由器：将路由器实例挂载到Vue应用程序中，从而启用路由功能。

Vue路由是一个非常强大的工具，它能够极大地简化单页面应用程序的开发，提高开发效率和用户体验。

在此我们要在我们的HBuilder 项目中再次增加：

XXX.js

<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js">

如：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script><title>路由</title><script ></script></head><body><div id="app"><!-- {{name}} --><!-- 6.触发路由事件的按钮 --><router-link to="home">首页</router-link><router-link to="about">关于</router-link><!-- 7.定义锚点，路由内容 --><router-view></router-view></div><script type="text/javascript">//1.定义两个组件var Home=Vue.extend({template:"<div>网站首页内容</div>"});var About=Vue.extend({template:"<div>关于网站</div>"})// 2.定义组件与路径对应关系var router=[{component:Home,path:'/home'},{component:About,path:'/about'}];// 3.将路由关系获取路由对象rouyervar router =   new VueRouter({routes:router});// 4.将路由对象挂在到vue实例中new Vue({el:"#app",router,data(){return{name:'小布丁',};}});</script>
</html>
 结果：

如用在我们的项目也是非常方便的， 同时还提供了很多高级特性，例如路由嵌套、路由参数、路由钩子等。

nodeJS环境搭建

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，可以让JavaScript在服务器端运行。以下是在Windows系统上搭建Node.js环境的

特点

  1. 异步I/O：Node.js使用异步非阻塞I/O操作，使得多个请求可以同时得到服务。

  2. 事件驱动：Node.js基于事件驱动模型，使代码更加高效、易于扩展和维护。

  3. 单线程：Node.js是单线程的，但是通过事件循环和异步I/O的方式，可以处理大量并发请求。

注意事项

  1. 安装Node.js：需要从官网下载并安装Node.js，选择对应的操作系统版本并安装。

  2. 版本控制：Node.js的版本更新较快，需要考虑代码的兼容性。可以使用nvm等工具来管理多个版本。

  3. 模块管理：Node.js使用npm进行模块管理，需要注意模块的版本和依赖关系。

  4. 错误处理：Node.js对于错误的处理需要注意，特别是异步操作中可能出现的错误需要特别处理。

  5. 安全性：Node.js应用需要注意安全性，特别是对于用户输入的数据进行有效的验证和过滤。

步骤：

1.访问Node.js的官方网站(https://nodejs.org/)下载安装包，在Windows系统上选择.msi或 .exe安装包，双击运行安装包。

2.在安装过程中，可以选择Node.js的安装路径和相关组件，直接使用默认设置即可。

3.完成安装后，打开命令提示符。在命令提示符中输入以下命令检查Node.js是否已正确安装：node -v，如果成功，会显示Node.js的版本号。

4.在命令提示符中输入以下命令检查npm是否已正确安装：npm -v，如果成功，会显示npm的版本号。npm是Node.js的包管理器，用于安装、卸载、更新Node.js模块。

至此，Node.js环境已成功搭建。为了保证使用Node.js的正常运行，建议在安装过程中勾选“将Node.js添加到系统路径”的选项，这样可以让系统自动将Node.js添加到环境变量中，方便在命令提示符或终端中使用Node.js。

解压我们要的文件，解压路径一定不要有中文（因为有可能会出错哦） 

在我们配置完成好点击我们的计算机，查看属性--->环境变量--->进行增加修改

如下：

后选择我们的Path进行我们的更改在后面增加 

;%NODE_HOME%;%NODE_HOME%\node_global;

步骤如下：

 配置完成后，我们可以进行测试是否成功

 显示如下我们就配置完成了

设置淘宝源

 进入我们的cmd中输入 npm install 进行下载

这样我们就已经开始下载了 

如上显示我们的项目就下载完成了开始启动我们的项目了

在我们的下载完成后 输入npm run dev来进行启动项目

 

这样就完成了 如果输入这个给我们的地址进行搜索

在此我们的项目就成功了，今天的分享就到这了可以给个关注吗？宝宝们！

相关文章：

VUE路由与nodeJS环境搭建

VUE路由 Vue路由是Vue.js提供的路由管理工具&#xff0c;它允许我们在应用程序中实现页面之间的导航&#xff0c;从而使单页面应用程序的开发更加方便。通过Vue路由&#xff0c;我们可以轻松地创建和管理多个视图&#xff0c;并在这些视图之间导航。 Vue路由使用HTML5的Histo…...

编程日记 2023/9/21 17:40:28

抗锯齿的线

抗锯齿的线 右下角的时候h是0,到顶部 h是1&#xff0c;然后中间y相距4个像素&#xff0c;那dy就是0.25 如果让h abs(fract(h - 0.5) - 0.5) 中间一行0.5&#xff0c;第一行 第三行都是0.25&#xff0c;两端都是0 根据插值来看 这里是 如果用h/dy 那么第一行以上&#xff0…...

编程日记 2023/9/21 17:39:27

如何使用高压放大器驱动高容性负载

使用高压放大器驱动高容性负载是一个具有挑战性的任务&#xff0c;需要仔细考虑电路设计和操作技巧。下面西安安泰Aigtek将为您介绍一些关于如何使用高压放大器驱动高容性负载的方法和注意事项。 首先&#xff0c;让我们了解一下高容性负载。高容性负载通常指电容值较大的负载元…...

编程日记 2023/9/21 17:37:25

kubernetes集群证书过期启动失败问题解决方法

1、问题现象 执行kubectl命令异常报告 [rootk8s-master1 ~]# kubectl get node The connection to the server 192.168.227.131:6443 was refused - did you specify the right host or port? [rootk8s-master1 ~]# 查看etcd的日志&#xff0c;报错信息如下 {"level&…...

编程日记 2023/9/21 17:36:24

nvm使用的注意事项和常用命令。

nvm官网下载地址&#xff1a;nvm文档手册 - nvm是一个nodejs版本管理工具 - nvm中文网 (uihtm.com) 参考网址&#xff1a;(14 封私信 / 80 条消息) 如何通过 nvm 安装多版本 nodejs&#xff1f;npm 安装失败了怎么办&#xff1f; - 知乎 (zhihu.com) nvm目录下&#xff0c;修…...

编程日记 2023/9/21 17:35:21

代码大全阅读随笔(七)

循环控制 循环控制会出现什么样的错误&#xff0c;任何一种答案都可以归结到下面所说的问题之一&#xff1a;忽略或者错误的对循环执行初始化&#xff0c;忽略了对累加变量或者其他与循环有关变量执行初始化&#xff0c;不正确的嵌套&#xff0c;不正确的循环终止&#xff0c;忽…...

编程日记 2023/9/21 17:34:21

用户与权限管理

文章目录 用户与权限管理1. 用户管理1.1 MYSQL用户1.2 登录MySQL服务器1.3 创建用户1.4 修改用户1.5 删除用户1.6 修改密码1. 修改当前用户密码2. 修改其他用户密码 1.7 MYSQL8密码管理 2. 权限管理2.1 权限列表2.2 授予权限的原则2.3 授予权限2.4 查看权限2.5 收回权限 3. 权限…...

编程日记 2023/9/21 17:33:20

mysql集群使用nginx配置负载均衡

参考链接&#xff1a;https://mu-sl.com//archives/mysql%E9%9B%86%E7%BE%A4%E4%BD%BF%E7%94%A8nginx%E9%85%8D%E7%BD%AE%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1 配置文件nginx_tcp.conf 示例 load_module modules/ngx_stream_module.so;stream{upstream tcpssh{hash $remote_…...

编程日记 2023/9/21 17:32:19

蓝桥杯每日一题2023.9.21

蓝桥杯2021年第十二届省赛真题-异或数列 - C语言网 (dotcpp.com) 题目描述 Alice 和 Bob 正在玩一个异或数列的游戏。初始时&#xff0c;Alice 和 Bob 分别有一个整数 a 和 b&#xff0c;有一个给定的长度为 n 的公共数列 X1, X2, , Xn。 Alice 和 Bob 轮流操作&#xff0…...

编程日记 2023/9/21 17:31:18

知识联合——函数指针数组

前言&#xff1a;小伙伴们又见面啦&#xff0c;今天我们来讲解一个将函数&#xff0c;指针&#xff0c;数组这三个C语言大将整合在一起的知识——函数指针数组。同时来告诉小伙伴们我们上一篇文章的伏笔——函数指针的具体用法。 目录 一.什么是函数指针数组 二.函数指针数组…...

编程日记 2023/9/21 17:30:17

【Nginx26】Nginx学习：日志与镜像流量复制

Nginx学习&#xff1a;日志与镜像流量复制 总算到了日志模块&#xff0c;其实这个模块的指令之前我们就用过了&#xff0c;而且也是是非常常见的指令。相信这一块的学习大家应该不会有什么难度。另一个则是镜像功能&#xff0c;这个估计用过的同学就比较少了&#xff0c;不过也…...

编程日记 2023/9/21 17:29:17

Stability AI发布基于稳定扩散的音频生成模型Stable Audio

近日Stability AI推出了一款名为Stable Audio的尖端生成模型&#xff0c;该模型可以根据用户提供的文本提示来创建音乐。在NVIDIA A100 GPU上Stable Audio可以在一秒钟内以44.1 kHz的采样率产生95秒的立体声音频&#xff0c;与原始录音相比&#xff0c;该模型处理时间的大幅减少…...

编程日记 2023/9/21 17:26:13

华为OD机试 - 计算面积 - 逻辑分析（Java 2023 B卷 100分）

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#…...

编程日记 2023/9/21 17:25:11

Ganache本地测试网+cpolar内网穿透实现公网访问内网

文章目录 前言1. 本地环境服务搭建2. 局域网测试访问3. 内网穿透3.1 ubuntu本地安装cpolar内网穿透3.2 创建隧道3.3 测试公网访问 4. 配置固定二级子域名4.1 保留一个二级子域名4.2 配置二级子域名4.3 测试访问公网固定二级子域名 前言 网&#xff1a;我们通常说的是互联网&am…...

编程日记 2023/9/21 17:24:11

【每日一题】ARC071D - ### | 前缀和 | 简单

题目内容 原题链接 给定一个长度为 n n n 的数组 a a a 和一个长度为 m m m 的数组 b b b 。 从数组 a a a 中挑出两个数&#xff0c;作为两条平行于 y y y 轴的直线&#xff0c;数组 b b b 中挑出两个数&#xff0c;作为两条平行于 x x x 轴的直线&#xff0c;问这四…...

编程日记 2023/9/21 17:23:10

（Vue2）VueRouter

VueRouter 修改地址栏路径时&#xff0c;切换显示匹配的组件 使用52&#xff1a; 1下载版本3.6.5&#xff08;Vue3对应版本4.X&#xff09; npm add vue-router3.6.5 2引入 import VueRouter from vue-router 3安装注册 Vue.use(VueRouter) 4创建路由对象 const route…...

编程日记 2023/9/21 17:22:09

6.文本注释方法

1.单行注释 在 LaTeX 中&#xff0c;可以使用 % 符号进行单行注释。 2.整段的注释 但如果要注释一整段文字&#xff0c;可以使用 comment 宏包或 \iffalse 和 \fi 命令来实现。 2.1 使用 comment 宏包 在导言区使用 \usepackage{comment} 命令加载 comment 宏包。然后&…...

编程日记 2023/9/21 17:21:08

[Linux打怪升级之路]-缓冲区

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 本期学习目标&…...

编程日记 2023/9/21 17:20:06

【力扣】13. 罗马数字转整数

题目描述 罗马数字包含以下七种字符: I&#xff0c; V&#xff0c; X&#xff0c; L&#xff0c;C&#xff0c;D 和 M。 字符数值I1V5X10L50C100D500M1000 例如&#xff0c; 罗马数字 2 写做 II &#xff0c;即为两个并列的 1 。12 写做 XII &#xff0c;即为 X II 。 27 写…...

编程日记 2023/9/21 17:19:06

高效时间管理，事无巨细掌握——OmniFocus Pro 3 for Mac最强GTD工具

在快节奏的现代生活中&#xff0c;有效地管理和安排时间变得至关重要。如果您正在寻找一款功能强大的时间管理工具&#xff0c;那么OmniFocus Pro 3 for Mac将是您的最佳选择。作为一款专业的GTD&#xff08;Getting Things Done&#xff09;应用程序&#xff0c;它为您提供了一…...

编程日记 2023/9/21 17:18:05

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/8/31 17:48:58

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2025/8/22 3:28:41

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2025/8/25 20:54:16

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/7/20 11:15:04

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/8/22 7:03:09

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2025/8/25 22:35:36

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2025/8/6 7:59:50

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2025/8/27 0:08:04

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2025/8/29 7:51:21

倒装芯片凸点成型工艺

UBM&#xff08;Under Bump Metallization&#xff09;与Bump&#xff08;焊球&#xff09;形成工艺流程。我们可以将整张流程图分为三大阶段来理解&#xff1a; &#x1f527; 一、UBM&#xff08;Under Bump Metallization&#xff09;工艺流程&#xff08;黄色区域&#xff…...

编程新知 2025/8/25 5:04:48