• vue的路由与nodejs的环境搭建

    目录

    路由

    是什么

    案例

     nodejs的环境搭建 

     下载依赖

     设置环境变量

    建包

    路由

    是什么

    Vue路由是Vue.js框架中用于管理不同页面之间切换的插件。它允许你在单页应用程序中定义多个路由，并根据URL的变化动态地加载不同的组件。通过使用Vue路由，你可以创建一个具有多个页面的应用程序，而无需刷新整个页面。

    Vue路由的核心是Vue Router，它是Vue.js官方提供的路由管理器。Vue Router提供了一组API，用于定义路由规则、创建路由链接、导航控制等功能。通过对Vue Router的配置，你可以将不同的URL映射到不同的组件，实现页面之间的无缝切换和导航。

    使用Vue路由，你可以实现诸如页面切换、嵌套路由、路由参数传递、路由守卫等功能，从而提升用户体验和应用程序的可扩展性。它是构建单页应用程序的重要工具之一。

    案例

     首先导入我们的js依赖

    2. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js">script>

     在定义两个组件，来进行跳转页面

    1. // 2.定义两个组件
    2. 			var Home = Vue.extend({
    3. 				template:'
      沸羊羊你个臭傻逼
      '
    4. 			});
    5. 			var About = Vue.extend({
    6. 				template:'
      美羊羊你个绿茶
      '
    7. 			});

    定义组件与路径的对应关系

    1. // 3.定义组件与路径对应关系
    2. 			var routes=[{
    3. 				component:Home,
    4. 				path:'/home',
    5. 			},{
    6. 				component:About,
    7. 				path:'/about',
    8. 			}];

     再通过路由获取路由对象router

    1. 	// 4.通过将路由关系获取路由的对象router
    2. 			var router = new VueRouter({routes});

    将路由对象挂在vue实列中

    1. 	// 5.将路由对象挂在vue实列中
    2. 			new Vue({
    3. 				el:"#app",
    4. 				router,
    5. 				data(){
    6. 					return {
    7. 						name:'灰太狼',
    8. 						};
    9. 					}
    10. 				});

    触发路由的点击按钮事件

    1. 	<!-- 6.触发路由事件的按钮 -->
    2. 		<router-link to="/home">首页</router-link>
    3. 		<router-link to="/about">关于</router-link>

     最后定义路由内容（锚点）

    2. 		<router-view>router-view>

     整体代码

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>路由</title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.6/vue.js"></script>
    7. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    8. 		<!-- 1.导入路由所需要的js依赖 -->
    9. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
    10. 	</head>
    11. 	<body>
    12. 		<div id="app">
    13. 			<!-- 6.触发路由事件的按钮 -->
    14. 		<router-link to="/home">首页</router-link>
    15. 		<router-link to="/about">关于</router-link>
    16. 		<!-- 7.定义锚点、路由内容 -->
    17. 		<router-view></router-view>
    18. 		</div>
    19. 		<script type="text/javascript">
    20. 			// 2.定义两个组件
    21. 			var Home = Vue.extend({
    22. 				template:'
      沸羊羊你个臭傻逼
      '
    23. 			});
    24. 			var About = Vue.extend({
    25. 				template:'
      美羊羊你个绿茶
      '
    26. 			});
    27. 			// 3.定义组件与路径对应关系
    28. 			var routes=[{
    29. 				component:Home,
    30. 				path:'/home',
    31. 			},{
    32. 				component:About,
    33. 				path:'/about',
    34. 			}];
    35. 			// 4.通过将路由关系获取路由的对象router
    36. 			var router = new VueRouter({routes});
    37. 			
    38. 			// 5.将路由对象挂在vue实列中
    39. 			new Vue({
    40. 				el:"#app",
    41. 				router,
    42. 				data(){
    43. 					return {
    44. 						name:'灰太狼',
    45. 						};
    46. 					}
    47. 				});
    48. 		</script>
    49. 	</body>
    50. </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可以完成以下操作：

    1. 初始化项目：使用npm init命令可以初始化一个新的项目，生成package.json文件，用于管理项目的依赖和配置。

    2. 安装依赖：使用npm install命令可以安装项目所需的依赖。例如，npm install vue会安装最新版本的Vue.js库。

    3. 管理依赖：package.json文件中的dependencies字段记录了项目的依赖信息。使用npm install --save 可以将依赖添加到dependencies字段中。

    4. 更新依赖：使用npm update命令可以更新项目的依赖到最新版本。

    5. 删除依赖：使用npm uninstall命令可以删除项目的依赖。例如，npm uninstall vue会删除已安装的Vue.js库。

    6. 其他命令：npm还提供了其他一些常用的命令，如npm run