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

news2024/12/24 21:52:39

🥳🥳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依赖

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<!-- 导入相关的依赖 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>

2、定义组件

/* 2.定义组件 */
			const  Home=Vue.extend(){
				template:"<div>我是首页</div>"
			}
			const  About=Vue.extend(){
				template:"<div>我是关于页面的内容</div>"
			}

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

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

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

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

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

            // 构建vue实例 绑定边界	
			new Vue({
				el: '#app',
/* 5.将路由挂载到Vue实例中 */
				router,
				data() {
					return {

					}
				},
			})

6、触发路由事件

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

7、定义锚点

<!-- 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.6.10/vue.js"></script>
		<!-- 1.导入相关的依赖 -->
		<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.定义组件 */
			const Home = Vue.extend({template: "<div>我是首页</div>"}) 
				
			
			const About = Vue.extend({template: "<div>我是关于页面的内容</div>"	}) 
				
		

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

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

			// 构建vue实例 绑定边界	
			new Vue({
				el: '#app',
				/* 5.将路由挂载到Vue实例中 */
				router,
				data() {
					return {

					}
				},
			})
		</script>

	</body>
</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(长期支持)版本


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

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

查看环境变量

echo %node_home%

echo %path%

2. 验证Node.js安装

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

node -v
npm -v

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

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

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

npm config set cache "D:\tools\nodejs\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_cache"

npm config set prefix "D:\tools\nodejs\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_global"

如果成功了,那么便可以在c盘的User下面看到一个文件

查看npm全局路径设置情况

//此步骤随便全局安装一个模块就可以测评

          npm install webpack -g

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

          %node_home%\node_global\node_modules\webpack

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

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

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

//设置淘宝源

          npm config set registry https://registry.npm.taobao.org/

//查看源,可以看到设置过的所有的源

          npm config get registry

5. 安装项目依赖

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

 npm install express

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

7. 运行项目:


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

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


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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1034926.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【无标题】显示TIFF格式文件

显示TIF文件 运行结果 package src;import com.sun.media.jai.codec.*;import com.sun.media.jai.codec.FileSeekableStream; import com.sun.media.jai.codec.ImageDecoder; import com.sun.media.jai.codec.ImageCodec; import com.sun.media.jai.codec.TIFFEncodeParam; imp…

2010-2017年WIND分省政府性债务余额面板数据

2010-2017年WIND分省政府性债务余额面板数据 1、时间&#xff1a;2010-2017年 2、指标&#xff1a;债务余额 3、范围&#xff1a;30个省 4、来源&#xff1a;wind 5、指标解释&#xff1a;地方政府债务分为一般债务和专项债务。 一般债务对应的是一般公共预算&#xff0c…

操作系统权限提升(三十)之数据库提权-SQL Server sp_oacreate+sp_oamethod(dba权限)提权

SQL Server sp_oacreate+sp_oamethod(dba权限)提权 sp_oacreate+sp_oamethod介绍 在xp_cmdshell被删除或不能利用是可以考虑利用sp_oacreate,利用前提需要sqlserver sysadmin账户服务器权限为system(sqlserver2019默认被降权为mssql)。sp_oacreate 是一个存储过程,可以…

Kubernetes 部署 nfs-subdir-external-provisioner

概述 官方GitHub及参考文档:GitHub - kubernetes-sigs/nfs-subdir-external-provisioner: Dynamic sub-dir volume provisioner on a remote NFS server. 部署nfs-subdir-external-provisioner提供StorageClass服务 步骤 nfs 服务器准备 /etc/exports # cat /etc/exports…

数据链路层--以太网

文章目录 以太网1. 以太网帧格式2. mac地址与IP地址 代表协议:以太网. 以太网 以太网" 不是一种具体的网络&#xff0c;而是一种技术标准&#xff1b;既包含了数据链路层的内容&#xff0c;也包含了一些物理层的内容。例如&#xff1a;规定了网络拓扑结构&#xff0c;访…

laravel框架 - 消息队列如何使用

业务场景&#xff1a;项目里边有很多视频资源需要上传到抖音资源库&#xff0c;通过队列一条一条上传。 参考实例&#xff1a;发送邮件&#xff0c;仅供参考 (1)创建任务【生成任务类】 在你的应用程序中&#xff0c;队列的任务类都默认放在 app/Jobs 目录下。如果这个目录不存…

一款好用的汇编学习工具【compile explore在线编译调试】

登录网址&#xff1a;Compiler Explorer 然后编写代码如下&#xff1a;可以看到&#xff0c;最左边是源代码&#xff0c;中间是汇编&#xff0c;可以选择编程语言和编译链工具&#xff0c;最右边是打印的输出结果&#xff0c;对于汇编指令可右键会弹出汇编指令的解释说明。

十四、ADDA数模转换

十四、AD&DA转换 介绍XTP2046介绍模块代码 模数转换数模转换 介绍 AD&#xff1a;模数转换&#xff0c;将模拟信号转换为计算机可操作的数字信号DA&#xff1a;数模转换&#xff0c;将数字信号转换为模拟信号 XTP2046 介绍 时序 模块代码 #define XPT2046_VBAT 0xAC /…

大数据学习1.0-Centos8虚拟机安装

1.创建新的虚拟机 2.选择稍后安装OS 3.选择Linux的CentOS8 4.选择安装路径 5.分配20g存储空间 6.自定义硬件 7.分配2g内存 8.分配2核处理器 9.选择镜像位置 10.开启虚拟机安装 推荐密码设置为root

全国职业技能大赛云计算--高职组赛题卷②(容器云)

全国职业技能大赛云计算--高职组赛题卷②&#xff08;容器云&#xff09; 第二场次题目&#xff1a;容器云平台部署与运维任务1 Docker CE及私有仓库安装任务&#xff08;5分&#xff09;任务2 基于容器的web应用系统部署任务&#xff08;15分&#xff09;任务3 基于容器的持续…

洛谷刷题入门篇:分支结构

今天又来了&#xff0c;刷题刷题&#xff0c;我爱刷题&#xff0c;题单链接如下&#xff1a; https://www.luogu.com.cn/training/101#problems 一、【深基1-2】小学数学 N 合一 题目如下&#xff1a;https://www.luogu.com.cn/problem/P2433 题目描述 问题 1 请输出 I lov…

[Linux入门]---git命令行的基本使用

文章目录 1.git使用gitee仓库创建git使用测试ignore文件 1.git使用 git是一款对文件进行版本控制的软件&#xff0c;gitee、github是基于git软件搭建的网站&#xff0c;是可以对代码进行托管的平台&#xff1b;github是国外的网站&#xff0c;访问慢&#xff0c;不稳定&#xf…

Linux学习之Redis使用

搭建Redis服务器 在主机redis64运行redis服务 #安装redis服务 [rootredis64 ~]# yum install -y redis # 启动redis服务并开机启动 [rootredis64 ~]# systemctl enable redis --now # 查看redis端口 [rootredis64 ~]# ss -tnlp | grep redis-server LISTEN 0 128 …

异步通讯技术之RabbitMQ

前言: 📕作者简介:热爱编程的小七,致力于C、Java、Python等多编程语言,热爱编程和长板的运动少年! 📘相关专栏Java基础语法,JavaEE初阶,数据库,数据结构和算法系列等,大家有兴趣的可以看一看。 😇😇😇有兴趣的话关注博主一起学习,一起进步吧! 一、初识MQ …

算法通过村第八关-树(深度优先)黄金笔记|寻找祖先

文章目录 前言最近公共祖先问题总结 前言 提示&#xff1a;生活就是一场有很多规则&#xff0c;却没有裁判的比赛。 --约瑟夫布罗茨基《悲伤与理智》 最近公共祖先问题 参考题目地址&#xff1a;236. 二叉树的最近公共祖先 - 力扣&#xff08;LeetCode&#xff09; 如果将搜索…

金属铬 铬含量的测定 硫酸亚铁铵滴定法

声明 本文是学习GB-T 4702.1-2016 金属铬 铬含量的测定 硫酸亚铁铵滴定法. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 GB/T4702 的本部分规定了硫酸亚铁铵滴定法测定金属铬中铬含量。 本部分适用于金属铬(钒≤0.20%)中铬含量的测定&…

【小沐学Python】网络爬虫之urllib

文章目录 1、简介2、功能介绍2.1 urllib库和requests库2.2 urllib库的模块2.2.1 urllib.request2.2.2 urllib.error2.2.3 urllib.parse2.2.4 urllib.robotparser 2.3 入门示例 3、代码示例3.1 urlib 获取网页(1)3.2 urlib 获取网页(2) with header3.3 urllib post请求 4、urlli…

LeetCode【1. 两数之和】

穷通有命无须卜&#xff0c;富贵何时乃济贫&#xff1b;角逐名场今已久&#xff0c;依然一幅旧儒巾。 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输…

测试网页调用本地可执行程序(续:带参数调用)

前篇文章介绍了网页调用本地可执行程序的方式&#xff0c;通过在注册表中注册命令&#xff0c;然后在网页中调用命令启动本地程序。如果需要传递参数&#xff0c;则需要在注册表命令中的command项中设置如下形式的值。 "XXXXXX\XXXXXXX.exe" "%1"&emsp…

【数据分享】海洋热含量Global Ocean Heat Content CDR】

【数据分享】海洋热含量Global Ocean Heat Content CDR 海洋与大气科学 海洋热含量数据可以不用计算了&#xff0c;直接下载使用&#xff01; 海洋热含量气候数据记录&#xff08;CDR&#xff09;是一组 1955 年至今的海洋热含量异常&#xff08;OHCA&#xff09;时间序列&…