Vue的路由使用,Node.js下载安装及环境配置教程 (超级详细)

前言:

今天我们来讲解关于Vue的路由使用,Node.js下载安装及环境配置教程

一,Vue的路由使用

首先我们Vue的路由使用,必须要导入官方的依赖的。

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务icon-default.png?t=N7T8https://www.bootcdn.cn/

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

路由思路
1、引入路由的js依赖
2、定义组件内容用来显示网页中的内容
3、定义路由路径关系
4、通过路由关系获取对象
5、挂载实例上
6、触发点击事件
7、定锚点,展示内容 

具体步骤:

1、引入路由的js依赖

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

2、定义组件内容用来显示网页中的内容

			// 2定义组件内容用来显示网页中的内容var Home = Vue.extend({template: '<div>网站首页内容</div>'});var About = Vue.extend({template: '<span>发展历史</span>'});

3、定义路由路径关系

	//3定义路由路径关系var routes = [{component: Home,path: '/home'},{component: About,path: '/about'}]

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

//4通过路由关系获取对象var router = new VueRouter({routes});

5、挂载实例上

//5挂载实例上new Vue({el: '#app',router,data() {// 创造数据:以后我们结合后台就会从数据库中获取json格式的数据return {msg: '云'}}})


6、触发点击事件

			<!-- 6触发点击事件 --><router-link to="/home">点我回首页</router-link><router-link to="/about">关于本网站</router-link>


7、定锚点,展示内容 

			<!-- 7定锚点,展示内容 --><router-view></router-view>

效果:我们点击后,上面的刷新按钮是没有刷新的,这就意味着我们与后台交互后,如果数据量多的话,那数据展示就不会停下很长时间。

二,Node.js下载安装及环境配置教程 

Node.js的介绍:

Node.js是一个基于Chrome V8引擎的JavaScript运行环境。 Node.js使用了一个事件驱动、非阻塞式I/O 的模型。Node.js是一个让JavaScript运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言 

Node.js官网:下载 | Node.js (nodejs.org)icon-default.png?t=N7T8https://nodejs.org/zh-cn/download

npm是什么?

npm其实是Node.js的包管理工具(package manager)。方便我们项目操作用的。

如果想下载先前版本也可以:

下载后是个zip文件(安全性高),我们解压后,通过cmd窗口测试安装是否成功,按下【win+R】键,输入cmd,运行黑窗口  

     输入指令:node -v     // 显示node.js版本

                       npm -v      // 显示npm版本

成功显示版本说明安装成功

注意事项:

node.js的版本区别,v14版本以下与以上有着巨大的差别

 三、环境配置

(1)找到安装的目录,在安装目录下新建两个文件夹(node_global)(node_cache)。一定要是在安装node.js的根目录下。

(2)配置环境变量

 新增NODE_HOME,值为:D:\soft\node-v10.15.3-win-x64

 修改PATH并在最后添加:window11不用;

%NODE_HOME%          %NODE_HOME%\node_global

(3)创建完毕后,使用管理员身份打开cmd命令窗口,输入

npm config set prefix “你的路径\node_global” (复制你刚刚创建的“node_global”文件夹路径)

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


 ②npm config set cache “你的路径\node_cache”  (复制你刚刚创建的“node_cache”文件夹路径)

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

(4)安装淘宝镜像

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

安装成功后会在C:\Users\用户名\下生成.npmrc文件

 四、测试

  配置完成后,全局安装一个最常用的 express 模块进行测试

npm install express -g   // -g代表全局安装

运行解压的项目--》npm i  (这里加载的时间比较长)

五、安装淘宝镜像

①安装淘宝镜像

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

  查看是否成功:

npm config get registry

这个vue项目私信我可得,我们先进到该项目的根目录输入cmd.

启动项目

  npm run dev

启动效果:

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

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

相关文章

2023年9月20日

画个钟 头文件&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPaintEvent> #include <QDebug> #include <QPainter> #include <QTimerEvent> #include <QTime> #include <QDateTime> #include <…

Python日期处理库:掌握时间的艺术

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 日期和时间在计算机编程…

【Linux】Ubuntu美化主题【教程】

【Linux】Ubuntu美化主题【教程】 文章目录 【Linux】Ubuntu美化主题【教程】1. 安装优化工具Tweak2.下载自己喜欢的主题3. 下载自己喜欢的iconReference 1. 安装优化工具Tweak 首先安装优化工具Tweak sudo apt-get install gnome-tweak-tool安装完毕后在菜单中打开Tweak 然后…

根据商品ID获得淘宝商品详情, 获得淘宝商品详情高级版,获得淘宝商品评论, 获得淘宝商品快递费用 ,获得淘口令真实,批量获得淘宝商品上下架时间)

参数说明 通用参数说明 参数不要乱传&#xff0c;否则不管成功失败都会扣费url说明 https://api-gw.…….cn/平台/API类型/ 平台&#xff1a;淘宝&#xff0c;京东等&#xff0c; API类型:[item_search,item_get,item_search_shop等]version:API版本key:调用key,测试key:test_…

蒙特卡洛方法的数学基础-1

蒙特卡洛方法的数学基础-1 概率论 Bayes 公式 常用分布 Binominal Distribution Poisson Distribution Gaussian Distribution Exponential Distribution Uniform Distribution 大数定理 均匀概率分布随机地取N个数xi &#xff0c;函数值之和的算术平均收敛于函数的期望值 …

无涯教程-JavaScript - CSC函数

描述 CSC函数返回以弧度指定的Angular的余割值。 语法 CSC (number)争论 Argument描述Required/OptionalNumberThe angle (in radians) that you want to calculate the cosecant of.Required Notes CSC(n)等于1/SIN(n) 如果Angular为度,则将其乘以PI()/180或使用RADIANS…

zabbix添加监控项及邮件报警

一、zabbix添加监控项 添加主机群组&#xff0c;添加主机&#xff0c;添加监控项 键值参考官方文档&#xff1a;1 Zabbix客户端 添加监控MySQL3306端口的监控项 2.邮件报警 1.软件安装 [rootxingdian ~]# yum install mailx -y 2.邮箱配置 [rootxingdian ~]# vim /etc/mail.…

计算机毕设 opencv python 深度学习垃圾图像分类系统

文章目录 0 前言课题简介一、识别效果二、实现1.数据集2.实现原理和方法3.网络结构 最后 0 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的毕设题目缺少创新和亮点&#xff0c;往往达不到毕业答辩的要求&#xff0c;这两年不断有学弟…

(并查集) 1971. 寻找图中是否存在路径 ——【Leetcode每日一题】

❓ 1971. 寻找图中是否存在路径 难度&#xff1a;简单 有一个具有 n 个顶点的 双向 图&#xff0c;其中每个顶点标记从 0 到 n - 1&#xff08;包含 0 和 n - 1&#xff09;。图中的边用一个二维整数数组 edges 表示&#xff0c;其中 edges[i] [ui, vi] 表示顶点 ui 和顶点 …

年龄大了转嵌入式有机会吗?

年龄大了转嵌入式有机会吗&#xff1f; 首先&#xff0c;说下结论&#xff1a;年龄并不是限制转行嵌入式软件开发的因素&#xff0c;只要具备一定的编程和电子基础知识&#xff0c;认真学习和实践&#xff0c;是可以成为优秀的嵌入式软件开发工程师的。最近很多小伙伴找我&…

共铸智能未来 图为科技加入深圳市人工智能行业协会

人工智能技术的快速发展&#xff0c;为我们带来了许多革命性的创新&#xff0c;深度学习、自然语言处理、计算机 视觉等技术的突破&#xff0c;加速了人工智能的进步&#xff0c;使其能够更好地理解和处理复杂的数据和情境。这 些技术不仅在科学研究中发挥着重要作用&#xff0…

linux-如何用起来ubuntu

1 Oracle VM VirtualBox安装ubuntu20.04虚拟机 【工具】->【新建】 1.1 虚拟电脑名称和系统类型 【名称】&#xff1a;自定义名称即可 【文件夹】&#xff1a;虚拟机文件将要存储的路径 【虚拟光盘】&#xff1a;将要安装的虚拟机iso文件 1.2 自动安装 【用户名】&…

第16篇ESP32 platformio_arduino框架 wifi联网_连接WiFi热点并连接tcp server收发数据进行通讯

第1篇:Arduino与ESP32开发板的安装方法 第2篇:ESP32 helloword第一个程序示范点亮板载LED 第3篇:vscode搭建esp32 arduino开发环境 第4篇:vscodeplatformio搭建esp32 arduino开发环境 ​​​​​​第5篇:doit_esp32_devkit_v1使用pmw呼吸灯实验 第6篇:ESP32连接无源喇叭播…

通过Power Platform自定义D365 CE 业务需求 - 10.使用Power Apps和Dynamics 365的集成

集成在所有项目中都非常重要。您可以使用Microsoft本机应用程序或使用低代码、少代码概念的第三方系统集成Power Apps。在本章中,您将学习如何将本机和第三方应用程序与模型驱动的Power Apps和Dynamics 365应用程序集成。 将Outlook与Power Apps集成 以下部分概述了将Outloo…

【机器学习】详解回归(Regression)

文章目录 是什么的问题案例说明 是什么的问题 回归分析&#xff08;Regression Analysis&#xff09; 是研究自变量与因变量之间数量变化关系的一种分析方法&#xff0c;它主要是通过因变量Y与影响它的自变量 X i &#xff08; i 1 , 2 , 3 … &#xff09; X_i&#xff08;i1…

Python灰帽编程——错误异常处理和面向对象

文章目录 1. 错误和异常1.1 基本概念1.1.1 Python 异常 1.2 检测&#xff08;捕获&#xff09;异常1.2.1 try except 语句1.2.2 捕获多种异常1.2.3 捕获所有异常 1.3 处理异常1.4 特殊场景1.4.1 with 语句 2. 内网主机存活检测程序2.1 scapy 模块2.1.1 主要功能2.1.2 scapy 安装…

tp5.1 致命错误: Call to undefined method think\Cache::get()

致命错误: 致命错误: Call to undefined method think\Cache::get() 原因&#xff1a;&#xff08;引用类错误&#xff09; thinkphp5.1中有两个Cache类&#xff1a;think\Cache和think\facade\Cache。 官方文档中说使用think\Cache&#xff0c;但实际是使用think\facade\Cac…

【C++】string 之 assign、at、append函数的学习

前言 在学习string类的过程中&#xff0c;我发现了assign这个函数&#xff0c;感觉很有用&#xff0c;就来记录一下 assign函数原型&#xff1a; void assign(size_type n, const T& x T());void assign(const_iterator first, const_iterator last);assign函数有两种使…

springboot整合全局异常处理

一、项目结构 二、全局异常 &#xff08;1&#xff09;启动类 package com.mgx;import com.mgx.common.dto.Result; import com.mgx.utils.ErrorUtil; import org.mybatis.spring.annotation.MapperScan; import org.springframework.boot.SpringApplication; import org.spr…

TikTok的全球困境:多国整改对跨境出海的影响

TikTok&#xff08;抖音国际版&#xff09;是一款风靡全球的短视频应用程序&#xff0c;凭借其创新的内容和吸引力&#xff0c;迅速在全球范围内赢得了数以亿计的用户。 然而&#xff0c;近年来&#xff0c;TikTok在多个国家和地区面临了严峻的监管挑战和整改要求&#xff0c;…