vue的路由与nodejs的环境搭建

最新推荐文章于 2024-07-01 10:45:04 发布

懒大王o

最新推荐文章于 2024-07-01 10:45:04 发布

阅读量240

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_74934282/article/details/133122745

版权

路由

是什么

Vue路由是Vue.js框架中用于管理不同页面之间切换的插件。它允许你在单页应用程序中定义多个路由，并根据URL的变化动态地加载不同的组件。通过使用Vue路由，你可以创建一个具有多个页面的应用程序，而无需刷新整个页面。

Vue路由的核心是Vue Router，它是Vue.js官方提供的路由管理器。Vue Router提供了一组API，用于定义路由规则、创建路由链接、导航控制等功能。通过对Vue Router的配置，你可以将不同的URL映射到不同的组件，实现页面之间的无缝切换和导航。

使用Vue路由，你可以实现诸如页面切换、嵌套路由、路由参数传递、路由守卫等功能，从而提升用户体验和应用程序的可扩展性。它是构建单页应用程序的重要工具之一。

案例

首先导入我们的js依赖

<!-- 1.导入路由所需要的js依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>

在定义两个组件，来进行跳转页面

// 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',
			}];

再通过路由获取路由对象router

	// 4.通过将路由关系获取路由的对象router
			var router = new VueRouter({routes});

将路由对象挂在vue实列中

	// 5.将路由对象挂在vue实列中
			new Vue({
				el:"#app",
				router,
				data(){
					return {
						name:'灰太狼',
						};
					}
				});

触发路由的点击按钮事件

	<!-- 6.触发路由事件的按钮 -->
		<router-link to="/home">首页</router-link>
		<router-link to="/about">关于</router-link>

最后定义路由内容（锚点）

<!-- 7.定义锚点、路由内容 -->
		<router-view></router-view>

整体代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/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>
	</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});
			
			// 5.将路由对象挂在vue实列中
			new Vue({
				el:"#app",
				router,
				data(){
					return {
						name:'灰太狼',
						};
					}
				});
		</script>
	</body>
</html>

效果

nodejs的环境搭建

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，用于构建高性能的网络应用程序。它提供了一个能够在服务器端运行JavaScript代码的平台，使开发人员能够使用JavaScript进行服务器端开发。

Node.js具有以下特点：

1. 异步非阻塞的I/O模型：Node.js采用事件驱动的方式处理请求，通过非阻塞的I/O模型，能够高效地处理大量并发请求，提高系统的吞吐量和响应性能。

2. 单线程：Node.js使用单线程模型，但通过事件循环机制和异步编程模式，可以处理大量并发请求，避免了传统多线程模型中线程切换的开销和资源占用。

3. 轻量和高效：Node.js的设计目标是轻量和高效，它使用了高性能的V8引擎，并采用了一些优化策略，如内存管理和垃圾回收机制，使得Node.js具有快速的执行速度和较低的资源消耗。

4. 跨平台：Node.js可以运行在多个操作系统上，如Windows、Mac和Linux等，使开发人员能够在不同的平台上进行开发和部署。通过使用Node.js，开发人员可以利用JavaScript语言的优势，快速构建高性能的网络应用程序，如Web服务器、实时通信应用、API服务器等。

npm，全称为Node Package Manager，是Node.js的包管理工具。它允许开发者在项目中管理和安装第三方模块和插件，并提供了一系列命令来管理项目依赖、构建和发布。

使用npm可以完成以下操作：

初始化项目：使用npm init命令可以初始化一个新的项目，生成package.json文件，用于管理项目的依赖和配置。

安装依赖：使用npm install命令可以安装项目所需的依赖。例如，npm install vue会安装最新版本的Vue.js库。

管理依赖：package.json文件中的dependencies字段记录了项目的依赖信息。使用npm install --save <package>可以将依赖添加到dependencies字段中。

更新依赖：使用npm update命令可以更新项目的依赖到最新版本。

删除依赖：使用npm uninstall命令可以删除项目的依赖。例如，npm uninstall vue会删除已安装的Vue.js库。

其他命令：npm还提供了其他一些常用的命令，如npm run <script>用于运行项目中定义的脚本，npm publish用于将包发布到npm仓库等。

除了以上常用的命令，npm还有许多其他功能，如管理全局安装的包、管理项目的版本等。你可以通过在命令行中运行npm help命令或查阅npm的官方文档来获取更详细的信息。

下载依赖

下载地址

下载 | Node.js

设置环境变量

输入这两个查看当前版本

建包

在压缩包的目录下建立以下两个包

在cmd中测试这三行代码，路径根据自己的改

再测试我们的这个模块

我们新建的两个包下面有这两个东西就行了

最后再执行最后一步

等下载完就欧克了，

今天的分享就到这啦，散会！！！

懒大王o

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue的路由与nodejs的环境搭建

通过对Vue Router的配置，你可以将不同的URL映射到不同的组件，实现页面之间的无缝切换和导航。Vue路由是Vue.js框架中用于管理不同页面之间切换的插件。3. 轻量和高效：Node.js的设计目标是轻量和高效，它使用了高性能的V8引擎，并采用了一些优化策略，如内存管理和垃圾回收机制，使得Node.js具有快速的执行速度和较低的资源消耗。1. 异步非阻塞的I/O模型：Node.js采用事件驱动的方式处理请求，通过非阻塞的I/O模型，能够高效地处理大量并发请求，提高系统的吞吐量和响应性能。
复制链接

扫一扫