• Vue路由与nodes的环境配置

    一，Vue路由

    什么是Vue路由？

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

    核心

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

    代码演示：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js">script>
    7. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js">script>
    8. 		<title>Vue路由title>
    9. 	head>
    10. 	<body>
    11. 		<div id="app">
    12. 		<router-link to="home">首页router-link>
    13. 			<router-link to="about">关于router-link>
    14. 			<router-view>router-view>
    15. 		div>
    16. <Script type="text/javascript">
    17. 	//定义两个组将
    18. 	var Home=Vue.extend({
    19. 		template:'
      网站首页。。。。
      '
    20. 		});
    21. 		var About=Vue.extend({
    22. 			template:'
      网站发展。。。。。。
      '
    23. 			});
    24. 			//2.定义组件与路基对应关系
    25. 	var routes=[{
    26. 		component:Home,
    27. 		path:'/home'
    28. 		},
    29. 		{
    30. 			component:About,
    31. 			path:'/about'
    32. 			
    33. 		}];
    34. 		//3.通过路由关系获取路由对像
    35. 		var router = new VueRouter({routes});
    36. 		//4.将路由对象挂载到路由对象
    37. 		
    38. 	new Vue({
    39. 		el:'#app',
    40. 		router,
    41. 		data(){
    42. 			return{
    43. 				msg:'xzs'
    44. 			}
    45. 			}
    46. 		})
    47. 	
    48. 	
    49. 	
    50. 	
    51. Script>
    52. 	body>
    53. html>

    效果：

    点击首页

     点击关于

    二.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=N7T8https://nodejs.org/zh-cn/download/

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

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

    配置

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

      node_global(npm全局安装位置)

      和 node_cache(npm缓存路径)这两个目录

     环境变量配置：

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

    添加path：

     PATH：%NODE_HOME%
    PATH：%NODE_HOME%\node_global

     打开cmd测试

    输入 node -v，npm -v

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

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

     安装淘宝镜像

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

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

     查看npm全局路径设置情况

     在cmd中输入npm install webpack -g

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

     运行下载的Node.js项目

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

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

  • 相关阅读:
    从入门到精通：Java三目运算符详细教程！
    LeetCode #2.两数相加
    istio学习（3）请求路由
    初识EasyAR
    BSV 上的信息不完整游戏
    在北京现场调试的这几天
    JavaSE - 数组的定义、使用、内存分布、应用
    大数据-玩转数据-DataWorks调度参数概述
    JSON 和 XML 的区别
    36. 干货系列从零用Rust编写负载均衡及代理，内网穿透中内网代理的实现
  • 原文地址：https://blog.csdn.net/weixin_72997875/article/details/133124677