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

<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.rhkb.cn/news/139625.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小程序中如何划分会员级别以及不同级别不同积分累计、折扣、返佣、升级条件等

以下是一些关键步骤和注意事项&#xff0c;帮助商家在小程序中有效设置会员卡等级和相关规则。 1. 设定会员卡等级。在管理员后台->会员管理处&#xff0c;点击“等级...”。会出现级别设置界面。 可以创建会员卡等级&#xff0c;并为每个等级设定名称和对应的规则。一般会员…

MyBatis 日志模块

文章目录 前言LogLogFactory日志应用JDBC 日志BaseJdbcLoggerConnectionLogger应用实现 总结 前言 日志在我们开发过程中占据了一个非常重要的地位&#xff0c;是开发和运维管理之间的桥梁&#xff0c;在Java中的日志框架也非常多&#xff0c;Log4j、Log4j2、slf4j等&#xff…

创建表

MySQL从小白到总裁完整教程目录:https://blog.csdn.net/weixin_67859959/article/details/129334507?spm1001.2014.3001.5502 创建表 语法格式: create table 表名(列名1 数据类型,列名2 数据类型,... ,列名n, 数据类型 ); 练习:在czwbkl库中,创建一格test01表 跟大家说…

开发高性能知识付费平台:关键技术策略

引言 在构建知识付费平台时&#xff0c;高性能是确保用户满意度和平台成功的关键因素之一。本文将探讨一些关键的技术策略&#xff0c;帮助开发者打造高性能的知识付费平台。 1. 前端性能优化 使用CDN加速资源加载 使用内容分发网络&#xff08;CDN&#xff09;来托管和加…

Flask数据库之SQLAlchemy--介绍--链接数据库

目录 SQLAlchemy介绍 SQLAlchemy连接数据库 SQLAlchemy介绍 数据库是一个网站的基础&#xff01;&#xff01;&#xff01; 比如MySQL、MongoDB、SQLite、PostgreSQL等&#xff0c;这里我们以MySQL为例进行讲解。 SQLAlchemy是一个ORM框架 对象关系映射&#xff08;英语&…

第一个 Go 程序“hello,world“ 与 main 函数

第一个 Go 程序"hello&#xff0c;world" 与 main 函数 文章目录 第一个 Go 程序"hello&#xff0c;world" 与 main 函数一.创建“hello&#xff0c;world”示例程序二. “hello&#xff0c;world” 程序结构拆解三、main 函数四、Go 语言中程序是怎么编译…

Xpath使用

有如下网页&#xff1a; 需要选中“若出现" 操作如下&#xff1a; 打开Xpath Helper 选中"若出现",右击检查 复制对应的Xpath 在QUERY栏插入即可

[杂谈]-快速了解半波和全波整流

快速了解半波和全波整流 文章目录 快速了解半波和全波整流1、滤波2、半波整流器3、全波整流器4、常见问题 整流器是一种将交流信号转换为脉动直流信号以及将交流电转换为直流电的电子电路。 我们日常生活中几乎所有的电子项目都会用到它。 根据周期传导&#xff0c;本文我们介绍…

VisualBox QA

出现提示注册表错误&#xff0c;或者之前正常&#xff0c;重启VisualBox后&#xff0c;VM运行失败时&#xff0c;可通过正确卸载VisualBox&#xff0c;然后使用注册表清理软件(CCleaner)清理注册表后&#xff0c;重装VisualBox&#xff0c;即会正常。&#xff08;一般用这个能解…

自学网络安全的三个必经阶段(含路线图)

一、为什么选择网络安全&#xff1f; 这几年随着我国《国家网络空间安全战略》《网络安全法》《网络安全等级保护2.0》等一系列政策/法规/标准的持续落地&#xff0c;网络安全行业地位、薪资随之水涨船高。 未来3-5年&#xff0c;是安全行业的黄金发展期&#xff0c;提前踏入…

「UG/NX」BlockUI 选择小平面区域 Select Facet Region

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「UG/NX」BlockUI集合&#x1f4da;全部专栏「UG/NX」NX二次开发「UG/NX」BlockUI集合「VS」Visual Studio「QT」QT5程序设计「C/C」C/C程序设计「Win」Windows程序设计「DSA」数据结构与算法「File」数据文件格式 目录 控件说…

vue3+ts 实现移动端分页

current 开始页码 pageSize 结束页码 const sizeref<number>(10) //一页显示十条 const eachCurrentPageref<number>(1) //默认是第一页interface ITdata {current: number,pageSize: number,// xxxx 其他参数... } const selectApplyList ref<…

Verilog 不同编码风格对综合电路的影响

文章目录 示例 #1示例 #2示例 #3 Verilog是一种硬件描述语言&#xff08;HDL&#xff09;&#xff0c;用于设计数字电路和系统。统一、良好的代码编写风格&#xff0c;可以提高代码的可维护性和可读性。 同样的功能&#xff0c;不同的Verilog 编码风格也会对综合过程产生重大影…

1787_函数指针的使用

全部学习汇总&#xff1a;GitHub - GreyZhang/c_basic: little bits of c. 前阵子似乎写了不少错代码&#xff0c;因为对函数指针的理解还不够。今天晚上似乎总算是梳理出了一点眉目&#xff0c;在先前自己写过的代码工程中做一下测试。 先前实现过一个归并排序算法&#xff0c…

【Java毕设项目】基于SpringBoot+Vue校园便利平台的设计与实现

博主主页&#xff1a;一季春秋博主简介&#xff1a;专注Java技术领域和毕业设计项目实战、Java、微信小程序、安卓等技术开发&#xff0c;远程调试部署、代码讲解、文档指导、ppt制作等技术指导。主要内容&#xff1a;毕业设计(Java项目、小程序等)、简历模板、学习资料、面试题…

【LeetCode-中等题】513. 找树左下角的值

文章目录 题目方法一&#xff1a;前序递归方法二&#xff1a;层序遍历 题目 方法一&#xff1a;前序递归 在递归遍历到叶子结点时&#xff0c;对比此时的节点深度&#xff0c;若当前节点深度大于当前最大深度&#xff0c;就更新value值&#xff0c;最后记录下的value即为最下最…

2023.9.23(对这一年过去几个月的总结)

这个时间点杭州正在开亚运会&#xff0c;周六&#xff0c;大周&#xff0c;难得的大周&#xff0c;早上在公司健身房跑完步&#xff0c;就来工位看书了。 反思一下&#xff1a; 技术&#xff1a; 今年在技术学习上的目标&#xff0c;达成率是在太低&#xff0c;但看文章输出来…

手摸手图解 CodeWhisperer 的安装使用

CodeWhisperer 是亚⻢逊出品的一款基于机器学习的通用代码生成器&#xff0c;可实时提供代码建议。 亚马逊云科技开发者社区为开发者们提供全球的开发技术资源。这里有技术文档、开发案例、技术专栏、培训视频、活动与竞赛等。帮助中国开发者对接世界最前沿技术&#xff0c;观点…

【云原生】Kubernetes学习笔记

部署 在部署前强调几点 不要使用IPv6, 很多组件都不支持IPv6不要使用最新版本, 最新版本非常不稳定, 甚至可能存在无法运行的bug不要版本更新, 安装后就将版本固定下来, 新的版本可能会引入新功能, 或移除旧功能, 导致Kubernetes无法运行 Kubeadm介绍 K8s是由多个模块构成的…

【Qt】16进制转换格式字符串及二进制

【Qt】16进制转换格式字符串及二进制 16进制转换成字符串16进制转换成格式字符串16进制转换成字符串并每两位加空格16进制转换成二进制 16进制转换成字符串 可调用QString类的静态方法number(),此方法为重载&#xff0c;有以下重载 // 第一个参数为输入值&#xff0c;第二个为…