Vue系列（四）之 Vue路由介绍和Node.js的环境搭建

2023-09-21 10:59:16

目录

一. Vue路由

1.1 Vue路由是什么

1.2 SPA是什么

1.3 Vue路由的使用步骤

二. Node.js环境搭建

2.1 Node.js是什么

2.2 npm是什么

2.3 Node.js环境搭建

1. 下载Node.js

2. 解压

3. 配置环境变量

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

5. 修改npm镜像提高下载速度

6. 验证安装结果

 三. 运行Node.js项目

3.1 找到项目的根目录，输入cmd回车

3.2 进入cmd窗口后输入npm i然后等待加载完成

3.3 加载完成后，会生成一个node_modules文件

3.4 接着在cmd窗口输入npm run dev启动项目

一. Vue路由

1.1 Vue路由是什么

Vue路由是Vue.js框架中的一个插件，用于实现单页面应用（SPA）的路由功能。它允许你在Vue应用中定义不同的路由，并根据URL的变化加载不同的组件，从而实现页面之间的切换和导航。Vue路由使用了浏览器的History API或Hash模式来管理URL，并提供了一些API和组件来简化路由的配置和使用。通过Vue路由，你可以创建嵌套的路由结构、定义动态路由参数、实现路由的懒加载等功能，以便更好地组织和管理你的Vue应用的页面。

1.2 SPA是什么

SPA 是单页应用（Single Page Application）的缩写。它是一种 Web 应用程序的架构模式，其中整个应用程序在加载时只加载一次，之后的页面切换和内容更新通过动态加载数据和更新页面的方式实现，而不是通过传统的多个页面的方式。

在传统的多页应用中，每次用户在应用程序中导航到不同的页面时，都会向服务器发送请求并加载新的页面。而在 SPA 中，应用程序在初始加载时会下载所有必要的代码、资源和数据，并在用户与应用程序交互时，通过 JavaScript 动态地更新页面内容，而不需要重新加载整个页面。

SPA 的优点包括：

  1. 更快的用户体验：由于只需要加载一次应用程序，之后的页面切换和内容更新都是在客户端进行，因此用户可以更快地浏览和交互。

  2. 减少服务器负载：由于只有初始加载时需要从服务器获取应用程序的代码和资源，之后的页面切换和内容更新都是在客户端进行，减少了对服务器的请求和负载。

  3. 更接近原生应用的体验：SPA 可以使用前端框架（如 Vue、React、Angular 等）来构建，使得应用程序更接近原生应用的交互和用户体验。

  4. 更容易实现前后端分离：SPA 的架构模式使得前端和后端可以更容易地分离开发，前端负责页面的展示和交互，后端负责提供 API 接口和数据。

然而，SPA 也有一些缺点，例如对搜索引擎优化（SEO）的挑战、初始加载时间较长等。因此，在选择使用 SPA 架构时，需要权衡其优点和缺点，并根据具体的应用场景进行决策。

1.3 Vue路由的使用步骤

  1. 导入路由所需的js依赖
  2. 定义组件
  3. 定义组件与路径的对应关系
  4. 通过路由关系获取路由对象
  5. 将路由对象挂载到vue实例中
  6. 定义触发路由事件的按钮，使用 <router-link> 元素生成链接
  7. 定义锚点（路由内容），使用 <router-view> 元素显示对应的组件内容
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<!-- 1.导入路由所需的js依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
		<title>路由</title>
	</head>
	<body>
		<div id="app">
			<!-- 6.触发路由事件的按钮 -->
			<router-link to="/home">首页</router-link>
			<router-link to="/about">关于本站</router-link>
			
			<!-- 7.定义锚点（路由内容） -->
			<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.通过路由关系获取路由对象
			var router = new VueRouter({routes});
			
			// 5.将路由对象挂载到vue实例中
			new Vue({
				el:'#app',
				router,
				data(){
					return{
						
					}
				}
			})
		</script>
	</body>
</html>

二. Node.js环境搭建

2.1 Node.js是什么

1. Node.js是一个用于构建可扩展的网络应用程序的JavaScript运行环境。它是基于Chrome V8引擎构建的，可以在服务器端运行JavaScript代码。Node.js使用了一个事件驱动、非阻塞式I/O 的模型。

2. Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

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

在Vue.js中，Node.js通常用于以下几个方面：

  1. 构建和运行开发服务器：在开发Vue.js应用时，可以使用Node.js来搭建一个本地开发服务器，以便在开发过程中实时预览和调试应用。

  2. 执行构建和打包任务：Vue.js应用通常需要进行构建和打包，以生成最终的生产版本。Node.js提供了一些工具和模块，如Webpack和Parcel，可以帮助我们自动化执行这些任务。

  3. 编写服务器端代码：有时候，Vue.js应用需要与服务器进行交互，例如通过API获取数据或进行身份验证。在这种情况下，可以使用Node.js编写服务器端代码，处理请求并与数据库或其他服务进行通信。

总之，Node.js在Vue.js中扮演着重要的角色，它为开发者提供了强大的工具和环境，使得构建和部署Vue.js应用变得更加便捷和高效。

2.2 npm是什么

npm（Node Package Manager）是Node.js的包管理器，用于安装、管理和发布Node.js模块。它是Node.js生态系统中的重要组成部分，为开发者提供了一个方便的方式来共享和使用JavaScript代码。

通过npm，你可以轻松地安装和管理各种Node.js模块。这些模块可以是其他开发者编写的，也可以是你自己编写的。npm提供了一个庞大的模块仓库，称为npm注册表（npm registry），其中包含了数以万计的开源模块。你可以通过简单的命令来安装这些模块，并在你的项目中使用它们。

除了安装模块，npm还提供了其他功能，例如：

  1. 版本管理：npm允许你指定模块的特定版本或范围，以便控制模块的更新和兼容性。

  2. 依赖管理：当你安装一个模块时，npm会自动解析和安装该模块所依赖的其他模块，以确保项目的依赖关系正确。

  3. 脚本执行：npm允许你在项目中定义和执行自定义脚本，以简化开发和构建过程。

  4. 模块发布：如果你编写了一个可重用的模块，你可以使用npm将其发布到npm注册表，供其他开发者使用。

总之，npm是一个强大而灵活的工具，使得Node.js开发者能够更加高效地管理和使用模块，加速开发过程，并促进了Node.js生态系统的发展。

2.3 Node.js环境搭建

要搭建Node.js环境，你可以按照以下步骤进行操作：

1. 下载Node.js

首先，你需要从Node.js官方网站（https://nodejs.org/zh-cn/download/）下载适合你操作系统的.Node.js安装包。这里我使用的是node-v10.15.3-win-x64.zip 

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

2. 解压

将文件解压到指定位置(例如：D:\software)，并在解压后的目录下建立node_global和node_cache这两个目录

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

3. 配置环境变量

 新增NODE_HOME，值为：你的文件解压位置

 修改PATH并在最后添加：;%NODE_HOME%;%NODE_HOME%\node_global; 

验证安装是否成功：打开cmd窗口，输出如下命令会输出NodeJs和npm的版本号
           node -v
           npm -v

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

打开cmd，分开执行如下命令：
      npm config set cache "D:\software\Nodejs\node-v10.15.3-win-x64\node_cache"
      npm config set prefix "D:\software\Nodejs\node-v10.15.3-win-x64\node_global"

这两个命令执行完成后，会在c盘的用户文件夹下私用的文件夹中生成一个.npmrc文件。


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

5. 修改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

6. 验证安装结果

6.1 版本验证
          node -v
          npm -v
6.2 查看淘宝镜像设置情况
          npm get registry

6.3 查看npm全局路径设置情况
 此步骤随便全局安装一个模块就可以测评
          npm install webpack -g

以上命令执行完毕后，会生成如下文件
          %node_home%\node_global\node_modules\webpack


        

 注意：下载过程中出现warn不用管，出现Error，删掉下载的破碎文件重新下载

 三. 运行Node.js项目

3.1 找到项目的根目录，输入cmd回车

3.2 进入cmd窗口后输入npm i然后等待加载完成

3.3 加载完成后，会生成一个node_modules文件

3.4 接着在cmd窗口输入npm run dev启动项目

更多推荐

Opencv源码解析（2）算法

目录一，直方图均衡1，直方图统计2，灰度变换3，直方图均衡二，可分离滤波器1，可分离滤波器的工厂2，ocvSepFilter、sepFilter2D3，Sobel三，相位相关法phaseCorrelate1，phaseCorrelate2，汉宁窗四，匹配器1，纯虚类DescriptorMatcher2，子类FlannB

分布式锁【数据库乐观锁实现的分布式锁、Zookeeper分布式锁原理、Redis实现的分布式锁】(三)-全面详解（学习总结---从入门到深化）

目录分布式锁解决方案_数据库乐观锁实现的分布式锁分布式锁解决方案_Redis实现的分布式锁原理分布式锁解决方案_Redis实现的分布式锁分布式锁解决方案_Redis分布式锁误删除问题分布式锁解决方案_Redis分布式锁不可重入问题分布式锁解决方案_基于Redisson实现的分布式锁实现分布式锁解决方案_Zookeepe

多输入多输出 | Matlab实现GWO-BP灰狼算法优化BP神经网络多输入多输出预测

多输入多输出|Matlab实现GWO-BP灰狼算法优化BP神经网络多输入多输出预测目录多输入多输出|Matlab实现GWO-BP灰狼算法优化BP神经网络多输入多输出预测预测效果基本介绍程序设计往期精彩参考资料预测效果基本介绍多输入多输出|Matlab实现GWO-BP灰狼算法优化BP神经网络多输入多输出预测1.data为

【MySQL函数篇】—— 字符串函数（超详细）

个人主页：兜里有颗棉花糖欢迎点赞👍收藏✨留言✉加关注💓本文由兜里有颗棉花糖原创收录于专栏【MySQL学习专栏】🎈本专栏旨在分享学习MySQL的一点学习心得，欢迎大家在评论区讨论💌前言本文我们来学习一下MySQL中的字符串函数。以下是本文中要讲解的字符串函数：函数功能CONCAT(S1,S2,S2,…)拼接字符串

【数据结构】树和二叉树的概念及结构

大家好！今天我们来学习数据结构中树和二叉树的概念及结构。目录1.树概念及结构1.1树的概念1.2树的相关概念1.3树的表示​1.4树在实际中的运用2.二叉树的概念及结构2.1概念​2.2现实中的二叉树2.3特殊的二叉树2.3.1满二叉树2.3.2完全二叉树2.4二叉树的性质2.5二叉树的存储结构2.5.1顺序存储2.5

【MySQL系列】MySQL数据库索引详解

目录一、为什么要用索引？二、什么是索引？三、MySQL索引使用场景四、索引的原理五、MySQL的存储引擎六、索引的数据结构七、索引如何使用八、实际使用示例九、优缺点、使用建议和注意事项十、为什么Mysql不选择Hash索引？十一、总结一、为什么要用索引？索引，可能让好很多人望而生畏，毕竟每次面试时候MySQL的索引一定

某网站小说CSS反爬实战分析

由于是刚开始编写js逆向类型的文章，难免会有不详细之处，敬请谅解本次的目标是hongshu网的小说接口，我们进入官网随意找到一篇小说后，打开网络请求，分析接口如图，可以看到有个bookajax.do的接口让人值得怀疑，而且有三个接口，初步判断可能是接口之间进行互相调用，我们先打开接口查看一下数据在第二个接口中看到如下数

Docker Compose部署Mysql8

DockerCompose部署Mysql8介绍MySQL是一个广泛使用的开源关系型数据库管理系统，它被用于许多Web应用程序的数据存储和管理。MySQL提供了高性能、可靠性和灵活性，让开发者能够轻松处理各种规模的数据处理需求。下面是一些关于MySQL的重要特点和功能：关系型数据库:MySQL是一个基于关系模型的数据库管

Flutter快速入门学习（二）

目录Dart介绍一些Dart的重要概念Dart语法学习变量内建类型NumberStringBooleanListSetMapSymbol函数参数类型（可选参数，必选参数）函数作为另一个函数的参数匿名函数运算符关系运算符类型判定运算符赋值运算符逻辑运算符按位和移位运算符条件表达式级联运算符(..)回调函数Dart介绍Da

#循循渐进学51单片机#变量进阶与点阵LED#not.6

1、掌握变量的作用域及存储类别。局部变量函数内部声明的变量，只在函数内部有效，在本函数以外是不能使用的，叫局部变量。全局变量在函数外部声明的变量就是全局变量，一个源程序可以包含一个或多个函数，全局变量的作用范围是从它开始声明的位置一直到程序结束。全局变量的副作用1)降低函数的独立性，对任何一个函数的修改都可能影响到其他

EMANE中olsrd的调试

1调试目的本着学习的态度，对emanetutorial中的示例程序进行重现，以加深对EMANE的理解和掌握。在示例程序0(见https://github.com/adjacentlink/emane-tutorial/wiki/Demonstration-0)中介绍了使用olsrlinkview.py脚本来通过可视化界

热文推荐
  1. MFC扩展库BCGControlBar Pro v33.6亮点 - 流程图、Ribbon Bar功能升级

    BCGControlBar库拥有500多个经过全面设计、测试和充分记录的MFC扩展类。我们的组件可以轻松地集成到您的应用程序中，并为您节省数百个开发和调试时间。BCGControlBar专业版v33.6已正式发布了，此版本包含了对图表组件的改进、带隐藏标签的单类功能区栏，标签控制通知徽章和其他新功能、改进等。最新版点击

  2. 腾讯云16核服务器配置大全_16核CPU型号性能测评

    腾讯云16核CPU服务器有哪些配置可以选择？可以选择标准型S6、标准型SA3、计算型C6或标准型S5等，目前标准型S5云服务器有优惠活动，性价比高，计算型C6云服务器16核性能更高，轻量16核32G28M带宽优惠价3468元15个月，腾讯云百科分享腾讯云16核CPU服务器可以选择的云服务器CVM规格列表：目录腾讯云16

  3. 前端笔试2

    1.下面哪一个是检验对象是否有一个以自身定义的属性?foo.hasOwnProperty("bar")barinfoofoo["bar"]!==undefinedfoo.bar!=null解析：`barinfoo`检查`foo`对象是否包含名为`bar`的属性，但是这个属性可以是从原型链继承来的，因此不是检验对象是否有

  4. 保障半导体生产安全：半导体厂务漏液监测的重要性

    半导体产业作为高科技领域的瑰宝，在现代社会中扮演着举足轻重的角色。无论是手机、电脑还是其他电子设备，半导体元件都承载着信息传输和处理的核心任务。为了确保半导体生产的可靠性和安全性，半导体厂务必须关注一个看似微小但却至关重要的方面：液体管理与漏液监测。半导体制造的精密性与挑战半导体制造是一门高度精密的工艺，涉及到复杂的设

  5. ASfP: 增强AOSP平台开发的利器——Android Studio for Platform

    ASfP:增强AOSP平台开发的利器——AndroidStudioforPlatformAndroidStudioforPlatform(ASfP)是一个为使用Soong构建系统构建的Android开源项目（AOSP）平台开发者而设计的AndroidStudioIDE版本。与标准AndroidStudio不同，ASfP

  6. [篇五章五]-如何禁用 Windows Defender-我的创作纪念日

    ##################################################目录禁用掉烦人的WindowsDefender在本地组策略编辑器中禁用WindowsDefende关闭MicrosoftDefender防病毒禁止Defender开机自动运行重新激活WindowsDefender####

  7. HarmonyOS创作激励计划启动：助力技术创作突破边界

    即日起推出HarmonyOS创作激励计划，成功投稿并入选的文章将在HarmonyOS开发者公众号上线，9大技术社区同步宣发，不仅有丰厚稿酬，还有机会赢取创作奖品！活动时间即日起-2024年12月31日，每季度按照活动规则评审奖项活动面向用户对HarmonyOS怀抱热情的开发者奖项设置注：每季度评审，稿费和一二三等奖可叠

  8. 模拟经营类游戏是怎么开发的？

    模拟经营类游戏开发是一个充满挑战但也充满乐趣的领域。下面是一些步骤和关键考虑因素，可以帮助您开始开发自己的模拟经营游戏：明确游戏概念：确定游戏开发的主题和类型，例如城市建设、农场经营、餐厅经营等。制定一个引人入胜的故事情节或目标，使玩家能够投入其中。市场研究：分析竞争市场中已有的模拟经营游戏，了解他们的特点和成功因素。

  9. 【Tensorflow 2.12 电影推荐项目搭建】

    Tensorflow2.12电影推荐项目搭建学习笔记工具、环境创建项目项目配置安装相关python包召回模型实现排序模型实现实现电影推荐导入模块设置要推荐的用户召回推荐排序推荐推荐结果结尾学习笔记Tensorflow2.12电影推荐项目搭建记录~Tensorflow是谷歌开源的机器学习框架，可以帮助我们轻松地构建和部署