• Vue的详细教程--Vue路由与nodejs

    🥳🥳Welcome Huihui's Code World ! !🥳🥳

    接下来看看由辉辉所写的关于Vue的相关操作吧

    目录

    🥳🥳Welcome Huihui's Code World ! !🥳🥳

    一.Vue路由是什么

    二.使用Vue路由的步骤

    1、引入Vue.vue-router的js依赖

    2、定义组件

    3、定义组件与路径的相关关系

    4、通过路由关系获取路由对象

    5、将路由挂载到Vue实例中

    6、触发路由事件

    7、定义锚点

    三.nodejs是什么

    四.npm是什么

    五.nodejs的环境搭建

    1. 下载和安装Node.js

    2. 验证Node.js安装

    3. 创建一个新的项目文件夹：

    4. 初始化项目：

    5. 安装项目依赖

    6. 创建和编写你的代码文件：

    7. 运行项目：

    一.Vue路由是什么

    vue路由是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。 vue的单页面应用是基于路由和组件的， 路由用于设定访问路径，并将路径和组件映射起来

    二.使用Vue路由的步骤

    1、引入Vue.vue-router的js依赖

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

    2、定义组件

    1. /* 2.定义组件 */
    2. 			const  Home=Vue.extend(){
    3. 				template:"
      我是首页
      "
    4. 			}
    5. 			const  About=Vue.extend(){
    6. 				template:"
      我是关于页面的内容
      "
    7. 			}

    3、定义组件与路由的相关关系

    1. 	/* 3.定义组件和路由的相关关系 */
    2. 			let routes = [{
    3. 				path: '/home',
    4. 				component: Home
    5. 			}, {
    6. 				path: '/about',
    7. 				component: About
    8. 			}];

    4、通过路由关系获取路由对象

    1. /* 4.通过路由关系获取路由对象 */
    2. 			const router = new VueRouter({
    3. 				routes: routes
    4. 			})

    5、将路由挂载到Vue实例中

    1.             // 构建vue实例 绑定边界	
    2. 			new Vue({
    3. 				el: '#app',
    4. /* 5.将路由挂载到Vue实例中 */
    5. 				router,
    6. 				data() {
    7. 					return {
    8.  
    9. 					}
    10. 				},
    11. 			})

    6、触发路由事件

    2. 			<router-link to="/home">首页router-link>
    3. 			<router-link to="/about">关于router-link>

    7、定义锚点

    2. 			<router-view>router-view>

    代码（总）

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>路由title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 		
    8. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js">script>
    9.  
    10. 	head>
    11. 	<body>
    12. 		<div id="app">
    13. 			
    14. 			<router-link to="/home">首页router-link>
    15. 			<router-link to="/about">关于router-link>
    16. 			
    17. 			<router-view>router-view>
    18.  
    19. 		div>
    20.  
    21. 		<script type="text/javascript">
    22. 			/* 2.定义组件 */
    23. 			const Home = Vue.extend({template: "
      我是首页
      "      }) 
    24. 				
    25. 			
    26. 			const About = Vue.extend({template: "
      我是关于页面的内容
      "      	}) 
    27. 				
    28. 		
    29.  
    30. 			/* 3.定义组件和路由的相关关系 */
    31. 			let routes = [{
    32. 				path: '/home',
    33. 				component: Home
    34. 			}, {
    35. 				path: '/about',
    36. 				component: About
    37. 			}];
    38.  
    39. 			/* 4.通过路由关系获取路由对象 */
    40. 			const router = new VueRouter({
    41. 				routes: routes
    42. 			})
    43.  
    44. 			// 构建vue实例 绑定边界	
    45. 			new Vue({
    46. 				el: '#app',
    47. 				/* 5.将路由挂载到Vue实例中 */
    48. 				router,
    49. 				data() {
    50. 					return {
    51.  
    52. 					}
    53. 				},
    54. 			})
    55. 		script>
    56.  
    57. 	body>
    58. html>

    效果

    三.nodejs是什么

            ①Node.js是一种开放源代码、跨平台的JavaScript运行时环境，基于Google Chrome的V8引擎。它允许开发人员使用JavaScript编写服务器端应用程序，而不仅仅局限于前端开发。       
             ②Node.js具有非阻塞、事件驱动的特点，能够高效地处理大量并发请求，并且提供了丰富的内置库和第三方模块，使开发人员能够轻松构建各种类型的应用，包括网站后端、API服务、实时通信等。

            ③Node.js的出现使得JavaScript不再只是浏览器脚本语言，而是可以成为全栈开发的选择之一

    四.npm是什么

            ①npm（Node Package Manager）是Node.js的包管理器，它是在安装Node.js时一同安装的。

            ②npm允许开发人员在项目中轻松地安装、更新和管理第三方的JavaScript模块和库。开发人员可以通过npm命令行工具搜索、安装和卸载模块，也可以查看模块的版本信息、依赖关系和使用示例。

            ③通过npm，开发人员可以方便地在自己的项目中引入各种功能强大的模块，节省了开发时间和精力。同时，npm也提供了一个开放的平台供开发者分享自己编写的模块，这样不仅可以让其他人使用和学习这些模块，也为整个JavaScript社区的发展做出了贡献。无论是构建网站、开发工具、创建命令行应用还是其他类型的应用，npm都是Node.js开发中不可或缺的重要组成部分

    五.nodejs的环境搭建

    1. 下载和安装Node.js

    🔺访问Node.js官网（点击这里下载）
    🔺根据你的操作系统选择合适的Node.js版本进行下载，推荐选择最新的LTS（长期支持）版本


    🔺执行安装程序进行安装，按照提示进行必要的设置和配置

    1. NODE_HOME:配置的是nodeJS解压的根路径D:\tools\nodejs\node-v10.15.3-win-x64\node-v10.15.3-win-x64
    2. PATH:%NODE_HOME%
    3. PATH:%NODE_HOME%\node_global

    查看环境变量

    1. echo %node_home%
    2.  
    3. echo %path%

    2. 验证Node.js安装

    🔺打开终端（命令行工具）。
    🔺 运行以下命令来检查Node.js和npm的版本：

    1. node -v
    2. npm -v

    🔺 如果正确显示Node.js和npm的版本号，则说明安装成功

    3. 配置npm的全局模块的下载地址

    🔺在nodeJS解压的根路径，创建两个文件夹

    1. npm config set cache "D:\tools\nodejs\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"

    如果成功了，那么便可以在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，删掉下载的破碎文件重新下载

    4.修改npm镜像提高下载速度

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

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

    5. 安装项目依赖

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

     npm install express

    🔺你可以在项目文件夹下的`node_modules`目录中看到安装的依赖模块。

    7. 运行项目：


    🔺在终端中，进入到项目文件夹所在的目录输入cmd。

    在cmd命令窗口下输入npm i下载js文件


    🔺如果一切正常，你会看到终端输出相关的提示信息

    🔺这时候我们输入npm run dev跑一下试试

    好啦，今天的分享就到这了，希望能够帮到你呢！😊😊 

  • 相关阅读:
    基于Java解决容量设施选址问题
    新威凌将开启申购：2022年第三季度业绩下滑，陈志强为董事长
    比特币是如何转账的——比特币区块链的五个技术性细节
    基于antd实现动态修改节点的Tree组件
    2023/11/10 JAVA学习
    污水除磷的方式
    Python毕业设计源代码OA在线办公系统
    VSCode搭建内核源码阅读开发环境
    数据结构----静态链表c++
    希望所有计算机学生都知道这些宝藏网站
  • 原文地址：https://blog.csdn.net/m0_74315688/article/details/133085096