Vue路由及Node.js环境搭建

目录

一.Vue路由

 1.1 定义

 1.2 应用领域

1.3 代码展示

 二、Node.js

 2.1 定义

2.2 特点

 三.Node.js安装与配置

3.1.下载

3.2.安装

 3.3.环境搭建

           好啦今天到这了,希望帮到你!!!

一.Vue路由

 1.1 定义

Vue路由是指使用Vue Router插件来管理前端应用程序的导航和页面路由的过        程。它允许你在单页面应用程序(SPA)中定义不同的路由路径,并将每个路径映射到相应的组件。

通过使用Vue路由,你可以根据URL的变化加载不同的组件或视图,并且可以通过导航链接(例如点击导航菜单或按钮)在不同的页面之间进行切换。Vue路由的核心目标是提供良好的用户体验,使用户能够在应用程序中自由导航和浏览内容,而不需要每次都重新加载整个页面。

 1.2 应用领域

Vue路由在以下领域有广泛的应用:

  • 单页面应用(SPA):Vue路由最常用的场景是在单页面应用程序中进行页面导航和路由管理。SPA指的是一种无需刷新整个页面的应用,通过路由切换来加载和显示不同的页面内容。Vue路由提供了轻量级、快速响应的路由解决方案,使开发者可以根据不同的路径加载相应的组件,从而实现整个应用程序的路由功能。
  • 多页面应用(MPA):虽然Vue的主要应用是在单页面应用中,但Vue路由也可以在多页面应用中使用。在这种情况下,Vue路由可以帮助你为每个页面创建独立的路由,并通过路由规则控制页面之间的导航。
  • 前端导航与页面跳转:Vue路由可以帮助你管理页面之间的导航和跳转。通过定义不同的路由路径和对应的组件,你可以使用导航链接或编程方式在应用程序中导航到指定的页面。这在构建用户友好的前端导航和页面跳转功能时非常有用。
  • 权限控制和路由守卫:Vue路由提供了导航守卫功能,可以用于实现权限控制和页面访问权限的验证。你可以使用导航守卫钩子函数,在用户进行路由切换前后执行相应的逻辑。这样你可以根据用户的登录状态、角色或其他条件决定是否允许访问某个页面。

Vue路由在构建现代Web应用程序中起着关键的作用。它使得前端开发者可以轻松地管理页面导航、实现前端路由和构建交互性强的单页面应用程序。无论是开发单页面应用还是多页面应用,Vue路由都可以提供强大的路由功能和良好的用户体验。

1.3 代码展示

代码如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!-- 1.导入路由所需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><title>路由</title></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></body><script type="text/javascript">// 2.定义两个组件const Home = Vue.extend({template:'<div>网站</div>'});const About = Vue.extend({template:'<div>欢迎来到我的网站</div>'});// 3.定义组件与路径对应关系let routes = [{component:Home,path:'/home'},{component:About,path:'/about'}];// 4.通过路由关系获取路由对象routerconst router = new VueRouter({routes});//5.将路由对象挂在到vue实例中new Vue({el: '#app',router,data() {return {name:'马牛逼'};}})</script>
</html>

 演示效果如下:

 二、Node.js

Node.js并不是一个传统意义上的框架或库,而是一个运行时环境。它提供了一组核心模块,包括文件系统、网络、操作系统等模块,方便开发者进行各种服务器端任务,如创建Web服务器、处理HTTP请求、进行文件操作等。同时,Node.js也支持通过第三方模块来扩展其功能,使得开发者能够轻松地使用各种功能丰富的模块来构建复杂的应用程序。

 2.1 定义

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境,可以在服务器端运行JavaScript代码。它使用事件驱动、非阻塞I/O模型,使得它能够高效地处理并发请求。Node.js的设计目标是为了构建可扩展的网络应用程序,它可以处理大量并发连接,并具有出色的性能表现。

2.2 特点

Node.js的主要特点包括:

  • 高性能:Node.js使用非阻塞、事件驱动的I/O模型,使得它能够高效地处理大量并发请求,并具有出色的性能表现。
  • 跨平台:Node.js可以在多个操作系统上运行,包括Windows、MacOS和Linux等,使得开发者可以在不同的平台上使用相同的代码进行开发。
  • JavaScript语言:Node.js使用JavaScript作为开发语言,使得前端开发人员可以在服务器端使用相同的语言进行开发,减少了学习成本和开发团队之间的技术转换。
  • 可扩展性:Node.js支持模块化开发,通过第三方模块可以轻松地扩展其功能,满足各种不同场景下的需求。
  • 社区支持:Node.js拥有庞大而活跃的社区,提供了大量的开源模块,方便开发者解决常见问题并加快开发速度。

Node.js是一个强大的JavaScript运行时环境,它使得开发者可以使用JavaScript在服务器端构建高性能、可扩展的网络应用程序。它的非阻塞I/O模型和事件驱动机制使得它在处理大量并发请求时非常高效,适合构建实时应用、Web服务器、API服务等各种类型的应用程序。 

 三.Node.js安装与配置

3.1.下载

下载 nodeJS 资源包 : 下载 | Node.js 

 注1:Node有两个版本线: LTS是长期维护的稳定版本Current是新特性版本 

3.2.安装

将文件解压到指定位置,并在解压后的目录下建立node_globalnode_cache这两个目录

node_global:npm全局安装位置
node_cache:npm缓存路径

如图 : 

 3.3.环境搭建

打开设置 -> 系统 -> 系统信息 -> 高级系统设置 -> 环境变量 -> 在系统变量中点击新建

新增一个环境变量

变量名 : NODE_HOME

变量值 :

下载后解压的指定目录 如( D:\temp\node\node-v10.15.3-win-x64\node-v10.15.3-win-x64 )

操作如图 : 

 在系统变量中找到名为 : PATH 变量名的变量选中后,添加以下两个环境变量

需要添加的变量值 : 

%NODE_HOME%

%NODE_HOME%\node_global

 : 根据自己的电脑看是否在变量值后面增加分号来间隔变量值。

如 :

%NODE_HOME%;

%NODE_HOME%\node_global;

操作如图 : 

测试安装是否成功及环境变量是否配置完成

Win+R,输入cmd,打开cmd窗口,输出如下命令配置环境变量的查看
           echo %node_home%
           echo %path%

操作如图 :

Win+R,输入cmd,打开cmd窗口,输出如下命令测试安装是否成功

           node -v
           npm -v

操作如图 : 

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

Win+R,输入cmd,打开cmd窗口,分开执行如下命令:

npm config set cache "D:\temp\node\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_cache"

npm config set prefix "D:\temp\node\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_global"

注 :

以上的路径是下载node的本地路径,再进入到增加新建的两个文件目录里面

其中的双引号不能少

如果执行命令卡死,可以删除C:\Users\用户名\.npmrc 后重新执行。(用户名:为当前电脑的用户名)

( node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来 )

操作如图 : 

设置淘宝源 : 

修改npm镜像提高下载速度(可以使用 cnpm 或 直接设置 --registry ,推荐设置 --registry)

Win+R,输入cmd,打开cmd窗口,输入指令:

npm config set registry https://registry.npm.taobao.org/

注 : 可以根据一下命令查看所有你设置过的源

npm config get registry

设置如图 : 

 测试是否可以使用并运行启动Node.js项目

随便全局安装一个模块就可以测评

Win+R,输入cmd,打开cmd窗口,输入指令:

npm install webpack -g

 命令执行完毕后,会在node_global路径下面生成(node_modules\webpack)文件

如果在自己的本地路径中,进行项目测试。

随便在自己的电脑上找一个项目,看是否可以进行添加Node.js依赖

 在项目的跟目录中打开cmd窗口

依赖添加后,启动项目。

继续执行以下命令启动项目:

npm run dev 

 

 启动执行后,项目开启说明完成;

           好啦今天到这了,希望帮到你!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/140914.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大数据-hadoop

1.hadoop介绍 1.1 起源 1.2 版本 1.3生产环境版本选择 Hadoop三大发行版本:Apache、Cloudera、Hortonworks Apache版本最原始的版本 Cloudera在大型互联网企业中用的较多 Hortonworks文档较好 1.4架构 hadoop由三个模块组成 分布式存储HDFS 分布式计算MapReduce 资源调度引擎Y…

单片机上软字库换32进制存储,空间占用少20%

在之前的单片机字库建立的推送中: https://blog.csdn.net/platform/article/details/130742775&#xff0c; 存储了GB2312字符集对应的软字库文件&#xff0c;在16*16的编码下总字库的507KB&#xff0c;后来把字体切换成了12*12&#xff0c;软字库缩减到了301KB。当然这里面对…

Android---底部弹窗之BottomSheetDialog

BottomSheetDialog 是Android开发中的一个弹出式对话框&#xff0c;它从屏幕底部弹出并覆盖部分主界面。 1. BottomSheetDialog的使用 // 参数2&#xff1a;设置BottomSheetDialog的主题样式&#xff1b;将背景设置为transparent&#xff0c;这样我们写的shape_bottom_sheet_…

20230918使用ffmpeg将mka的音频转为AAC编码以便PR2023来识别

20230918使用ffmpeg将mka的音频转为AAC编码以便PR2023来识别 2023/9/18 20:58 ffmpeg -i 1.mka -acodec aac 1.mp4 ffmpeg -i 1.mka -vn -c:a aac 2.aac ffmpeg -i 1.mka -vn -c:a aac 2.MP4 ffmpeg mka 转 aacmp4 https://avmedia.0voice.com/?id42526 用ffmpeg将mka格式转化…

华为云云耀云服务器L实例评测 | Docker 部署 Reids容器

文章目录 一、使用Docker部署的好处二、Docker 与 Kubernetes 对比三、云耀云服务器L实例 Docker 部署 Redis四、可视化工具连接Redis⛵小结 一、使用Docker部署的好处 Docker的好处在于&#xff1a;在不同实例上运行相同的容器 Docker的五大优点&#xff1a; 持续部署与测试…

AI绘图提示词Stable Diffusion Prompt 笔记

基础 提示词分为正向提示词&#xff08;positive prompt&#xff09;和反向提示词&#xff08;negative prompt&#xff09;&#xff0c;用来告诉AI哪些需要&#xff0c;哪些不需要词缀的权重默认值都是1&#xff0c;从左到右依次减弱&#xff0c;权重会影响画面生成结果。AI …

Spring Boot集成Redis实现数据缓存

🌿欢迎来到@衍生星球的CSDN博文🌿 🍁本文主要学习Spring Boot集成Redis实现数据缓存 🍁 🌱我是衍生星球,一个从事集成开发的打工人🌱 ⭐️喜欢的朋友可以关注一下🫰🫰🫰,下次更新不迷路⭐️💠作为一名热衷于分享知识的程序员,我乐于在CSDN上与广大开发者…

C++标准模板库STL——list的使用及其模拟实现

1.list的介绍 list的文档介绍 1. list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。 2. list的底层是双向链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xff0c;在节点中通过指针指向 其前一个…

【C++】开源:单元测试框架gtest配置使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍单元测试框架gtest配置使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff…

服务器性能测试监控平台export+prometheus(普罗米修斯)+grafana搭建

1. export 数据采集工具 简介&#xff1a; export是prometheus是的数据采集组件的总称&#xff0c;它可以将采集到的数据转为prometheus支持的格式 node_export: 用来监控服务器硬件资源的采集器&#xff0c;端口号为9100mysql_export: 用来监控mysql数据库资源的采集器&…

性能测试 —— Tomcat监控与调优:Jconsole监控

JConsole的图形用户界面是一个符合Java管理扩展(JMX)规范的监测工具&#xff0c;JConsole使用Java虚拟机(Java VM)&#xff0c;提供在Java平台上运行的应用程序的性能和资源消耗的信息。在Java平台&#xff0c;标准版(Java SE平台)6&#xff0c;JConsole的已经更新到目前的外观…

前端新轮子Nue,号称替代Vue、React和Svelte

新的简约前端开发工具集Nue.js 于周三发布。在 Hacker News 上介绍它时&#xff0c;前端开发者和Nue.js 的创作者Tero Piirainen表示&#xff0c;它是 React、Vue、Next.js、Vite、Svelte 和 Astro 的替代品。他在 Nue.js的 FAQ 中进一步解释说&#xff0c;它是为网站和响应式用…

力扣刷题-链表-两两交换链表中的节点

24.两两交换链表中的节点 给定一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后的链表。你不能只是单纯的改变节点内部的值&#xff0c;而是需要实际的进行节点交换。 解题思路 采用正常模拟的方法。 建议使用虚拟头结点&#xff0c;这样会方便很多&am…

【python爬虫】爬虫所需要的爬虫代理ip是什么?

目录 前言 一、什么是爬虫代理 IP 二、代理 IP 的分类 1.透明代理 2.匿名代理 3.高匿代理 三、如何获取代理 IP 1.免费代理网站 2.付费代理服务 四、如何使用代理 IP 1.使用 requests 库 2.使用 scrapy 库 五、代理 IP 的注意事项 1.代理 IP 可能存在不稳定性 2…

R语言贝叶斯非参数模型:密度估计、非参数化随机效应META分析心肌梗死数据...

全文链接&#xff1a;http://tecdat.cn/?p23785 最近&#xff0c;我们使用贝叶斯非参数&#xff08;BNP&#xff09;混合模型进行马尔科夫链蒙特卡洛&#xff08;MCMC&#xff09;推断&#xff08;点击文末“阅读原文”获取完整代码数据&#xff09;。 概述 相关视频 在这篇文…

坐标休斯顿,TDengine 受邀参与第九届石油天然气数字化大会

美国中部时间 9 月 14 日至 15 日&#xff0c;第九届石油天然气数字化大会在美国德克萨斯州-休斯顿-希尔顿美洲酒店举办。本次大会汇聚了数百名全球石油天然气技术高管及众多极具创新性的数据技术方案商&#xff0c;组织了上百场硬核演讲&#xff0c;技术专家与行业从业者共聚一…

12:STM32---RTC实时时钟

目录 一:时间相关 1:Unix时间戳 2: UTC/GMT 3:时间戳转化 二:BKP 1:简历 2:基本结构 三: RTC 1:简历 2: 框图 3:RTC基本结构 4:RTC操作注意 四:案例 A:读写备份寄存器 1:连接图 2: 步骤 3: 代码 B:实时时钟 1:连接图 2:函数介绍 3:代码 一:时间相关 1:Un…

虹科教您 | 可实现带宽计量和延迟计算的时间敏感网络测试工具RELY-TSN-LAB操作指南与基本功能测试

1. RELY-TSN-LAB产品概述 时间敏感网络(TSN)能够合并OT和IT世界&#xff0c;这将是真正确保互操作性和标准化的创新性技术。这项技术的有效开发将显著降低设备成本、维护、先进分析服务的无缝集成以及减少对单个供应商的依赖。为了在这些网络中实现确定性&#xff0c;需要控制…

如何取消显示Notepad++每行显示的CRLF符号

新电脑中重新安装了Nodepad&#xff0c;打开记事本后发现出现了许多黑底的CR|LF标记&#xff0c;特别碍眼。 如何取消呢&#xff1f; 视图 -> 显示符号 -> 取消勾选 显示行尾符操作步骤 预期效果

虹科案例 | LIN/CAN总线汽车零部件测试方案

文章来源&#xff1a;虹科汽车电子 点此阅读原文 虹科的LIN/CAN总线汽车零部件测试方案是一款优秀的集成套装&#xff0c;基于Baby-LIN系列产品&#xff0c;帮助客户高效完成在测试、生产阶段车辆零部件质量、功能、控制等方面的检测工作。 1、汽车零部件测试的重要性&#xf…