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 -v与npm -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
在这里插入图片描述

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

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

相关文章

使用GPT训练中秋古诗写作讲解

使用GPT训练中秋古诗写作讲解

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师…
阅读更多...
PyTorch C++ 前端：张量

PyTorch C++ 前端：张量

本篇文章将尝试了解 PyTorch 组件的高级概述以及它们如何配合。 PyTorch 组件的高级概述 后端 PyTorch 后端是用 C++ 编写的，它提供 API 来访问高度优化的库，例如：用于高效矩阵运算的张量库、用于执行 GPU 运算的 CUDA 库以及用于梯度计算的自动微分等。 前端 可以使用…
阅读更多...
如何通过百度SEO优化提升网站排名（掌握基础概念，实现有效优化）

如何通过百度SEO优化提升网站排名（掌握基础概念，实现有效优化）

随着互联网的发展&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;成为了网站优化中不可或缺的一部分。在中国&#xff0c;百度搜索引擎占据着主导地位&#xff0c;因此掌握百度SEO概念和优化技巧对网站的排名和曝光非常重要。 百度SEO排名的6个有效方法&#xff1a; 首…
阅读更多...
前后端分离的低代码快速开发框架

前后端分离的低代码快速开发框架

低代码开发正逐渐成为企业创新的关键工具。通过提高开发效率、降低成本、增强灵活性以及满足不同用户需求&#xff0c;低代码开发使企业能够快速响应市场需求&#xff0c;提供创新解决方案。选择合适的低代码平台&#xff0c;小成本组建一个专属于你的应用。 项目简介 这是一个…
阅读更多...
PHP通过pem文件校验签名异常

PHP通过pem文件校验签名异常

问题描述&#xff1a; 在对接第三方支付过程中&#xff0c;支付成功异步回调时&#xff0c;校验签名&#xff0c;一直无法通过。 但是在支付成功时有一个同步返回也需要校验签名&#xff0c;用的是同样的校验方法&#xff0c;都没有问题。 当把回调时传递的参数放在postman中&a…
阅读更多...
测试域： 流量回放-工具篇jvm-sandbox，jvm-sandbox-repeater，gs-rest-service

测试域： 流量回放-工具篇jvm-sandbox，jvm-sandbox-repeater，gs-rest-service

JVM-Sandbox Jvm-Sandbox-Repeater架构_小小平不平凡的博客-CSDN博客 https://www.cnblogs.com/hong-fithing/p/16222644.html 流量回放框架jvm-sandbox-repeater的实践_做人&#xff0c;最重要的就是开心嘛的博客-CSDN博客 [jvm-sandbox-repeater 学习笔记][入门使用篇] 2…
阅读更多...
MYSQL存储引擎基础知识介绍

MYSQL存储引擎基础知识介绍

下面重点介绍几种常用的存储引擎,并对比各个存储引擎之间的区别&#xff0c;以帮助读者理解 不同存储引擎的使用方式。 MyISAM MyISAM是 MySQL的默认存储引擎。MyISAM不支持事务、也不支持外键&#xff0c;其优势是访 问的速度快&#xff0c;对事务完整性没有要求或者以 SEL…
阅读更多...
java面向对象（八）

java面向对象（八）

文章目录 一、abstract关键字的使用1.概念2. abstract修饰类:抽象类3.abstract修饰方法&#xff0c;抽象方法4.abstract使用上的注意点&#xff1a;5.抽象类的匿名子类 二、计算一段代码执行所花费的时间三、接口的使用1.接口的使用2.定义接口中的成员3.代码demo4.Java类可以实…
阅读更多...
stm32学习-芯片系列/选型/开发方式

stm32学习-芯片系列/选型/开发方式

【03】STM32HAL库开发-初识STM32 | STM概念、芯片分类、命名规则、选型 | STM32原理图设计、看数据手册、最小系统的组成 、STM32IO分配_小浪宝宝的博客-CSDN博客  STM32&#xff1a;ST是意法半导体&#xff0c;M是MCU/MPU&#xff0c;32是32位。  ST累计推出了&#xff1a…
阅读更多...
爬虫 — App 爬虫（一）

爬虫 — App 爬虫（一）

目录 一、介绍二、APP 爬虫常见反爬三、APP 抓包常用工具四、模拟器五、安装 APP1、下载 APP2、安装 APP 六、fiddler1、工作原理2、安装3、基本介绍 七、环境配置1、fiddler 的配置2、夜神模拟器的配置 八、案例 一、介绍 爬虫分类——数据来源 1、PC 端爬虫&#xff08;网页…
阅读更多...
Linux 打包压缩命令

Linux 打包压缩命令

目前 linux 中打包和压缩的命令很多&#xff0c;最常用的方法有 zip、gzip、bzip2、xz、tar 1.zip 压缩包 //制作 //-r 递归 表示将指定的目录下的所有子目录以及文件一起处理 zip -r public.zip public//解压 unzip public.zip unzip public.zip -d dir//查看 unzip -l publi…
阅读更多...
Android嵌套事务

Android嵌套事务

这时候旋转设备还是会重置秒表。旋转设备时Android会重新创建活动。如果你的活动包含一个 < fragment >元素&#xff0c;每次重新创建活动时&#xff0c;它会重新插入片段的一个新版本。老片段被丢掉&#xff0c;所有实例变量会设置其初始值。在这个特定的例子中&#xf…
阅读更多...
Matlab图像处理-HSI模型

Matlab图像处理-HSI模型

HSI模型 HSI模型是从人的视觉系统出发&#xff0c;直接使用颜色三要素色调(Hue)、饱和度(Saturation)和亮度&#xff08;Intensity&#xff09;来描述颜色。 亮度是指人眼感知光线的明暗程度。光的能量越大&#xff0c;亮度就越大。 色调是颜色最重要的属性。 它决定了颜色的…
阅读更多...
基于51单片机多路DTH11温湿度检测控制系统

基于51单片机多路DTH11温湿度检测控制系统

一、系统方案 1、本设计采用51单片机作为主控器。 2、DHT11采集温度度&#xff0c;支持3路温度度&#xff0c;液晶1602显示。 3、按键设置报警阀值。 4、系统声光报警。 二、硬件设计 原理图如下&#xff1a; 三、单片机软件设计 1、首先是系统初始化 //初始化LCD*********…
阅读更多...
Chinese-LLaMA-AIpaca

Chinese-LLaMA-AIpaca

文章目录 关于 Chinese-LLaMA-Alpaca一、LLaMA模型 --> HF格式二、合并LoRA权重，生成全量模型权重方式1：单LoRA权重合并方式2：多LoRA权重合并（适用于Chinese-Alpaca-Plus ）三、使用 Transformers 进行推理四、使用 webui 搭建界面1、克隆text-generation-webui并安装必…
阅读更多...
如何向PDB文件添加双键

如何向PDB文件添加双键

在用PDB文件进行分子绘图的时候&#xff08;制作OBJ&#xff09;&#xff0c;发现像Atomic blender插件和PDB本身并不支持双键&#xff0c;需要对PDB文件进行修改&#xff0c;参照的该yt链接https://www.youtube.com/watch?vYNoow7qkwFA&t364s&ab_channelEdvinFako 即…
阅读更多...
openpnp - use STM32 arduino on SchultzController

openpnp - use STM32 arduino on SchultzController

文章目录 openpnp - use STM32 arduino on SchultzController概述笔记官方的起始文档增加arduino第三方开发板库索引地址改好后, 能编译过的工程SchultzController.inoFeeder.hFeeder.cpp再验证一下内存是否够用补充 - 如果是自己做的板子END openpnp - use STM32 arduino on S…
阅读更多...
git安装配置教程

git安装配置教程

目录 git安装配置1. 安装git2. git 配置3.生成ssh key:4. 获取生产的密钥3. gitee或者github添加ssh-key4.git使用5. git 使用-本地仓库与远程仓库建立连接第一步&#xff1a;进入项目文件夹&#xff0c;初始化本地仓库第二步&#xff1a;建立远程仓库。 建立远程连接的小技巧 …
阅读更多...
echarts-可视化地图防重叠文本框

echarts-可视化地图防重叠文本框

我在第一篇可视化地图中&#xff0c;有一些基础介绍&#xff0c;本篇文章就是多展示一些效果&#xff0c;大家可以按需获取。 先直接上效果图 这里的配置项有用到 1、通过geo展示多层地图&#xff0c;这样可以像上图所示&#xff0c;通过错位有了一些3D效果&#xff1b; 2、北…
阅读更多...
沉积物微体古生物鉴定

沉积物微体古生物鉴定

声明 本文是学习GB-T 42629.4-2023 国际海底区域和公海环境调查规程 第4部分&#xff1a;海洋沉积物物理特性调查. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本文件规定了国际海底区域和公海环境调查中的沉积物组成、物理力学性质、生物…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023