Vue路由与nodes的环境配置

刺骨的言语ヽ痛彻心扉 2023-10-16 12:02 6阅读 0赞

## 一，Vue路由 ##

### 什么是Vue路由？ ###

Vue路由是Vue.js的一部分，是一个官方的Vue.js插件，用于管理单页面应用程序的路由。它允许您在应用程序中使用URL路径和参数来管理不同的页面视图，而无需刷新页面。使用Vue路由，您可以轻松地设置和管理客户端路由，包括嵌套和动态路由。它还提供了一些高级功能，例如路由守卫，用于在页面之间导航或访问受限制的页面时执行额外的逻辑。

### 核心 ###

Vue路由的核心是VueRouter实例，它可以通过Vue.js应用程序的组件和路由定义来创建。路由定义包含一组路由规则，每个规则指定URL路径和相应的Vue.js组件。当用户浏览到指定的路径时，Vue路由会根据路由规则找到对应的组件并加载它，从而在应用程序中切换到新的视图。

### 代码演示： ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
    		<title>Vue路由</title>
    	</head>
    	<body>
    		<div id="app">
    		<router-link to="home">首页</router-link>
    			<router-link to="about">关于</router-link>
    			<router-view></router-view>
    		</div>
    <Script type="text/javascript">
    	//定义两个组将
    	var Home=Vue.extend({
    		template:'<div>网站首页。。。。</div>'
    		});
    		var About=Vue.extend({
    			template:'<div>网站发展。。。。。。</div>'
    			});
    			//2.定义组件与路基对应关系
    	var routes=[{
    		component:Home,
    		path:'/home'
    		},
    		{
    			component:About,
    			path:'/about'
    			
    		}];
    		//3.通过路由关系获取路由对像
    		var router = new VueRouter({routes});
    		//4.将路由对象挂载到路由对象
    		
    	new Vue({
    		el:'#app',
    		router,
    		data(){
    			return{
    				msg:'xzs'
    			}
    			}
    		})
    	
    	
    	
    	
    </Script>
    	</body>
    </html>

效果：

点击首页

![613bd1b37436488287ad1994d192cf94.png][]

点击关于

![9f0772eb19c046a2a2300410053b8fc9.png][]

## 二.node.js的环境配置 ##

### nodejs是什么？ ###

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它使用事件驱动、非阻塞I/O模型，使其轻量又高效地处理并发请求。Node.js可用于服务器端编程、命令行工具和客户端编程。

### nodejs的特点 ###

1.  非阻塞I/O：适合高并发请求的处理。
2.  处理数据：Node.js非常适合处理数据密集型的实时应用程序。
3.  轻量级：它非常快，因为它使用JavaScript运行在V8引擎上。
4.  模块化：其模块化机制可以让开发者更加方便地扩展应用，同时代码的可重用性也得到提高。

### 下载 ###

由于Node.js平台是在后端运行JavaScript代码，所以，必须首先在本机安装Node环境。

[下载 | Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.![icon-default.png?t=N7T8][icon-default.png_t_N7T8]https://nodejs.org/zh-cn/download/][_ Node.jsNode.js_ is a JavaScript runtime built on Chrome_s V8 JavaScript engine._icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_nodejs.org_zh-cn_download]

Node.js支持多个操作系统平台，如Windows、Linux、macOS等。在官网中下载对应的版本并按照提示进行安装即可。

例如:我的是windows系统，所以我选择wendows，64位；

![e5146335c8d242a99001726015807882.png][]

### 配置 ###

将下载的文件解压到指定路径（**路径不能有中文**），并在解压后的目录下建立

node\_global(npm全局安装位置)

和 node\_cache(npm缓存路径)这两个目录

![126e6b627b12438d9df3b4858ed1d845.png][]

#### 环境变量配置： ####

NODE\_HOME: 配置的是nodeJS解压的根路径 **如：D:\\tools\\node-v10.15.3-win-x64**

![68e686d87c604048a25fd0413d162655.png][]

##### **添加path：** #####

PATH：%NODE\_HOME%  
PATH：%NODE\_HOME%\\node\_global

![7b0f421b037b41039aedd7cf9f517ae4.png][]

打开cmd测试

输入 node -v，npm -v

![991257c022a147a7ab8632d3686744a9.png][]

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

打开cmd，分开执行如下命令：把路径替换成自己的路径

##### ![6c69a6e7948e4cb9bcbfbd818cc6f078.png][]![bbfef1d58cb3465bb77f7a8c7ff0ff12.png][] 安装淘宝镜像 #####

cmd中输入：npm config set registry https://registry.npm.taobao.org/

成功后，在c盘的User下面看到一个.npmrc文件

![708f7d4515fb41ac8c13d80129b072ec.png][]

##### 查看npm全局路径设置情况 #####

在cmd中输入npm install webpack -g

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

![138b0270939b41ac8e3eaa88e44066ce.png][]

##### 运行下载的Node.js项目 #####

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

![71c32e2eaf6b4d248bf37f387098f333.png][]

最后输入**npm run dev** 指令开始运行项目

![0497dcf83f0d40ea9a4711a22e0e8473.png][]

![2eb44fbdc4ad41fa89aed7727608cd04.png][]

[613bd1b37436488287ad1994d192cf94.png]: https://img-blog.csdnimg.cn/613bd1b37436488287ad1994d192cf94.png
[9f0772eb19c046a2a2300410053b8fc9.png]: https://img-blog.csdnimg.cn/9f0772eb19c046a2a2300410053b8fc9.png
[icon-default.png_t_N7T8]: https://csdnimg.cn/release/blog_editor_html/release2.3.6/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N7T8
[_ Node.jsNode.js_ is a JavaScript runtime built on Chrome_s V8 JavaScript engine._icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_nodejs.org_zh-cn_download]: https://nodejs.org/zh-cn/download/
[e5146335c8d242a99001726015807882.png]: https://img-blog.csdnimg.cn/e5146335c8d242a99001726015807882.png
[126e6b627b12438d9df3b4858ed1d845.png]: https://img-blog.csdnimg.cn/126e6b627b12438d9df3b4858ed1d845.png
[68e686d87c604048a25fd0413d162655.png]: https://img-blog.csdnimg.cn/68e686d87c604048a25fd0413d162655.png
[7b0f421b037b41039aedd7cf9f517ae4.png]: https://img-blog.csdnimg.cn/7b0f421b037b41039aedd7cf9f517ae4.png
[991257c022a147a7ab8632d3686744a9.png]: https://img-blog.csdnimg.cn/991257c022a147a7ab8632d3686744a9.png
[6c69a6e7948e4cb9bcbfbd818cc6f078.png]: https://img-blog.csdnimg.cn/6c69a6e7948e4cb9bcbfbd818cc6f078.png
[bbfef1d58cb3465bb77f7a8c7ff0ff12.png]: https://img-blog.csdnimg.cn/bbfef1d58cb3465bb77f7a8c7ff0ff12.png
[708f7d4515fb41ac8c13d80129b072ec.png]: https://img-blog.csdnimg.cn/708f7d4515fb41ac8c13d80129b072ec.png
[138b0270939b41ac8e3eaa88e44066ce.png]: https://img-blog.csdnimg.cn/138b0270939b41ac8e3eaa88e44066ce.png
[71c32e2eaf6b4d248bf37f387098f333.png]: https://img-blog.csdnimg.cn/71c32e2eaf6b4d248bf37f387098f333.png
[0497dcf83f0d40ea9a4711a22e0e8473.png]: https://img-blog.csdnimg.cn/0497dcf83f0d40ea9a4711a22e0e8473.png
[2eb44fbdc4ad41fa89aed7727608cd04.png]: https://img-blog.csdnimg.cn/2eb44fbdc4ad41fa89aed7727608cd04.png