路由
是什么
Vue路由是Vue.js框架中用于管理不同页面之间切换的插件。它允许你在单页应用程序中定义多个路由，并根据URL的变化动态地加载不同的组件。通过使用Vue路由，你可以创建一个具有多个页面的应用程序，而无需刷新整个页面。
Vue路由的核心是Vue Router，它是Vue.js官方提供的路由管理器。Vue Router提供了一组API，用于定义路由规则、创建路由链接、导航控制等功能。通过对Vue Router的配置，你可以将不同的URL映射到不同的组件，实现页面之间的无缝切换和导航。
使用Vue路由，你可以实现诸如页面切换、嵌套路由、路由参数传递、路由守卫等功能，从而提升用户体验和应用程序的可扩展性。它是构建单页应用程序的重要工具之一。
案例
首先导入我们的js依赖
<!-- 1.导入路由所需要的js依赖 --> <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
在定义两个组件，来进行跳转页面
// 2.定义两个组件 var Home = Vue.extend({ template:'<div>沸羊羊你个臭傻逼</div>' }); var About = Vue.extend({ template:'<div>美羊羊你个绿茶</div>' });
定义组件与路径的对应关系
// 3.定义组件与路径对应关系 var routes=[{ component:Home, path:'/home', },{ component:About, path:'/about', }];
再通过路由获取路由对象router
// 4.通过将路由关系获取路由的对象router var router = new VueRouter({routes});
将路由对象挂在vue实列中
// 5.将路由对象挂在vue实列中 new Vue({ el:"#app", router, data(){ return { name:'灰太狼', }; } });
触发路由的点击按钮事件
<!-- 6.触发路由事件的按钮 --> <router-link to="/home">首页</router-link> <router-link to="/about">关于</router-link>
最后定义路由内容（锚点）
<!-- 7.定义锚点、路由内容 --> <router-view></router-view>
整体代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>路由</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script> <!-- 1.导入路由所需要的js依赖 --> <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/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 type="text/javascript"> // 2.定义两个组件 var Home = Vue.extend({ template:'<div>沸羊羊你个臭傻逼</div>' }); var About = Vue.extend({ template:'<div>美羊羊你个绿茶</div>' }); // 3.定义组件与路径对应关系 var routes=[{ component:Home, path:'/home', },{ component:About, path:'/about', }]; // 4.通过将路由关系获取路由的对象router var router = new VueRouter({routes}); // 5.将路由对象挂在vue实列中 new Vue({ el:"#app", router, data(){ return { name:'灰太狼', }; } }); </script> </body> </html>
效果
nodejs的环境搭建
Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，用于构建高性能的网络应用程序。它提供了一个能够在服务器端运行JavaScript代码的平台，使开发人员能够使用JavaScript进行服务器端开发。
Node.js具有以下特点：
1. 异步非阻塞的I/O模型：Node.js采用事件驱动的方式处理请求，通过非阻塞的I/O模型，能够高效地处理大量并发请求，提高系统的吞吐量和响应性能。
2. 单线程：Node.js使用单线程模型，但通过事件循环机制和异步编程模式，可以处理大量并发请求，避免了传统多线程模型中线程切换的开销和资源占用。
3. 轻量和高效：Node.js的设计目标是轻量和高效，它使用了高性能的V8引擎，并采用了一些优化策略，如内存管理和垃圾回收机制，使得Node.js具有快速的执行速度和较低的资源消耗。
4. 跨平台：Node.js可以运行在多个操作系统上，如Windows、Mac和Linux等，使开发人员能够在不同的平台上进行开发和部署。 通过使用Node.js，开发人员可以利用JavaScript语言的优势，快速构建高性能的网络应用程序，如Web服务器、实时通信应用、API服务器等。
npm，全称为Node Package Manager，是Node.js的包管理工具。它允许开发者在项目中管理和安装第三方模块和插件，并提供了一系列命令来管理项目依赖、构建和发布。
使用npm可以完成以下操作：
- 初始化项目：使用
npm init命令可以初始化一个新的项目，生成package.json文件，用于管理项目的依赖和配置。- 安装依赖：使用
npm install命令可以安装项目所需的依赖。例如，npm install vue会安装最新版本的Vue.js库。- 管理依赖：
package.json文件中的dependencies字段记录了项目的依赖信息。使用npm install --save <package>可以将依赖添加到dependencies字段中。- 更新依赖：使用
npm update命令可以更新项目的依赖到最新版本。- 删除依赖：使用
npm uninstall命令可以删除项目的依赖。例如，npm uninstall vue会删除已安装的Vue.js库。- 其他命令：npm还提供了其他一些常用的命令，如
npm run <script>用于运行项目中定义的脚本，npm publish用于将包发布到npm仓库等。除了以上常用的命令，npm还有许多其他功能，如管理全局安装的包、管理项目的版本等。你可以通过在命令行中运行
npm help命令或查阅npm的官方文档来获取更详细的信息。
下载依赖
下载地址
设置环境变量
输入这两个查看当前版本
建包
在压缩包的目录下建立以下两个包
在cmd中测试这三行代码 ，路径根据自己的改
再测试我们的这个模块
我们新建的两个包下面有这两个东西就行了
最后再执行最后一步
等下载完就欧克了，
今天的分享就到这啦，散会！！！
