vue的路由与nodejs的环境搭建

目录

一.路由

        1.1 案例--实现页面的切换

二.nodejs的环境搭建 

  2.1 下载依赖

2.2 编辑环境变量

2.3 建包

2.4 测试

---

一.路由

        Vue的路由是指Vue Router，它是Vue.js官方提供的用于实现前端路由的插件。Vue Router允许你在单页面应用中定义不同的路由，并根据不同的路由显示相应的组件内容，实现页面的切换和跳转

        1.1 案例--实现页面的切换

                 第一步：引入路由的js依赖 

                第二步：定义两个组件,通过点击不同的组件按钮来切换页面

var One = Vue.extend({
				template: "
我是第一个页面，我是翻斗乐园的小美
"
			});
			var Two = Vue.extend({
				template: "
我是第二个页面，我是天天盼望着下班的章鱼哥
"
			});

                第三步：定义组件与路径对于的关系

var routes = [{
				component: One,
				path: '/one'
			},{
				component: Two,
				path: '/two'
			}]

                第四步：.通过路由关系获取路由对象router

var router=new VueRouter({routes});

                第五步：.将路由对象放到vue的实例中 

var router=new VueRouter({routes});
			new Vue({
				el: "#contect",
				//5.将路由对象放到vue的实例中
				router,
				data() {
					return {

					};
				},
				methods: {

				}
			})

                 第六步:定义两个触发路由的事件的按钮

    第一个界面
      第二个界面

                第七步：定义路由的内容（锚点）

		
		
		
		
		
		
	
	
		
		

			
			第一个界面
			第二个界面
			
			
		

		


	

完成上面七个步骤，我们就完成啦，来看一下效果吧！！

 

二.nodejs的环境搭建 

        Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，可以用于开发服务器端应用程序。它允许开发者使用JavaScript语言进行服务器端编程，使得前端开发者可以使用相同的语言和工具来开发整个应用的前后端部分。

        npm（Node Package Manager）是Node.js的包管理器，它是一个用于安装、管理和发布Node.js模块的命令行工具。npm提供了一个庞大的开源软件生态系统，使开发人员能够轻松地共享和重用代码。

        2.1 下载依赖

        下载官网：下载 | Node.js (nodejs.org)https://nodejs.org/zh-cn/download

        根据自己的情况进行选择 ，下载解压

2.2 编辑环境变量

 

        可以输入这两个查看版本

 

2.3 建包

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

 

2.4 测试

        在CMD中执行以下三行代码，路径根据自己的改变

         执行之后会会在C盘下生成文件

里面是这样的就可以啦！

        接着，我们在执行这行代码测试：

刚刚新建的两个包下有这些东西就可以啦！！！

 

        今天的分享就到这啦！！