• Vue.js路由及Node.js的入门使用---超详细

    一，Vue路由

    1.1 路由是什么

        路由是用来管理应用程序中不同页面之间导航的概念。Vue Router是Vue.js官方提供的路由管理器，它允许我们通过定义路由规则和视图组件来配置路由

    1.2 路由给我们带来的好处有哪些？

    单页应用（Single Page Application）：

            路由使得我们能够在单个页面中展示多个视图，而不必每次都刷新整个页面。这提升了用户体验，并减少了服务器的负载。

    前端路由导航：

             通过路由，我们可以定义应用程序中不同页面之间的跳转关系。这样，用户在浏览应用时可以通过导航链接或者程序matic的方式切换页面，实现页面的无刷新切换。

    嵌套路由：

              Vue Router支持嵌套路由，也就是在一个页面中嵌套另一个页面。这样，我们能够构建更复杂的应用程序，将页面拆分成多个组件，提高代码的可维护性和复用性。

    参数传递和动态路由：

             通过路由参数，我们可以在页面之间传递数据。Vue Router支持动态路由，可以根据不同参数匹配到对应的路由规则，从而展示不同的页面内容。

    导航守卫：

               Vue Router提供了导航守卫机制，允许我们在路由切换前后执行自定义逻辑，例如验证用户是否登录，判断用户权限等

    二，路由实现单页应用(7步)

    ① 导入相关的vue依赖

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

    ② 定义组件

    1. 	//2.定义两个组件
    2. 		var One = Vue.extend({
    3. 		template: '
      我是大哥
      '
    4. 			});
    5. 	    var Tow = Vue.extend({
    6. 		template: '
      我是小弟
      '
    7. 			});

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

    1. 	//3.定义组件与路由路径对应关系
    2. 			var routes=[{
    3. 				component: One,
    4. 				path: '/one'
    5. 			},{
    6. 				component: Tow,
    7. 				path: '/tow'
    8. 			}
    9. 			];

    ④ 通过路由关系获取router

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

    ⑤ 将路由挂载到Vue实例中

    1. 	//5 将路由挂载到Vue实例中-- >
    2. 			new Vue({
    3. 				el: "#Bing",
    4. 				data() {
    5. 					return {
    6.  
    7. 					};
    8. 				},
    9. 				  router: router
    10. 			})

    ⑥ 触发路由事件的按钮

    1.        
    2.        <router-link to='/one'>首页router-link>
    3.        <router-link to='/tow'>关于router-link>

    ⑦ 定义锚点

    1. 	   
    2. 	   <router-view>router-view>

    html全部代码：

    1. DOCTYPE html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		
    7. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    8. 		
    9. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    10. 	   <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.5.2/vue-router.min.js">script>
    11.  
    12. 	head>
    13. 	<body>
    14. 		
    15. 		<div id="Bing">
    16. 			
    17. 		
    18.       <router-link to='/one'>首页router-link>
    19.        <router-link to='/tow'>关于router-link>
    20. 	   
    21. 	   
    22. 	   <router-view>router-view>
    23. 		div>
    24. 		<script>
    25. 			//2.定义两个组件
    26. 			var One = Vue.extend({
    27. 				template: '
      我是大哥
      '
    28. 			});
    29. 			var Tow = Vue.extend({
    30. 				template: '
      我是小弟
      '
    31. 			});
    32. 			//3.定义组件与路径对应关系
    33. 			var routes=[{
    34. 				component: One,
    35. 				path: '/one'
    36. 			},{
    37. 				component: Tow,
    38. 				path: '/tow'
    39. 			}
    40. 			];
    41. 			// 4.通过路由关系获取router
    42.        var router=new VueRouter({routes});
    43.  
    44.  
    45.  
    46. 			
    47. 			//5 将路由挂载到Vue实例中-- >
    48. 			new Vue({
    49. 				el: "#Bing",
    50. 				data() {
    51. 					return {
    52.  
    53. 					};
    54. 				},
    55. 				  router: router
    56. 			})
    57. 		script>
    58.  
    59.  
    60. 	body>

    效果图：

    三，Node.js坏境搭建

    3.1 何为node.js

    Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，用于在服务器端运行JavaScript代码。它允许开发者使用JavaScript语言来构建高性能、可扩展的网络应用程序

    Node.js具有丰富的内置模块和第三方模块生态系统，可以轻松地构建Web服务器、RESTful API、实时通信应用、代理服务器等。同时，由于Node.js使用JavaScript作为开发语言，使得前端和后端开发可以共享代码，提高了开发效率。

    总而言之，Node.js是一个开源的、跨平台的JavaScript运行时环境，专注于构建高性能、可扩展的网络应用程序

    3.2 何为npm

    npm（Node Package Manager）是Node.js的包管理器，用于下载、安装和管理JavaScript模块。它是一个命令行工具，与Node.js一同安装在计算机上。

    通过npm，开发者可以轻松地查找、安装和更新数以万计的开源JavaScript包。这些包可以包含各种功能和功能模块，例如Web框架、数据库驱动程序、工具库等。使用这些包，开发者可以快速构建复杂的应用程序，节省大量的开发时间和精力。

    npm提供了一套强大的命令行工具，使得开发者可以方便地进行包的搜索、安装、更新和删除等操作。它还允许开发者管理项目依赖关系，通过一个名为"package.json"的文件来定义和记录项目所需的所有依赖项。

    除了提供包管理功能，npm还有其他一些功能，例如发布自己编写的JavaScript模块、管理私有包、执行脚本等。npm已经成为JavaScript开发社区中最受欢迎和广泛使用的包管理工具之一，为开发者提供了丰富的生态系统和便捷的开发体验

    四，Node.js坏境配置

    1 下载和安装Node.js

    ①Node.js下载地址 ---》点击下载Node.js

    ②根据你的操作系统选择合适的Node.js版本进行下载，推荐选择最新的LTS（长期支持）版本

    二 解压

    下载完毕之后解压 在解压文件夹根目录添加两个文件夹

    ① node_global   全局安装路径

    ② node_modules  npm缓存路径

    三 配置坏境变量

    3.1  新增NODE_HOME，值为：node.js的安装根目录

      3.2 修改PATH并在最后添加：%NODE_HOME%

                                                     %NODE_HOME%\node_global

    注1：测试安装是否成功：打开cmd窗口，输出如下命令会输出NodeJs和npm的版本号

             测试不出来去node.js根目录中启动cmd窗口使用以下命令再试试

               node -v

               npm -v

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

    在cmd窗口执行配置npm全局模块路径和cache默认安装位置，下面第一第二路径后面的路径根据自己的路径进行修改

    1. npm config set cache "D:\tools\node.js\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_cache"
    2.  
    3. npm config set prefix "D:\tools\nodejs\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_global"

    3.4 修改npm镜像提高下载速度

    淘宝源可直接copy运行即可

    在终端中运行以下命令配置淘宝源

    1. //设置淘宝源
    2.  
    3.           npm config set registry https://registry.npm.taobao.org/
    4.  
    5. //查看源，可以看到设置过的所有的源
    6.  
    7.           npm config get registry

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

    全部执行完之后，那么便可以在c盘的User下面看到一个文件，下图

    查看npm全局路径设置情况

    1. //此步骤随便全局安装一个模块就可以测评
    2.  
    3.           npm install webpack -g
    4.  
    5. //以上命令执行完毕后，会生成如下文件
    6.  
    7.           %node_home%\node_global\node_modules\webpack
    8.  
    9.   注意：下载过程中出现warn不用管，出现Error，删掉下载的破碎文件重新下载

    在终端中运行以下命令来安装项目所需的依赖模块，例如Express框架：

    npm install webpack -g

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

      注意：下载过程中出现warn不用管，出现Error，删掉下载的破碎文件重新下载

     

    3.5 运行下载的Node.js项目

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

    下载完毕之后，输入npm run dev启动项目

  • 相关阅读:
    15. 机器学习——聚类
    图解LeetCode——779. 第K个语法符号（难度：中等）
    手把手教你制作登录、注册界面 SpringBoot+Vue.js（cookie的灵活运用，验证码功能）
    Docker运行时安全之道: 保障容器环境的安全性
    Oracle数据库----第七周实验____循环与游标
    大文件处理（上传，下载）思考
    [git] 撤销 git reset –hard
    linuxC语言缓冲区及小程序的实现
    浙大数据结构慕课课后题（03-树2 List Leaves）
    Linux学习笔记——Shell和Bash
  • 原文地址：https://blog.csdn.net/m0_73192864/article/details/133085009