Vue.js路由及Node.js的入门使用---超详细

.Doll

已于 2023-10-27 20:47:37 修改

阅读量502

点赞数 3

文章标签： vue.js 前端 javascript java

于 2023-09-21 13:06:41 首次发布

本文链接：https://blog.csdn.net/m0_73192864/article/details/133085009

版权

一，Vue路由

1.1 路由是什么

路由是用来管理应用程序中不同页面之间导航的概念。Vue Router是Vue.js官方提供的路由管理器，它允许我们通过定义路由规则和视图组件来配置路由

1.2 路由给我们带来的好处有哪些？

单页应用（Single Page Application）：

路由使得我们能够在单个页面中展示多个视图，而不必每次都刷新整个页面。这提升了用户体验，并减少了服务器的负载。

前端路由导航：

通过路由，我们可以定义应用程序中不同页面之间的跳转关系。这样，用户在浏览应用时可以通过导航链接或者程序matic的方式切换页面，实现页面的无刷新切换。

嵌套路由：

Vue Router支持嵌套路由，也就是在一个页面中嵌套另一个页面。这样，我们能够构建更复杂的应用程序，将页面拆分成多个组件，提高代码的可维护性和复用性。

参数传递和动态路由：

通过路由参数，我们可以在页面之间传递数据。Vue Router支持动态路由，可以根据不同参数匹配到对应的路由规则，从而展示不同的页面内容。

导航守卫：

Vue Router提供了导航守卫机制，允许我们在路由切换前后执行自定义逻辑，例如验证用户是否登录，判断用户权限等

二，路由实现单页应用(7步)

① 导入相关的vue依赖

<!--1 导入依赖-->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.2/vue-router.min.js"></script>

② 定义组件

	//2.定义两个组件
		var One = Vue.extend({
		template: '<div>我是大哥</div>'
			});
	    var Tow = Vue.extend({
		template: '<div>我是小弟</div>'
			});

③ 定义组件与路由的路径对应关系

	//3.定义组件与路由路径对应关系
			var routes=[{
				component: One,
				path: '/one'
			},{
				component: Tow,
				path: '/tow'
			}
			];

④ 通过路由关系获取router

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

⑤ 将路由挂载到Vue实例中

	//5 将路由挂载到Vue实例中-- >
			new Vue({
				el: "#Bing",
				data() {
					return {

					};
				},
				  router: router
			})

⑥ 触发路由事件的按钮

       <!--6 触发路由事件的按钮-->
       <router-link to='/one'>首页</router-link>
       <router-link to='/tow'>关于</router-link>

⑦ 定义锚点

	   <!--定义锚点-->
	   <router-view></router-view>

html全部代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--导入相对应的工具-->
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<!--1 导入依赖-->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	   <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.2/vue-router.min.js"></script>

	</head>
	<body>
		<!--定义vue管理的边界，有且只有一个根节点--->
		<div id="Bing">
			<!-- {{msg}} -->
		<!--6 触发路由事件的按钮-->
      <router-link to='/one'>首页</router-link>
       <router-link to='/tow'>关于</router-link>
	   
	   <!--定义锚点-->
	   <router-view></router-view>
		</div>
		<script>
			//2.定义两个组件
			var One = Vue.extend({
				template: '<div>我是大哥</div>'
			});
			var Tow = Vue.extend({
				template: '<div>我是小弟</div>'
			});
			//3.定义组件与路径对应关系
			var routes=[{
				component: One,
				path: '/one'
			},{
				component: Tow,
				path: '/tow'
			}
			];
			// 4.通过路由关系获取router
       var router=new VueRouter({routes});



			
			//5 将路由挂载到Vue实例中-- >
			new Vue({
				el: "#Bing",
				data() {
					return {

					};
				},
				  router: router
			})
		</script>


	</body>

效果图：

三，Node.js坏境搭建

3.1 何为node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，用于在服务器端运行JavaScript代码。它允许开发者使用JavaScript语言来构建高性能、可扩展的网络应用程序

Node.js具有丰富的内置模块和第三方模块生态系统，可以轻松地构建Web服务器、RESTful API、实时通信应用、代理服务器等。同时，由于Node.js使用JavaScript作为开发语言，使得前端和后端开发可以共享代码，提高了开发效率。

总而言之，Node.js是一个开源的、跨平台的JavaScript运行时环境，专注于构建高性能、可扩展的网络应用程序

3.2 何为npm

npm（Node Package Manager）是Node.js的包管理器，用于下载、安装和管理JavaScript模块。它是一个命令行工具，与Node.js一同安装在计算机上。

通过npm，开发者可以轻松地查找、安装和更新数以万计的开源JavaScript包。这些包可以包含各种功能和功能模块，例如Web框架、数据库驱动程序、工具库等。使用这些包，开发者可以快速构建复杂的应用程序，节省大量的开发时间和精力。

npm提供了一套强大的命令行工具，使得开发者可以方便地进行包的搜索、安装、更新和删除等操作。它还允许开发者管理项目依赖关系，通过一个名为"package.json"的文件来定义和记录项目所需的所有依赖项。

除了提供包管理功能，npm还有其他一些功能，例如发布自己编写的JavaScript模块、管理私有包、执行脚本等。npm已经成为JavaScript开发社区中最受欢迎和广泛使用的包管理工具之一，为开发者提供了丰富的生态系统和便捷的开发体验

四，Node.js坏境配置

1 下载和安装Node.js

①Node.js下载地址 ---》点击下载Node.js

②根据你的操作系统选择合适的Node.js版本进行下载，推荐选择最新的LTS（长期支持）版本

二解压

下载完毕之后解压在解压文件夹根目录添加两个文件夹

① node_global 全局安装路径

② node_modules npm缓存路径

三配置坏境变量

3.1 新增NODE_HOME，值为：node.js的安装根目录

3.2 修改PATH并在最后添加：%NODE_HOME%

%NODE_HOME%\node_global

注1：测试安装是否成功：打开cmd窗口，输出如下命令会输出NodeJs和npm的版本号

测试不出来去node.js根目录中启动cmd窗口使用以下命令再试试

node -v

npm -v

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

在cmd窗口执行配置npm全局模块路径和cache默认安装位置，下面第一第二路径后面的路径根据自己的路径进行修改
npm config set cache "D:\tools\node.js\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_cache"
 
npm config set prefix "D:\tools\nodejs\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_global"
3.4 修改npm镜像提高下载速度

淘宝源可直接copy运行即可

在终端中运行以下命令配置淘宝源
//设置淘宝源
 
          npm config set registry https://registry.npm.taobao.org/
 
//查看源，可以看到设置过的所有的源
 
          npm config get registry
3.5 查看npm全局路径设置情况

全部执行完之后，那么便可以在c盘的User下面看到一个文件，下图

查看npm全局路径设置情况
//此步骤随便全局安装一个模块就可以测评
 
          npm install webpack -g
 
//以上命令执行完毕后，会生成如下文件
 
          %node_home%\node_global\node_modules\webpack
 
  注意：下载过程中出现warn不用管，出现Error，删掉下载的破碎文件重新下载
在终端中运行以下命令来安装项目所需的依赖模块，例如Express框架：

npm install webpack -g

以上命令执行完毕后，会生成如下文件：

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

3.5 运行下载的Node.js项目

准备一个没有下载js的项目，然后进到该项目的根目录doc界面，输入 npm i 指令，下载依赖

下载完毕之后，输入npm run dev启动项目