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.mzph.cn/news/84309.shtml

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

相关文章

C++项目：仿mudou库实现高性能高并发服务器

C++项目：仿mudou库实现高性能高并发服务器

文章目录 一、实现目标二、前置知识&#xff08;一&#xff09;HTTP服务器1.概念2.Reactor模型&#xff1a;3.分类 一、实现目标 仿muduo库One Thread One Loop式主从Reactor模型实现高并发服务器&#xff1a; 通过咱们实现的高并发服务器组件&#xff0c;可以简洁快速的完成⼀…
阅读更多...
【深度学习】卷积神经网络（LeNet）【文章重新修改中】

【深度学习】卷积神经网络（LeNet）【文章重新修改中】

卷积神经网络 LeNet 前言LeNet 模型代码实现MINST代码分块解析1 构建 LeNet 网络结构2 加载数据集3 初始化模型和优化器4 训练模型5 训练完成 完整代码 Fashion-MINST代码分块解析1 构建 LeNet 网络结构2 初始化模型参数3 加载数据集4 定义损失函数和优化器5 训练模型 完整代码…
阅读更多...
云服务器ECS_云主机_服务器托管_计算-阿里云

云服务器ECS_云主机_服务器托管_计算-阿里云

阿里云服务器是什么&#xff1f;云服务器ECS是一种安全可靠、弹性可伸缩的云计算服务&#xff0c;云服务器可以降低IT成本提升运维效率&#xff0c;免去企业或个人前期采购IT硬件的成本&#xff0c;阿里云服务器让用户像使用水、电、天然气等公共资源一样便捷、高效地使用服务器…
阅读更多...
新手怎样快速上手接口测试？掌握这几个知识点直接起飞！

新手怎样快速上手接口测试？掌握这几个知识点直接起飞！

接口测试是测试系统组件间接口的一种方式&#xff0c;接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是检查数据的增删改查操作&#xff0c;以及系统之间的逻辑关系等 接口的几种类型 接口的类型包括&#xff1a;post &#xff0c;get&am…
阅读更多...
沉积物微体古生物鉴定

沉积物微体古生物鉴定

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

【C++】unordered_map与unorder_set的封装（哈希桶）

文章目录 前言一、模板参数的改造二、模板的特例化操作三、仿函数的妙用四、unordered迭代器基本操作1.const迭代器注意&#xff1a;2.HashTable与HTIterator的冲突 五、迭代器的构造问题六、完整代码1.hash_bucket.h2.unordered_set.h3.unordered_map.h 前言 我们开辟一个指针…
阅读更多...
使用LDA（线性判别公式）进行iris鸢尾花的分类

使用LDA（线性判别公式）进行iris鸢尾花的分类

线性判别分析((Linear Discriminant Analysis &#xff0c;简称 LDA)是一种经典的线性学习方法&#xff0c;在二分类问题上因为最早由 [Fisher,1936] 提出&#xff0c;亦称 ”Fisher 判别分析“。并且LDA也是一种监督学习的降维技术&#xff0c;也就是说它的数据集的每个样本都…
阅读更多...
驱动开发--汇总

驱动开发--汇总

一&#xff0c;【驱动相关概念】 1&#xff0c;什么是驱动 能够驱使硬件实现特定功能的软件代码 根据驱动程序是否依赖于系统内核将驱动分为裸机驱动和系统驱动 2&#xff0c;逻辑驱动和系统驱动的区别 裸机驱动&#xff1a;编写的驱动代码中没有进行任何内核相关API的调用…
阅读更多...
Flutter插件的制作和发布

Flutter插件的制作和发布

Flutter制作插件有两种方式&#xff08;以下以android和ios为例&#xff09;&#xff1a; 目录 1.直接在主工程下的android和ios项目内写插件代码&#xff1a;2.创建独立Flutter Plugin项目&#xff0c;制作各端插件后&#xff0c;再引入项目&#xff1a;1. 创建Flutter Plugin…
阅读更多...
Webpack打包CSS文件，解决You may need an appropriate loader to handle this file type报错

Webpack打包CSS文件，解决You may need an appropriate loader to handle this file type报错

在项目文件夹下创建webpack.config.js文件&#xff0c;该文件就是Webpack的配置文件 注意&#xff1a;该文件中遵循Node.js的代码格式规范 &#xff0c;需要对导出配置文件中的内容 Webpack在默认情况下只能打包js文件&#xff0c;如果我们希望他能够打包其他类型的文件&#…
阅读更多...
物联网安全优秀实践：2023年设备保护指南

物联网安全优秀实践：2023年设备保护指南

物联网的发展可谓是革命性的&#xff0c;数十亿台设备实时互连、通信和共享数据。因此&#xff0c;考虑物联网安全的最佳实践至关重要。 物联网的重要性日益上升 在数字时代&#xff0c;物联网(IoT)已成为一股革命力量&#xff0c;重塑了企业运营和个人生活方式。从调节家庭温…
阅读更多...
堆的OJ题

堆的OJ题

&#x1f525;&#x1f525; 欢迎来到小林的博客&#xff01;&#xff01;       &#x1f6f0;️博客主页&#xff1a;✈️林 子       &#x1f6f0;️博客专栏&#xff1a;✈️ 小林的算法笔记       &#x1f6f0;️社区 :✈️ 进步学堂       &am…
阅读更多...
中国数据库走向国际的门槛： 15分钟准则

中国数据库走向国际的门槛： 15分钟准则

在十五分钟之内跑通第一条SQL 笔者曾经负责国内某Top云厂商的数据库的海外业务和产品设计。简单的说包括TP&#xff0c;AP&#xff0c;NoSQL和Utility的所有数据库相关产品&#xff0c;负责除中国大陆以外所有的业务和客户。三年时间撞墙的教训实在不少。 在官方宣传上&#…
阅读更多...
Scala 高阶：Scala中的模式匹配

Scala 高阶：Scala中的模式匹配

一、概述 Scala中的模式匹配&#xff08;case&#xff09;类似于Java中的switch...case&#xff0c;但是Scala的模式匹配功能更为强大。通过模式匹配&#xff0c;可以匹配更复杂的条件和数据结构&#xff0c;包括常量、类型、集合、元组等。而 Java 的 switch 语句只能用于匹配…
阅读更多...
算法分析与设计编程题 贪心算法

算法分析与设计编程题 贪心算法

活动安排问题 题目描述 解题代码 vector<bool> greedySelector(vector<vector<int>>& intervals) {int n intervals.size();// 将活动区间按结束时间的从小到大排序auto cmp [](vector<int>& interval1, vector<int>& interval2…
阅读更多...
YOLOv5，YOLOv8添加ASFF（自适应空间特征融合）

YOLOv5，YOLOv8添加ASFF（自适应空间特征融合）

ASFF&#xff1a;Adaptively Spatial Feature Fusion (自适应空间特征融合) 论文来源&#xff1a;Learning Spatial Fusion for Single-Shot Object Detection 代码地址&#xff1a;ASFF 1.背景 不同特征尺度之间的不一致性是基于特征金字塔的单阶段检测器的主要缺陷。 本文…
阅读更多...
【VastbaseG100】 FATAL: The account has been locked.

【VastbaseG100】 FATAL: The account has been locked.

使用VastbaseG100 数据库&#xff0c;查询数据报错。 org.postgresql.util.PSQLException: FATAL: The account has been locked. 帐户已被锁定。 解锁账户呗 ALTER ROLE doc ACCOUNT UNLOCK;ALTER ROLE 用户名 ACCOUNT UNLOCK; 修改密码 ALTER ROLE doc IDENTIFIED BY ZhangS…
阅读更多...
Git小乌龟不弹add push commit的方法

Git小乌龟不弹add push commit的方法

1.关于使用Git小乌龟无法弹出Add菜单的问题 第一次使用小乌龟软件&#xff0c;发现可以正常将程序从Gitee仓库中克隆到本地&#xff0c;但是在将本地的程序上传到Gitee仓库中时&#xff0c;TortoiseGit无法弹出Add那一系列菜单&#xff0c;如下图所示&#xff1a; 2.解决方法 …
阅读更多...
开源日报 0821：帮你修复老旧照片

开源日报 0821：帮你修复老旧照片

这篇文章总结了几个开源项目的特点和优势。其中包括了 Python 资源列表、金融研究工具、动画精灵程序、游戏和旧照片修复项目等。这些项目提供了丰富的功能和技术支持&#xff0c;用户可以根据自己的需求进行定制和改进。总的来说&#xff0c;这些开源项目为开发者和用户提供了…
阅读更多...
安防视频/视频汇聚平台EasyCVR使用onvif探测添加设备通道详细步骤来啦！

安防视频/视频汇聚平台EasyCVR使用onvif探测添加设备通道详细步骤来啦！

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。音视频流媒体视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023