Vue（vue路由、node.js安装）

最新推荐文章于 2025-03-12 09:32:55 发布

湘M

最新推荐文章于 2025-03-12 09:32:55 发布

阅读量80

点赞数

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

本文链接：https://blog.youkuaiyun.com/m0_57406300/article/details/131838819

版权

本文展示了如何使用Vue-router在Vue.js项目中管理路由，通过组件与请求路径的对应关系实现页面跳转。同时，文章提供了Node.js的安装步骤，包括下载、安装、环境配置以及测试安装成功的验证。此外，还提到了npm的配置和全局模块的安装。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue路由

需要两个组件展示相关业务功能
要形成组件与请求路径的对应关系，浏览器访问http://localhost:8080/Home,实则访问的是/Home组件
引入Vue-router支持
将路由关系与路由对象绑定
将路由对象与vue实例进行绑定
发起请求
显示请求对应的内容

代码示例

<!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>
		<!-- //3.引入Vue-router支持 -->
		<script src="https://cdn.bootcss.com/vue-router/3.0.6/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>
			//1.需要两个组件展示相关业务功能

			var Home = Vue.extend({
				template: '<div>首页展示</div>'
			});
			var About = Vue.extend({
				template: '<div>网站的内容展示</div>'
			});
			//2.要形成组件与请求路径的对应关系
			//浏览器访问http://localhost:8080/Home,实则访问的是/Home组件
			var routes = [{
				component: Home,
				path: '/home'
			},{
				component: About,
				path: '/about'
			}];
			
			//3.引入Vue-router支持
			//4.将路由关系与路由对象绑定
			var router=new VueRouter({routes:routes});
			//5.将路由对象与vue实例进行绑定
			new Vue({
				el: '#app',
				router,
				data() {
					return {
						number: "999",
						msg: null
					}
				}
			})
		</script>
	</body>
</html>

Node.js安装教程

一、进入官网地址下载安装包

https://nodejs.org/zh-cn/download/

选择对应你系统的Node.js版本，这里我选择的是Windows系统、64位

在这里插入图片描述

Tips：如果想下载指定版本，点击【以往的版本】，即可选择自己想要的版本下载

二、安装程序

（1）下载完成后，双击安装包，开始安装Node.js

在这里插入图片描述

(2)直接点【Next】按钮，此处可根据个人需求修改安装路径，修改完毕后继续点击【Next】按钮

在这里插入图片描述

（3）可根据自身需求进行，此处我选择默认安装，继续点击【Next】按钮

在这里插入图片描述

（4）不选中，直接点击【Next】按钮

在这里插入图片描述

（5）点击【Install】按钮进行安装

在这里插入图片描述

（6）安装完毕，点击【Finish】按钮

在这里插入图片描述

（7）测试安装是否成功，按下【win+R】键，输入cmd，打开cmd窗口

 输入：node -v     // 显示node.js版本

            npm -v      // 显示npm版本

在这里插入图片描述

–成功显示版本说明安装成功

三、环境配置

（1）找到安装的目录，在安装目录下新建两个文件夹【node_global】和【node_cache】

在这里插入图片描述

（2）创建完毕后，使用管理员身份打开cmd命令窗口（打开方法见下方Tips），输入

①npm config set prefix “你的路径\node_global” （复制你刚刚创建的“node_global”文件夹路径）

npm config set prefix "D:\develop\Node.js\node_global"

②npm config set cache “你的路径\node_cache” （复制你刚刚创建的“node_cache”文件夹路径）

npm config set cache "D:\develop\Node.js\node_cache"

在这里插入图片描述

Tips: 使用管理员身份运行cmd的方法：点击左下角【开始】菜单，在搜索区域输入“命令提示符”，然后点击【以管理员身份运行】

在这里插入图片描述

=或单击鼠标右键选择【以管理员身份运行】============

在这里插入图片描述

（3）配置环境变量

①【此电脑】-单击右键-【属性】-【高级系统设置】-【环境变量】

在这里插入图片描述

② 在【系统变量】中点击【新建】

在这里插入图片描述

变量名：NODE_PATH

变量值：

C:\Program Files\nodejs\node_global\node_modules

在这里插入图片描述

然后你就会发现【node_global】里多出了一个【node_modules】文件夹

在这里插入图片描述
Tips: 如果输入变量值之后没有自动创建【node_modules】文件夹，就在【node_global】下手动创建一个【node_modules】文件夹，再复制你创建的【node_modules】文件夹的路径地址到变量值

③编辑【用户变量】中的【Path】
在这里插入图片描述

在这里插入图片描述

四、测试

配置完成后，全局安装一个最常用的 express 模块进行测试

npm install express -g   // -g代表全局安装

出现以下界面即为配置成功

在这里插入图片描述
Tips：如果出现安装失败的话可能是你没有使用管理员身份运行cmd窗口，或者可以修改一下【node_global】和【node_cache]的权限

步骤：鼠标右击【node_global】的文件夹，点击【属性】，再点击【安全】，再点击【编辑】，将权限都勾上，随即点击【确定】即可，【node_cache】步骤同理。

在这里插入图片描述

五、安装淘宝镜像

①安装淘宝镜像

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

查看是否成功：

npm config get registry

在这里插入图片描述
②安装cnpm（按需安装）

说明： npm是node官方的包管理器。cnpm是个中国版的npm，是淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm。

npm install -g cnpm --registry=https://registry.npmmirror.com

在这里插入图片描述

查看是否安装成功

命令： cnpm -v

在这里插入图片描述

附加：如果有出现问题的小伙伴们可以检查一下自己的配置有没有出错

①打开cmd敲以下命令检查

在这里插入图片描述

②打开环境变量配置检查
在这里插入图片描述

在这里插入图片描述

③打开安装目录检查是否有以下文件夹

在这里插入图片描述

····检查【node_global】里是否有【node_modules】文件夹

在这里插入图片描述
····上面所安装的cnpm、express会出现在【node_global】下的【node_modules】文件夹里

在这里插入图片描述