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

Vue路由和Node.js环境搭建

文章目录

  • 一、vue路由
    • 1.1 简介
    • 1.2 SPA
    • 1.3 实例
  • 二、Node.js环境搭建
    • 2.1 Node.js简介
    • 2.2 npm
    • 2.3 环境搭建
      • 2.3.1 下载解压
      • 2.3.2 配置环境变量
      • 2.3.3 配置npm全局模块路径和cache默认安装位置
      • 2.3.4 修改npm镜像提高下载速度
    • 2.4 运行项目

一、vue路由

1.1 简介

Vue 路由是 Vue.js 框架中用于实现单页面应用(SPA)的路由管理工具。它允许你在应用中定义不同的路由,并根据用户的操作动态地切换视图,而无需重新加载整个页面。

在 Vue 路由中,你可以定义路由规则,指定每个路由对应的组件,并在需要时进行导航。Vue 路由提供了一些核心的概念和组件,包括路由器(router)、路由视图(router-view)和路由链接(router-link)。

  • 路由器(router)是 Vue 路由的核心,它负责管理应用的路由规则,并根据用户的导航操作来切换视图。你可以在路由器中定义路由规则,指定每个路由对应的组件,并配置其他参数,如路由守卫、路由模式等。
  • 路由视图(router-view)是用于显示当前路由对应组件的容器。当用户导航到不同的路由时,路由视图会根据当前路由的配置动态地渲染相应的组件。
  • 路由链接(router-link)是用于在应用中生成导航链接的组件。你可以使用路由链接来创建导航菜单、导航按钮等,它会根据配置的路由规则生成正确的链接,并在用户点击时触发路由切换。

1.2 SPA

SPA 是单页面应用(Single Page Application)的缩写。它是一种 Web 应用程序的架构模式,通过在加载初始页面后,动态地更新页面的部分内容,而不是每次用户操作都重新加载整个页面。

单页面应用通过使用 JavaScript 和 AJAX 技术,将应用的不同部分组织为组件,并在用户进行导航时,动态地更新组件的内容,而不需要重新加载整个页面。

客户端 vs. 服务端路由

服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时,浏览器会从服务端获得全新的 HTML,然后重新加载整个页面。

然而,在单页面应用中,客户端的 JavaScript 可以拦截页面的跳转请求,动态获取新的数据,然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验,尤其是在更偏向“应用”的场景下,因为这类场景下用户通常会在很长的一段时间中做出多次交互。这种方式可以提供更快的用户响应时间,减少不必要的网络请求,同时也提供了更流畅的用户体验。

1.3 实例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>路由</title><!-- 1、确保引入Vue.vue-router的js依赖 --><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script></head><body><div id="app"><h1>{{msg}}</h1><!-- 6、定义锚点 --><router-link to='/home'>首页</router-link><router-link to='/about'>关于</router-link><!-- 使用RouterLink组件导航. --><!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --><!-- 通过传入 `to` 属性指定链接. --><router-view> </router-view><!-- 使用RouterView组件显示. --></div></body><script>/* 2、定义组件 */var home = Vue.extend({template: '<div>首页内容:路由</div>'});var about = Vue.extend({template: '<div>路由相关介绍</div>'});/* 注1:extend是构造一个组件的语法器. 你给它参数,他给你一个组件,然后这个组件你可以作用到Vue.component这个全局注册方法里,也可以在任意vue模板里使用car组件 *//* 	3、需要将不同的组件放入一个容器中(路由集合) */var routes = [{component: home,path: '/home'}, {component: about,path: '/about'}]/* 4、将路由集合组装成路由器 */var router = new VueRouter({routes});/* 5、将路由挂载到Vue实例中 */new Vue({el: "#app",router,data() {return {msg: '路由'};}});</script>
</html>

在这里插入图片描述

二、Node.js环境搭建

2.1 Node.js简介

Node.js是一个开源的、跨平台的JavaScript运行时环境,它允许开发者使用JavaScript语言编写服务器端的应用程序。传统上,JavaScript主要用于在浏览器中编写前端代码,但是Node.js的出现使得开发者可以将JavaScript应用于服务器端开发。

Node.js基于Chrome V8引擎,它提供了一组丰富的内置库和模块,使得开发者可以轻松地构建高性能、可扩展的网络应用程序。Node.js采用事件驱动、非阻塞I/O模型,这意味着它可以处理大量并发请求而不会阻塞其他操作,从而提供了出色的性能和可伸缩性。

Node.js的应用场景非常广泛,包括构建Web服务器、API服务器、实时应用程序、命令行工具等。它还可以与各种数据库进行交互,如MongoDB、MySQL等,以及与其他服务进行通信,如HTTP、TCP、UDP等。

Node.js–>JavaScript运行环境,开发语言是:javascript
J2EE -->Java运行环境, 开发语言是java

2.2 npm

npm 是Node Package Manager的缩写,是一个用于管理和共享JavaScript代码的工具。它是Node.js的默认包管理器,用于安装、发布和管理JavaScript模块。

通过npm,开发者可以轻松地安装和更新依赖项,以及共享自己编写的代码供他人使用。npm提供了一个庞大的开源代码库,开发者可以从中获取各种功能强大的模块,以加快开发速度并提高代码质量。

类似于maven

2.3 环境搭建

2.3.1 下载解压

官网

Node有两个版本线: LTS是长期维护的稳定版本Current是新特性版本
本章使用的是:node-v18.16.1-win-x64

下载后解压到指定文件夹就行,并在解压后的目录下建立node_global和node_cache这两个目录
在这里插入图片描述

注1:新建目录说明
node_global:npm全局安装位置
node_cache:npm缓存路径

注2:本教程是将文件解压到D:\develop\node-v18.16.1-win-x64,后面都以此为例,实际开发中请修改成自己的解压目录

2.3.2 配置环境变量

与配置java非常相似

新增NODE_HOME,值为:D:\develop\node-v18.16.1-win-x64
在这里插入图片描述
在PATH添加:%NODE_HOME%%NODE_HOME%\node_global
在这里插入图片描述
测试,在cmd窗口输入node -vnpm -v ,出现版本即表示配置成功
在这里插入图片描述

2.3.3 配置npm全局模块路径和cache默认安装位置

打开cmd,分开执行如下命令:

  • npm config set cache “D:\develop\node-v18.16.1-win-x64\node_cache”

  • npm config set prefix “D:\develop\node-v18.16.1-win-x64\node_global”

注1:将步骤一创建的node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来
注2:如果执行命令卡死,可以删除C:\Users\用户名.npmrc 后重新执行。(用户名:为当前电脑的用户名)
注3:“D:\develop\node-v18.16.1-win-x64”,双引号不能少

2.3.4 修改npm镜像提高下载速度

可以使用 cnpm 或 直接设置 --registry ,推荐设置 --registry

  • –registry

       ## 设置淘宝源npm config set registry https://registry.npm.taobao.org/## 查看源,可以看到设置过的所有的源npm config get registry
    
  • 注1:其实此步骤的内容就是将以下代码添加到C:\Users\用户名.npmrc文件中 registry=https://registry.npm.taobao.org

  • cnpm

     npm install -g cnpm --registry=https://registry.npm.taobao.org
    
  • 注1:cnpm安装完成后,以后就可以用cnpm命令代替npm命令, 此时npm还是会用官方镜像,cnpm会用国内镜像

  • 注2:如果要恢复成原来的设置,执行如下:npm config set registry https://registry.npmjs.org/

  • 查看npm全局路径设置情况

       ## 此步骤随便全局安装一个模块就可以测评npm install webpack -g## 以上命令执行完毕后,会生成如下文件%node_home%\node_global\node_modules\webpack注意:下载过程中出现warn不用管,出现Error,删掉下载的破碎文件重新下载
    

在这里插入图片描述
在这里插入图片描述

2.4 运行项目

在项目文件中打开cmd,输入 nmp i
在这里插入图片描述

命令执行完项目文件中会出现node_modules文件
在这里插入图片描述

命令执行完后,你会发现,项目的根目录下多了一个node_modules文件夹,那里面就是从npm远程库里下载的模块,然后“安装”到你的项目中,此步骤,可理解成修改maven的pom文件添加依赖,然后maven再从中央仓库下载依赖

然后输入 npm run dev
在这里插入图片描述

相关文章:

Vue路由和Node.js环境搭建

文章目录 一、vue路由1.1 简介1.2 SPA1.3 实例 二、Node.js环境搭建2.1 Node.js简介2.2 npm2.3 环境搭建2.3.1 下载解压2.3.2 配置环境变量2.3.3 配置npm全局模块路径和cache默认安装位置2.3.4 修改npm镜像提高下载速度 2.4 运行项目 一、vue路由 1.1 简介 Vue 路由是 Vue.js…...

【Vue】使用vue-cli搭建SPA项目的路由,嵌套路由

一、SPA项目的构建 1、前期准备 我们的前期的准备是搭建好Node.js,测试&#xff1a; node -v npm -v2、利用Vue-cli来构建spa项目 2.1、什么是Vue-cli Vue CLI 是一个基于 Vue.js 的官方脚手架工具&#xff0c;用于自动生成vue.jswebpack的项目模板&#xff0c;它可以帮助开发者…...

Excel 通过条件格式自动添加边框

每录入一次数据就需要手动添加一次边框&#xff0c;非常麻烦&#xff0c;这不是我们想要的。 那么有没有办法&#xff0c;在我们录入数据后&#xff0c;自动帮我们加上边框呢&#xff1f; 选中要自动添加边框的列&#xff0c;然后按箭头流程操作 ↓ ↓ ↓ ↓...

mysql 备份和还原 mysqldump

因window系统为例 在mysql安装目录中的bin目录下 cmd 备份 备份一个数据库 mysqldump -uroot -h hostname -p 数据库名 > 备份的文件名.sql 备份部分表 mysqldump -uroot -h hostname -p 数据库名 [表 [表2…]] > 备份的文件名.sql ## 多个表 空格隔开&#xff0c;中间…...

ELK日志分析系统+ELFK(Filebeat)

本章结构&#xff1a; 1、ELK日志分析系统简介 2、Elasticsearch介绍&#xff08;简称ES&#xff09; 3、Logstash介绍 4、Kibana介绍 5、实验&#xff0c;ELK部署 一、ELK日志分析系统简介 ELK平台是一套完整的日志集中处理解决方案&#xff0c;将 ElasticSearch、Logst…...

ULID 在 Java 中的应用: 使用 `getMonotonicUlid` 生成唯一标识符

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

实用的嵌入式编码技巧:第三部分

每个触发器都有两个我们在风险方面违反的关键规格。“建立时间”是时钟到来之前输入数据必须稳定的最小纳秒数。“保持时间”告诉我们在时钟转换后保持数据存在多长时间。 这些规格因逻辑设备而异。有些可能需要数十纳秒的设置和/或保持时间&#xff1b;其他人则需要少一个数量…...

8个很棒的Vue开发技巧

1.路由参数解耦 通常在组件中使用路由参数&#xff0c;大多数人会做以下事情。 export default { methods: {getParamsId() {return this.$route.params.id} } } 在组件中使用 $route 会导致与其相应路由的高度耦合&#xff0c;通过将其限制为某些 URL 来限制组件的灵活性。…...

Python - 小玩意 - 文字转语音

import pyttsx3 from tkinter import *def recognize_and_save():try:say pyttsx3.init()rate say.getProperty(rate) # 获取当前语速属性的值say.setProperty(rate, rate - 20) # 设置语速属性为当前语速减20text text_var.get()# 语音识别say.say(text)say.runAndWait()…...

聚焦数据库和新兴硬件的技术合力 中科驭数受邀分享基于DPU的数据库异构加速方案

随着新型硬件成本逐渐降低&#xff0c;充分利用新兴硬件资源提升数据库性能是未来数据库发展的重要方向之一&#xff0c;SIGMOD、VLDB、CICE数据库顶会上出现越来越多新兴硬件的论文和专题。在需求侧&#xff0c;随着数据量暴增和实时性的要求越来越高&#xff0c;数据库围绕处…...

哨兵模式(sentinel)

为什么需要哨兵模式 redis的主从复制模式能够缓解“读压力”&#xff0c;但是存在两个明显问题。 主节点发生故障&#xff0c;进行主节点切换的过程比较复杂&#xff0c;需要人工参与&#xff0c;导致故障恢复时间无法保障主节点通过主从复制模式将读压力分散出去&#xff0c…...

b站老王 自动驾驶决策规划学习记录(十二)

自动驾驶之速度规划详解&#xff1a;SL与ST迭代 上一讲&#xff1a;b站老王 自动驾驶决策规划学习记录&#xff08;十一&#xff09; 接着上一讲学习记录b站老王对自动驾驶规划系列的讲解 参考视频&#xff1a; 自动驾驶决策规划算法第二章第七节(上) 速度规划详解:SL与ST迭代…...

服务器租用机房机房的类型应该如何选择

服务器租用机房机房的类型应该如何选择 1.单电信机房 单电信服务器机房业务模式比较固定&#xff0c;访问量也不是很大&#xff0c;适合新闻类网站或政务类网站。如果网站的PV流量持续增加&#xff0c;建议后期采用租赁CDN的方式解决非电信用户访问网站速度过慢的问题。 2.双线…...

大数据运维一些常见批量操作命令

大数据运维中&#xff0c;批量操作是一项常见的任务。在使用flume进行数据采集的过程中&#xff0c;有时会出现故障导致采集停止&#xff0c;此时积累了大量的文件。如果想要将这些文件迁移到新的目录&#xff0c;直接使用"mv"命令可能会因为文件数目过多而报错。为了…...

测试人职场生存必须避开的5个陷阱

在互联网职场的工作发展道路上&#xff0c;软件测试人员其实在公司中也面临着各种各样的职场陷阱&#xff0c;有些可能是因为项目业务不熟练造成的&#xff0c;有些可能是自身技术能力不足导致的...等等。软件测试入门相对来说比较容易些&#xff0c;但是想要在测试行业长久发展…...

力扣538 补9.18

538.把二叉搜索树转换为累加树 可以做&#xff0c;主要还是分类讨论并找规律。 当前结点如果是左节点的话&#xff0c;root.valroot.valpre.valdfs(root.right); 如果是右结点的话&#xff0c; root.valpre.val-preval-dfs(root.left); 都和前一个结点有关系&#xff0c;如…...

[Linux入门]---Linux编译器gcc/g++使用

文章目录 1.背景知识2.gcc如何完成编译运行工作预处理&#xff08;进行宏替换&#xff09;编译&#xff08;生成汇编&#xff09;汇编&#xff08;生成机器可识别代码&#xff09;链接&#xff08;生成可执行文件&#xff09; 3.函数库动态库静态库动静态库的区别 4.gcc选项 1.…...

[Git入门]---gitee注册及代码提交

文章目录 1.Gitee是什么2.gitee注册3.git工具及图形化界面工具安装4.gitee仓库创建5.进行本地仓库与远端gitee仓库的链接6.git三板斧addcommitpush 7.gitee提交代码常见问题 1.Gitee是什么 gitee是基于git代码托管和研发协作的国内平台&#xff0c;在上面可以托管个人或公司代…...

企业架构LNMP学习笔记46

PHP测试连接代码&#xff1a; php代码测试使用memcached&#xff1a; 示例代码&#xff1a; <?php //实例化类 $mem new memcached(); //调用连接memcached方法 注意连接地址和端口号 $mem->addServer(192.168.17.114,11211); //存数据 var_dump($mem->set(name,l…...

ELFK之zookeeper+kafka

目录 kafkazookeeper的系统架构 Zookeeper 一、zookeeper概述 二、zookeeper特点 三、zookeeper选举机制 四、应用场景 五、zookeeper实验实例 Kafka 一、概述 为什么需要消息队列(MQ) 使用消息队列的好处 消息队列的两种模式 Kafka 定义 二、Kafka 的特性 三、Ka…...

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

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

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...

2.3 物理层设备

在这个视频中&#xff0c;我们要学习工作在物理层的两种网络设备&#xff0c;分别是中继器和集线器。首先来看中继器。在计算机网络中两个节点之间&#xff0c;需要通过物理传输媒体或者说物理传输介质进行连接。像同轴电缆、双绞线就是典型的传输介质&#xff0c;假设A节点要给…...

UE5 音效系统

一.音效管理 音乐一般都是WAV,创建一个背景音乐类SoudClass,一个音效类SoundClass。所有的音乐都分为这两个类。再创建一个总音乐类&#xff0c;将上述两个作为它的子类。 接着我们创建一个音乐混合类SoundMix&#xff0c;将上述三个类翻入其中&#xff0c;通过它管理每个音乐…...