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

VUE路由与nodeJS环境搭建

news 2026/1/18 16:18:41

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

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2026/1/15 4:24:36

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2026/1/2 4:05:05

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

编程新知 2025/10/17 21:16:57

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2026/1/15 6:34:19

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2025/12/11 1:32:07

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/12/25 18:22:43

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2026/1/15 6:51:07

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2026/1/15 6:04:11