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

VUE路由与nodeJS环境搭建

news 2025/10/17 4:01:23

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

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2025/10/14 12:35:29

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2025/10/17 0:18:22

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/10/11 22:33:23

网络编程（UDP编程）

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2025/10/14 17:00:07

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

编程新知 2025/10/14 21:00:45

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/9/24 3:06:44

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/9/26 13:56:43

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2025/9/28 15:18:09

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程新知 2025/9/28 3:39:04