Vue路由及Node.js环境搭建

Kissship

已于 2023-10-16 16:04:52 修改

阅读量743

点赞数 2

文章标签： vue.js node.js 前端

于 2023-09-20 20:06:56 首次发布

本文链接：https://blog.csdn.net/weixin_74263417/article/details/133086693

版权

一、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">
		<title>路由</title>
		<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>
	</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.通过路由关系获取路由对象router
			var router = new VueRouter({routes});
			new Vue({
				el: '#app',
				router,//5.将路由对象挂载到vue实例中
				data() {
					return {
						name: '诗琦'
					};
				}
			});
		</script>
	</body>
</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服务等各种类型的应用程序。

2.3 Node.js安装与配置

2.3.1 下载安装包

前往官网进行下载：Node.js (nodejs.org)https://nodejs.org/zh-cn

下载完成后，将文件放在D盘的非中文目录下。

博主这里是先有了安装压缩包，所以博主直接把压缩包放在D盘固定目录下解压了，如下：

2.3.2 手动新建文件夹

在这之后我们需要手动创建两个文件夹（文件夹名字不能改！），如下：

注：

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

2.3.3 注意事项

当搭建Node.js环境时，以下几点是需要注意的：

Node.js版本选择：选择合适的Node.js版本。Node.js有长期支持版（LTS）和当前版两种版本，长期支持版提供稳定性和可靠性，而当前版则包含最新的功能和改进。根据项目的需求选择合适的版本。

操作系统兼容性：Node.js可以在多个操作系统上运行，但是在选择操作系统时要确保Node.js版本对该操作系统的支持。查阅官方文档了解支持的操作系统版本。

安装方式：Node.js提供了不同的安装方式，例如，使用官方安装程序、使用包管理工具（如npm、nvm）或编译源码。选择适合你的环境和需求的安装方式。

环境变量配置：在安装Node.js时，需要配置环境变量，以便在命令行中能够通过简单的命令来执行Node.js代码。确保将Node.js可执行文件路径添加到系统的PATH环境变量中。

检查安装：安装完成后，通过在命令行中输入node -v命令，可以验证Node.js是否成功安装，并显示安装的版本号。类似地，输入npm -v命令可以验证npm（Node.js包管理器）是否安装成功。

安全性注意事项：在搭建Node.js环境时要考虑安全性。确保从官方源或可信源下载安装程序或使用包管理工具，以避免恶意软件或不受信任的代码。

更新和维护：Node.js持续发展和更新，需要定期检查并更新Node.js和相关工具的版本，以获取新的功能和修复安全漏洞。

2.3.4 配置环境变量

然后接下来就是配置环境变量，详细步骤如下：

2.3.5 检验是否安装配置成功

添加完之后，我们就可以检验是否安装成功了，如下：

Win+R打开命令提示符，输入cmd然后回车，输入指令后即可检验。

到这里我们的Node.js就是安装成功了。

2.3.6 设置淘宝源

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

2.3.7 查看全局路径设置

查看全局路径设置情况，此步骤随便全局安装一个模块就可以测评，如下：

2.4 运行和下载Node.js项目

在D盘下新建temp/pro，将压缩包进行解压，之后就可以进行依赖安装了，如下：

首先进入vueproject指定目录doc界面，然后输入指令：

npm i

注：需联网

结果如下：

依赖安装成功后，输入指定代码启动项目，命令如下：

npm run dev

结果如下：

三、收获

学习Node.js项目的运行和下载是一个非常有价值的经验，它可以帮助你开始在Node.js环境中构建和运行自己的应用程序。以下是你可能会从这个过程中获得的一些收获：

Node.js的安装和配置：学习如何安装和配置Node.js环境是第一步。你可能了解到如何下载Node.js的安装程序、如何在不同操作系统上进行安装，并配置运行环境。

项目的依赖管理：在Node.js中，你将使用npm（Node Package Manager）来管理项目的依赖项。学习如何使用npm来安装、升级和删除依赖项是非常重要的，这将帮助你构建功能丰富的应用程序。

创建和运行项目：了解如何创建一个Node.js项目，并使用Node.js的命令行工具来运行它。你可能会学习到如何使用npm init来初始化一个新项目，以及如何使用node命令来运行你的JavaScript文件。

包管理器和项目打包：当你的项目变得更加复杂时，你可能需要使用包管理器（如npm）来管理你的代码库。此外，你还可以学习如何使用工具（如Webpack、Parcel等）将你的项目打包成可分发的形式，以便在不同的环境中运行。

调试和错误处理：学习如何调试Node.js应用程序是一个关键的技能。你可能会了解如何使用Node.js内置的调试工具来跟踪错误和问题，并学习一些调试技术和最佳实践。

理解服务器端开发：Node.js常用于构建服务器端应用程序。通过学习如何下载和运行Node.js项目，你将有机会理解服务器端开发的基本概念，如处理HTTP请求、路由、数据库访问等。

社区资源和文档阅读：在学习过程中，你可能会遇到各种问题和挑战。这时，查阅Node.js的官方文档、Stack Overflow等开发者社区资源将非常有帮助。通过解决问题和了解其他人的经验，你可以扩展自己的知识和技能。

总而言之，学习Node.js项目的运行和下载过程将使你熟悉Node.js生态系统，并帮助你成为一个更有效的Node.js开发者。这些知识和经验将为你日后构建复杂的Web应用、API等项目奠定坚实的基础。

最后Vue路由及Node.js环境搭建就到这里，祝大家在敲代码的路上一路通畅!

感谢大家的观看 !

Kissship

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
2
评论
Vue路由及Node.js环境搭建

Vue路由是指使用Vue Router插件来管理前端应用程序的导航和页面路由的过程。它允许你在单页面应用程序（SPA）中定义不同的路由路径，并将每个路径映射到相应的组件。通过使用Vue路由，你可以根据URL的变化加载不同的组件或视图，并且可以通过导航链接（例如点击导航菜单或按钮）在不同的页面之间进行切换。Vue路由的核心目标是提供良好的用户体验，使用户能够在应用程序中自由导航和浏览内容，而不需要每次都重新加载整个页面。
复制链接

扫一扫