Vue之路由及Node.js环境搭建（一起探索新事物）

2023-09-21 11:55:52

目录

​编辑

前言

一、Vue之路由

1.路由简介

1.1 什么是路由

1.2 什么是SPA

1.3 SPA的实现思路

1.4 使用路由的优势

2. 案例演示

2.1 导入所需的js文件

2.2 编写案例代码（模拟页面跳转）

二、Vue之node.js

1. node.js简介

1.1 什么是node.js

1.2 node.js的特点

1.3 什么是npm

1.4 npm的作用及重要性

2. node.js的环境搭建

2.1 下载node.js

2.2 解压配置

 2.3 配置node.js的环境变量

2.4 测试node.js配置是否成功

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

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

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

3. 测试node.js是否成功安装（运行一个项目）

3.1 找到运行的项目文件

3.2 下载项目所需依赖

​编辑

 3.3 运行项目

前言

        在前面的几次有关Vue知识的博客中我们对Vue的认知及使用都有了一个初步的认知，今天我继续分享有关Vue的相关知识。今天带大家探索一些事物，这期博客有重点，还请老铁们认真仔细观看阅读。

 

一、Vue之路由

1.路由简介

1.1 什么是路由

        在Vue中，路由是一种用于管理单页面应用程序（SPA）导航的机制。它允许我们在不刷新整个页面的情况下，根据 URL 的变化动态加载不同的内容。

        Vue提供了一个名为Vue Router的官方插件，它能够帮助我们实现路由功能。使用Vue Router，我们可以定义多个路由，每个路由对应一个URL路径，并且可以指定对应的组件。

        路由配置通常定义在应用程序的主文件中，我们可以设置不同的路径和对应的组件，以及实现导航的方式，比如前进、后退、重定向等。当用户在浏览器中访问不同的URL时，Vue Router会根据定义的路由规则，将相应的组件渲染到页面中，从而实现页面间的切换和导航。这样，我们可以通过路由来构建一个完整的单页面应用，提供更好的用户体验。

1.2 什么是SPA

        SPA（Single Page Application）指的是单页面应用，它是一种通过动态加载内容来实现网页应用程序的设计模式。传统的多页面应用在用户导航时会进行页面的完整刷新，而SPA则通过使用JavaScript动态更新页面的一部分，避免了整个页面的重新加载。

        在SPA中，初始时只加载一个HTML页面，后续的内容加载通过AJAX或WebSocket等技术实现。当用户进行导航或与应用程序进行交互时，SPA会通过JavaScript重新渲染并更新页面的部分内容，而不会重新加载整个页面。在使用Vue、React、Angular等现代前端框架时，通常会使用SPA的设计模式来构建单页面应用。

1.3 SPA的实现思路

  1. 设计和划分组件：首先，你需要根据应用程序的需求和功能划分出不同的组件，比如导航栏、侧边栏、内容区域等。每个组件只负责特定的功能和展示。

  2. 路由设置：使用合适的前端框架（如Vue Router、React Router等），配置路由表。你可以定义不同的路由路径和对应的组件，稍后根据导航需要进行切换。

  3. 搭建页面结构：创建一个主页面容器，通常是一个单页 HTML 文件。也可以使用框架提供的 HTML 模板。

  4. 组件渲染：在主页面容器中，挂载根组件并设置路由出口。根据当前路由的变化，将会渲染对应的组件到出口区域。

  5. 导航和路由跳转：为用户提供导航界面，例如导航栏、菜单等。当用户点击导航链接时，根据配置的路由表，进行路由跳转到指定的页面组件。

  6. 组件间通信和数据管理：根据应用程序的需求，你可能需要对组件之间的通信进行管理。可以使用状态管理工具（如Vuex、Redux等）或者通过props和事件等方式传递数据。

  7. 异步数据加载：SPA 通常会异步加载数据，可以使用 AJAX、fetch 或者其他库（如 axios）来与后端进行数据交互。

  8. 优化和性能调优：在开发过程中，需要关注性能方面的优化。这包括代码拆分、懒加载、缓存策略、减少网络请求等。

1.4 使用路由的优势

路由的优势
优势说明
前端路由路由可以实现前端的页面导航和内容切换，通过在不刷新整个页面的情况下加载不同的组件，提供了更流畅和快速的用户体验。
深度链接和可分享性使用路由可以实现深度链接，即可以直接通过URL访问到指定的页面或视图，而不需要经过多次点击或操作。这样便于直接访问特定内容，并且方便在不同渠道分享链接。
状态管理和参数传递路由可以用于传递参数和管理应用程序的状态。例如，可以在URL中包含查询参数，传递给目标页面使用；也可以在路由之间共享状态，从而实现数据的持久化或跨组件通信。
组织和模块化使用路由可以将应用程序的不同功能区块划分为多个路由和组件，使代码更加模块化和可维护。这样可以更好地组织和管理代码，在大型应用程序中提高开发效率。
导航守卫和权限控制路由可以提供导航守卫功能，可以在路由切换前进行权限验证或其他逻辑判断，从而实现更精细的权限控制和用户体验。

2. 案例演示

2.1 导入所需的js文件

<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>

我导入的是网络Vue路由的js文件，需要在又网络的情况下才能生效。

2.2 编写案例代码（模拟页面跳转）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<!-- 1.引入路由的js依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
		<title>Vue-路由</title>
	</head>
	<body>
		<div id="app">
			<!-- 6. 触发路由事件的按钮-->
			<router-link to="/home">首页</router-link>
			<router-link to="/about">关于酒店</router-link>
			<!-- 定义路由内容 -->
			<router-view></router-view>
		</div>

		<script type="text/javascript">
			// 2..定义两个组件
			var Home = Vue.extend({
				template: '<div>君易酒店首页</div>'
			});

			var About = Vue.extend({
				template: '<div>君易酒店简介</div>'
			});
			// 3.定义路径与路由对应关系
			var routes = [{
					component: Home,
					path: '/home'
				},
				{
					component: About,
					path: '/about'
				}
			];
			// 4.将路由关系获取路由对象router
			var router = new VueRouter({
				routes
			});
			// 5.将路由对象挂载到Vue实例中

			new Vue({
				el: '#app',
				router,
				data() {
					return {
						msg: 'ssdd'
					}
				}
			});
		</script>
	</body>
</html>

效果展示

二、Vue之node.js

1. node.js简介

1.1 什么是node.js

        Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，用于在服务器端运行 JavaScript 代码。它允许开发者使用 JavaScript 来编写服务器端应用程序，而不仅限于在浏览器中执行。

        注：

Node.js-->JavaScript运行环境，开发语言是：javascript；J2EE   -->Java运行环境， 开发语言是java

Node.js v10.15.3文档地址：http://nodejs.cn/api/

1.2 node.js的特点

node.js的特点
特点说明
异步非阻塞Node.js 使用事件驱动和非阻塞 I/O 模型，使得它能够处理大量的并发请求，而不会阻塞其他请求的处理。
跨平台Node.js 可以在多个操作系统上运行，包括 Windows、Mac OS 和各种 Linux 发行版。
快速高效借助 Chrome V8 引擎的优势，Node.js 执行 JavaScript 代码的速度很快，能够在很短的时间内处理大量请求。
丰富的模块生态系统Node.js 内置了大量的核心模块，同时也有庞大的开源社区贡献了众多的第三方模块，可以使开发者轻松地构建复杂的应用。

总结：Node.js 可以用于构建各种类型的应用，例如 Web 服务器、实时聊天应用、命令行工具、API 服务等。它的设计思想和生态系统使得开发人员能够轻松地构建高性能和可扩展的应用程序。

1.3 什么是npm

        npm是Node Package Manager的缩写，是一种用于管理和共享JavaScript代码包的工具。它是Node.js的默认软件包管理器，让开发者可以方便地安装、更新、删除和管理项目中使用的各种JavaScript库和工具。 

        使用npm，开发者可以通过命令行界面快速地安装所需的包。npm提供了一个庞大的包生态系统，开发者可以从中选择和使用开源的JavaScript库、框架和工具，以加快开发速度，避免重复造轮子。此外，npm还允许开发者将自己编写的JavaScript代码包发布到npm仓库，供其他开发者使用。这种共享代码包的方式促进了JavaScript社区的合作和协作。

1.4 npm的作用及重要性

npm的作用及重要性
作用说明
依赖管理npm可以帮助开发者管理项目的依赖关系。
资源共享npm提供了一个庞大的包生态系统，通过npm可以轻松地获取和使用各种开源的JavaScript包、库、框架和工具。
版本管理npm允许开发者在项目中使用特定的软件包版本，并能够方便地升级或回滚版本。
包发布与分享开发者可以使用npm将自己编写的JavaScript包发布到npm仓库，供其他开发者使用。

2. node.js的环境搭建

2.1 下载node.js

下载网站：下载 | Node.js

 通常下载.zip文件，将下载好的压缩包放到我们要安装的路径下（最好是全英文路径）

注：版本14对于node.js来说是一个分水岭，如果低于14版本的node.js运行项目运行不了就使用高于14的版本。

2.2 解压配置

找到压缩包解压文件

 在解压的目录下创建两个文件夹，一个是 node_global（npm全局安装位置）、 node_cache（npm缓存路径），不要打错字母了。

 2.3 配置node.js的环境变量

        配置node.js的环境变量和配置jdk的环境变量相似，在高级系统设置中下的环境变量里配置。

右击此电脑点击属性，进入到高级系统设置下的环境变量配置中

 

 

新建一个变量，点击新建，变量名输入NODE_HOME；变量值输入你解压后的node.js的路径。

 

 在path变量名中添加%NODE_HOME%;%NODE_HOME%\node_global;到后面

2.4 测试node.js配置是否成功

win+R，进入命令终端，node -v、 npm -v分别查看node.js和npm的版本信息

        注：若是想修改node.js的版本，只需要将新版本的压缩包方置和之前版本的同意目录下解压，将变量中的版本改一下即可，如：10.15--》18.15改个数字即可。

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

打开cmd窗口，进入终端，输入

npm config set cache "node_cache文件夹路径"（D:\initPath\node-v10.15.3-win-x64\node_cache）

npm config set prefix "node_global文件夹路径"（D:\initPath\node-v10.15.3-win-x64\node_global）

运行命令之后会在C:\Users\用户名下生成一个.npmvc

注：

  • 将步骤一创建的node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来
  •     如果执行命令卡死，可以删除C:\Users\用户名\.npmrc 后重新执行。（用户名：为当前电脑的用户名）
  •       "D:\initPath\node-v10.15.3-win-x64\node_global"，双引号不能少

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

在cmd窗口输入npm config set registry https://registry.npm.taobao.org/指令设置淘宝源

通过npm get registry指令查看镜像源

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

在cmd窗口输入npm install webpack -g则会生成如下文件

%node_home%\node_global\node_modules\webpack

 在D:\MYsoftware\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_global会生成webpack文件

3. 测试node.js是否成功安装（运行一个项目）

3.1 找到运行的项目文件

在桌面新建一个文件夹命名为英文，将项目压缩包放入，解压即可。

3.2 下载项目所需依赖

进入到项目的跟目录，在路径上输入cmd进入终端界面。输入npm i即可

 3.3 运行项目

输入指令 npm run dev启动项目

 这样就说明node.js安装成功

        本期的博客分享到这希望能给各位老铁带来帮助和收获，给博主三连加关注支持一下，

 

更多推荐

MySQL备份与恢复

目录一、数据库备份二、数据备份的重要性三、MySQL完全备份优缺点实例：完全备份MySQL物理冷备份及恢复完全备份指定库中的部分表完全备份MySQL,服务器中所有的库完全备份一个或多个完的库(包括其中所有的表)查看备份文件MySQL完全恢复恢复数据库恢复数据表MySQL增量备份基于位置恢复基于时间点恢复一、数据库备份备

MySQL安装（1）

安装环境:Win1064位软件版本:MySQL5.7.24解压版一、下载点开下面的链接：https://downloads.mysql.com/archives/community/选择选择和自己系统位数相对应的版本点击右边的Download，此时会进到另一个页面，同样在接近页面底部的地方找到如下图所示的位置：不用理会

数据库知识

1、count(1),count(*),count(列名)的区别和联系?当表的数据量很大时候，count(1)比count(*)更加消耗时间，如果count（1）是聚索引那么count(*)会更快一些，因为count(*)会自动优化指定哪一字段。综上所述，count(1)和count(*)基本没有区别！count(1)

【C语言】可变参数列表详解

可变参数列表一、可变参数列表的使用1、可变参数列表的形式2、可变参数列表的提取3、使用演示4、利用可变参数实现一个简单的日志打印功能二、可变参数列表的原理1、原理的讲解2、原理的证明一、可变参数列表的使用1、可变参数列表的形式有时我们在使用C语言时可能会碰到这样的情况，希望函数带有可变数量的参数，而不是预定义数量的参数

6.3 构建并评价分类模型

6.3构建并评价分类模型6.3.1使用sklearn估计器构建分类模型1、使用sklearn估计器构建SVM模型2、分类结果的混淆矩阵与准确率代码6.3.2评价分类模型分类是指构造一个分类模型，输入样本的特征值，输出对应的类别，将每个样本映射到预先定义好的类别。分类模型建立在已有类标记的数据集上，属于有监督学习。在实际

python字符串

python字符串字符串1.字符串的创建2.字符串的常用操作2.1查询操作2.2大小写转换操作2.3内容对其操作2.4劈分操作2.5判断操作2.6替换与合并操作2.7比较操作2.8切片操作2.9格式化字符串操作3.字符串的编码转换字符串字符串是一个不可变的字符序列。1.字符串的创建#单引号，双引号，三引号都可以a='p

【Java】SpringData JPA快速上手，关联查询，JPQL语句书写

JPA框架文章目录JPA框架认识SpringDataJPA使用JPA快速上手方法名称拼接自定义SQL关联查询JPQL自定义SQL语句​在我们之前编写的项目中，我们不难发现，实际上大部分的数据库交互操作，到最后都只会做一个事情，那就是把数据库中的数据映射为Java中的对象。比如我们要通过用户名去查找对应的用户，或是通过I

【SpringSecurity】三更草堂项目案例分析2 - 认证主体业务编写

认证主体业务配置mybatisplus为User创建mapper代码清单：/mapper/UserMapper.java@MapperpublicinterfaceUserMapperextendsBaseMapper<User>{}在入口类中对该mapper执行扫描@SpringBootApplication@Map

COMP3511 Spring 2022

COMP3511Spring2022PA1:SimplifiedLinuxShell(Multi-levelPipe)/*COMP3511Spring2022PA1:SimplifiedLinuxShell(Multi-levelPipe)Yourname:YourITSCemail:@connect.ust.hkDe

六、数学建模之插值与拟合

1.概念2.例题和matlab代码求解一、概念1.插值（1）定义：插值是数学和统计学中的一种技术，用于估算在已知数据点之间的未知数据点的值。插值的目标是通过已知数据点之间的某种函数或方法来估计中间位置的数值。插值通常用于数据分析、图形绘制、数值模拟和其他领域。（2）常见插值方法1）线性插值：是通过已知数据点之间的直线来

【毕业项目】 云备份

项目介绍：运用之前学过的知识做出一个云备份程序云备份云备份项目认识实现目标服务端功能细分服务端模块化客户端功能细分客户端模块划分环境搭建g++升级7.3版本安装jsoncpp库下载bundle数据压缩库下载httplib库第三方库认识json认识jsoncpp--value类jsoncpp--writer类jsoncp

热文推荐
  1. 79、SpringBoot 整合 R2DBC --- R2DBC 就是 JDBC 的 反应式版本， R2DBC 是 JDBC 的升级版。

    ★何谓R2DBCR2DBC就是JDBC的反应式版本，R2DBC是JDBC的升级版。R2DBC是ReactiveRelationalDatabaseConnectivity(关系型数据库的响应式连接)的缩写反应式的就是类似于消息发布者和订阅者，有消息就进行推送。R2DBC中DAO接口中方法的返回值是Flux或Mono因此

  2. 嵌入式笔试面试刷题(day5 IIC详解)

    文章目录前言一、IIC需要几根线分别是什么线二、IIC优势三、IIC可以挂载多少个从设备，主设备1.从设备数量2.主设备数量四、IIC是全双工还是半双工五、SDA和SCL为什么配置为上拉开漏输出模式1.为什么要配置为开漏输出不能是推挽输出a.实现线与功能b.保护设备不会被短路2.上拉电阻的作用a.确保空闲状态保持高电平

  3. Java synchronized关键字常见面试题

    1、什么是线程同步，为什么需要线程同步？线程同步是一种机制，用于控制多个线程对共享资源的访问，以防止并发问题。它需要确保在同一时刻只有一个线程可以访问共享资源，以避免数据竞争和不一致性。2、请解释Java中synchronized关键字的作用和用法。synchronized关键字用于实现线程同步。它可以应用于方法或代码

  4. 0021Java程序设计-SSM框架图书管理系统

    文章目录摘要目录系统设计开发环境摘要伴随着时代的进步，以及科学技术的不断发展，越来越多的人会从图书馆中借阅书籍，从而获得新的知识。但是，传统的图书管理方法有着很多不便之处，而且还容易丢失，因此，很有必要设计出一个易于操作，具有高便捷性，还可以提高工作效率的图书管理系统。该系统采用了Java技术，采用了计算机技术，取代了

  5. python经典百题之请问他多少岁

    题目:有5个人坐在一起，问第五个人多少岁？他说比第4个人大2岁。问第4个人岁数，他说比第3个人大2岁。问第三个人，又说比第2人大两岁。问第2个人，说比第一个人大两岁。最后问第一个人，他说是10岁。请问第五个人多大？方法1:迭代deffind_fifth_person_age_iterative():age=10#第一个

  6. Multitor：一款带有负载均衡功能的多Tor实例创建工具

    关于MultitorMultitor是一款带有负载均衡功能的多Tor实例创建工具，Multitor的主要目的是以最快的速度完成大量Tor进程的初始化，并将大量实例应用到我们日常使用的程序中，例如Web浏览器和聊天工具等等。除此之外，在该工具的帮助下，我们还可以在进行渗透测试和对基础设施安全性进行审计时提高隐蔽性和匿名性

  7. 4、wireshark使用教程

    文章目录一、wireshark简介二、环境三、wireshark抓包三、wireshark过滤器使用一、wireshark简介Wireshark是使用最广泛的一款「开源抓包软件」，常用来检测网络问题、攻击溯源、或者分析底层通信机制。Wireshark抓包原理：单机情况：电脑直连互联网的单机环境。Wireshark直接抓

  8. HR对职业发展进行思考

    如果你还没有职业发展方面的思考，请不要怪自己，这很正常。没有谁是一开始就会如此清晰理性地对职业发展进行思考。笔者对职业发展有关话题进行系统性的思考，得益于两本书：第一本是哈佛大学泰勒·本-沙哈尔教授的《幸福的方法》，第二本书是美国学者比尔·博内特和戴夫·伊万斯写的《斯坦福大学人生设计课》，这两本书给了笔者很大的启发，并

  9. 【无标题】

    未来，该算法可以在低延迟视频编码领域得到广泛应用。例如，该算法可以用于实时视频传输、视频会议、视频监控等场景，以提高视频编码的效率和质量。此外，该算法还可以扩展到其他编码平台，如H.264/AVC、VP9等，以满足不同应用场景的需求。关于每个图和公式的位置，以下是简要说明：图1：位于第2页，显示了所提出的速率控制算法的