Vue路由的使用及node.js下载安装和环境搭建

Vue路由的使用及node.js下载安装和环境搭建
目录

一、Vue路由

1.1 简介

( 1 ) 特点

( 2 ) 作用

1.2 实例

( 1 ) 引入

( 2 ) 组件

( 3 ) 关系

( 4 ) 路由

( 5 ) 事件

( 6 ) 锚点

二、nodeJS

2.1 下载

2.2 安装

2.3 环境搭建

新增

添加

测试

配置

运行

一、Vue路由

1.1 简介

Vue路由是Vue.js框架中用于管理页面导航的插件。它允许开发者通过定义路由规则，将不同的组件映射到不同的URL上，实现页面之间的切换和导航。

Vue路由的核心是路由器（Router），它负责监听URL的变化，并根据配置的路由规则来匹配相应的组件进行渲染。在Vue中，我们可以通过Vue Router插件来创建和配置路由器。

( 1 ) 特点
1. 声明式路由：Vue路由使用声明式的方式来配置路由规则，开发者只需要在配置文件中定义好路由规则，就可以实现页面之间的切换和导航。
2. 嵌套路由：Vue路由支持嵌套路由，可以将多个组件组合成一个整体，并通过父子关系来管理路由。
3. 动态路由：Vue路由支持动态路由，可以根据不同的参数来动态生成路由规则，实现更灵活的页面导航。
4. 路由懒加载：Vue路由支持路由懒加载，可以将页面组件按需加载，提高页面加载速度和用户体验。
5. 导航守卫：Vue路由提供了导航守卫的功能，可以在路由切换前后执行一些额外的逻辑，例如权限验证、页面切换动画等。
总的来说，Vue路由提供了一套完善的路由系统，可以帮助开发者更好地管理页面导航，提供良好的用户体验，并支持嵌套路由、动态路由、路由懒加载、导航守卫等功能，使得开发者可以更灵活地控制页面的展示和交互。

( 2 ) 作用
Vue路由有以下几个主要的作用：
- 1. 实现页面之间的切换和导航：Vue路由可以根据URL的变化，动态地加载和渲染不同的组件，实现页面之间的切换和导航。
- 2. 提供良好的用户体验：通过使用Vue路由，可以实现单页应用（SPA）的效果，页面切换时不需要重新加载整个页面，只需要更新组件部分，提高了用户的交互体验。
- 3. 管理页面状态：Vue路由可以根据URL的变化，动态地管理页面的状态。例如，在URL中添加参数，可以实现页面的筛选、排序等功能。
- 4. 支持嵌套路由：Vue路由支持嵌套路由，可以将多个组件组合成一个整体，并通过父子关系来管理路由。这样可以更好地组织和管理页面结构。
- 5. 支持动态路由和路由参数：Vue路由支持动态路由，可以根据不同的参数来动态生成路由规则，实现更灵活的页面导航。同时，也可以通过路由参数传递数据，实现组件之间的通信。
- 6. 提供导航守卫：Vue路由提供了导航守卫的功能，可以在路由切换前后执行一些额外的逻辑，例如权限验证、页面切换动画等。
总的来说，Vue路由可以帮助开发者更好地管理页面导航，提供良好的用户体验，并且支持动态路由和导航守卫等功能，使得开发者可以更灵活地控制页面的展示和交互。

1.2 实例

( 1 ) 引入

创建 HTML 文件，在该文件中进行引入js依赖
```
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js">script>
```
( 2 ) 组件

在 script 标签中定义组件
```
// 2.定义组件
const Home = Vue.extend({
	template: "言情小说网
本网站首页内容
"
});
const Abort = Vue.extend({
	template: "永远不掉落女人的陷阱
本站意义：做西格玛男人
"
});
```
( 3 ) 关系

在 script 标签中定义组件与路径的对应关系
```
//3.定义组件与路径的对应关系
	let routes = [{
		path: '/Home',
		component: Home
	    },{
		path: '/Abort',
		component: Abort
	}];
```
( 4 ) 路由

在 script 标签中定义路由
```
    // 4.定义路由
	const router = new VueRouter({routes});
		new Vue({
		el: '#app',
		router
	})
```
( 5 ) 事件

在Vue边界中定义触发路由事件的按钮
```
    
	<router-link to="/Home">首页router-link>
	<router-link to="/Abort">变强router-link>
```
( 6 ) 锚点

在Vue边界中定义锚点(路由内容)
```
        
		<router-view>router-view>
```
整合
```
html>
<html>
	<head>
		<meta charset="utf-8" />
		  
		  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
		  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
		  
		  <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js">script>
		<title>路由title>
	head>
	<body>
		<div id="app">
			
			<router-link to="/Home">首页router-link>
			<router-link to="/Abort">变强router-link>
			
			<router-view>router-view>
		div>
		<script type="text/javascript">
			// 2.定义组件
			const Home = Vue.extend({
				template: "言情小说网
本网站首页内容
"
			});
			const Abort = Vue.extend({
				template: "永远不掉落女人的陷阱
本站意义：做西格玛男人
"
			});
			//3.定义组件与路径的对应关系
			let routes = [{
				path: '/Home',
				component: Home
			},{
				path: '/Abort',
				component: Abort
			}];
			// 4.定义路由
			const router = new VueRouter({routes});
			new Vue({
				el: '#app',
				router
			})
		script>
	body>
html>
```
执行效果

二、nodeJS

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，用于构建高性能、可扩展的网络应用程序。它允许开发者使用JavaScript语言来编写服务器端的应用程序，并提供了丰富的库和模块，方便开发者进行网络通信、文件操作、数据库访问等操作。

Node.js采用事件驱动、非阻塞I/O模型，使得它能够处理大量并发连接，具有出色的性能表现。它还拥有一个强大的包管理器npm，可以方便地安装、管理和共享代码库。

2.1 下载

下载 nodeJS 资源包 : 下载 | Node.js

注1：Node有两个版本线: LTS是长期维护的稳定版本Current是新特性版本

2.2 安装

将文件解压到指定位置，并在解压后的目录下建立node_global和node_cache这两个目录

node_global：npm全局安装位置
node_cache：npm缓存路径

如图 :

2.3 环境搭建

新增

打开设置 -> 系统 -> 系统信息 -> 高级系统设置 -> 环境变量 -> 在系统变量中点击新建

新增一个环境变量

变量名 : NODE_HOME

变量值 :

下载后解压的指定目录如( D:\temp\node\node-v10.15.3-win-x64\node-v10.15.3-win-x64 )

操作如图 :

添加

在系统变量中找到名为 : PATH 变量名的变量选中后，添加以下两个环境变量

需要添加的变量值 :

%NODE_HOME%

%NODE_HOME%\node_global

注 : 根据自己的电脑看是否在变量值后面增加分号来间隔变量值。

如 :

%NODE_HOME%;

%NODE_HOME%\node_global;

操作如图 :

测试

测试安装是否成功及环境变量是否配置完成

Win+R，输入cmd，打开cmd窗口，输出如下命令配置环境变量的查看
echo %node_home%
echo %path%

操作如图 :

Win+R，输入cmd，打开cmd窗口，输出如下命令测试安装是否成功

node -v
npm -v

操作如图 :

配置

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

Win+R，输入cmd，打开cmd窗口，分开执行如下命令：

npm config set cache "D:\temp\node\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_cache"

npm config set prefix "D:\temp\node\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_global"

注：

以上的路径是下载node的本地路径，再进入到增加新建的两个文件目录里面

其中的双引号不能少

如果执行命令卡死，可以删除C:\Users\用户名\.npmrc 后重新执行。（用户名：为当前电脑的用户名）

( node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来 )

操作如图 :

设置淘宝源：

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

Win+R，输入cmd，打开cmd窗口，输入指令:

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

注 : 可以根据一下命令查看所有你设置过的源

npm config get registry

设置如图 :

运行

测试是否可以使用并运行启动Node.js项目

随便全局安装一个模块就可以测评

Win+R，输入cmd，打开cmd窗口，输入指令:

npm install webpack -g

命令执行完毕后，会在node_global路径下面生成（node_modules\webpack）文件

如果在自己的本地路径中，进行项目测试。

随便在自己的电脑上找一个项目，看是否可以进行添加Node.js依赖

在项目的跟目录中打开cmd窗口

执行如图 :

依赖添加后，启动项目。

继续执行以下命令启动项目:

npm run dev

启动执行后，项目开启说明完成;

以上是我启动项目的界面:
相关阅读:
C# SqlSugar ORM管理数据
 精准DNA甲基化/羟甲基化测序（oxBS-seq）｜易基因技术推介
 关于C++编程中引入头文件的顺序
 SpringCloud集成Sleuth和Zipkin
基于 MATLAB 的电力系统动态分析研究【IEEE9、IEEE68系节点】
为什么用php的人越来越少了？
java-第一天（if循环）
jQuery 选择器
 for in和for of
最近身边一个技术负责人裸辞了...
原文地址：https://blog.csdn.net/SAME_LOVE/article/details/133122405

一、Vue路由

1.1 简介

( 1 ) 特点

( 2 ) 作用

1.2 实例

( 1 ) 引入

( 2 ) 组件

( 3 ) 关系

( 4 ) 路由

( 5 ) 事件

( 6 ) 锚点

二、nodeJS

2.1 下载

2.2 安装

2.3 环境搭建

新增

添加

测试

配置

运行