Vue路由与node.js环境搭建

2023-09-21 10:41:01

目录

前言

一.Vue路由

1.什么是spa

1.1简介

1.2 spa的特点

1.3 spa的优势以及未来的挑战

2.路由的使用

2.1 导入JS依赖

2.2 定义两个组件

2.3 定义组件与路径对应关系

2.4 通过路由关系获取路由对象

2.5 将对象挂载到vue实例中

2.6 定义触发路由事件的按钮 

2.7 定义锚点和路由内容 

2.8 测试效果

小结

二. node.js环境搭建

1.官网下载地址

2.下载好安装包 

3.解压 

4.配置环境变量 

 5.测试是否安装成功

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

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

7.1 --registry

    7.2 cnpm

8.验证安装结果

9.node.js运行启动项目

9.1我们将准备好的前端项目解压到文件夹中

 9.2 地址栏输入cmd进入cmd窗口

 9.3下载安装完成之后启动项目

前言

Vue路由是Vue.js框架中用于构建单页面应用（SPA）的一种核心工具

一.Vue路由

1.什么是spa

1.1简介

SPA是单页面应用（Single Page Application）的缩写。它是一种Web应用程序的架构模式，通过动态地更新单个HTML页面来实现应用程序的交互和导航，而不需要每次用户操作都重新加载整个页面。

在传统的多页面应用中，每次用户导航到不同的页面时都需要重新加载整个页面，导致性能较低且用户体验较差。而SPA通过使用前端JavaScript框架（如Vue.js、React、Angular等）以及前端路由技术，将应用程序拆分为多个组件，每个组件负责渲染和处理特定的页面或功能。用户在应用程序中进行导航时，只需动态加载和更新相应的组件，从而快速响应用户的操作，提供流畅的用户体验

1.2 spa的特点

  1. 单页面加载：SPA只有一个HTML页面，整个应用的内容都动态地更新在这个页面上，无需每次页面切换都重新加载整个页面。

  2. 前端路由：SPA使用前端路由来管理应用程序的导航。路由器会根据URL路径匹配相应的组件，并将其渲染到视图中。

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

    异步加载：SPA使用异步加载技术，只加载当前页面所需的资源，减少了页面切换时的等待时间。

  4. 富交互性：SPA通过使用前端框架和库，可以实现复杂的用户界面和交互效果，提供更好的用户体验。

  5. 前后端分离：SPA的前端部分负责处理用户界面和交互逻辑，后端则提供数据接口和处理业务逻辑。这种分离使前后端开发可以并行进行，并提高了系统的可扩展性和灵活性

1.3 spa的优势以及未来的挑战

SPA的优点包括更快的页面加载速度、提供较好的用户体验、减少了服务器的负载等。然而，SPA也有一些挑战，例如对SEO不友好、应用初次加载时需要下载较大的JavaScript文件等。因此，在选择是否使用SPA时需要综合考虑项目的需求和技术特点 

2.路由的使用

2.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:'<div>关于本站</div>'
			});

2.3 定义组件与路径对应关系

var routes = [{
				component:Home,
				path:"/Home"
			},{component:about,
				path:"/about"
			}];

2.4 通过路由关系获取路由对象

var router = new VueRouter({routes});

2.5 将对象挂载到vue实例中

new Vue({	
	el:"#app",
	router,
	data(){
		return {
			msg:'hello Vue',
				}
			}
		})

2.6 定义触发路由事件的按钮 

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

2.7 定义锚点和路由内容 

<router-view></router-view>

2.8 测试效果

小结

Vue路由是构建Vue.js单页面应用的重要工具，它提供了灵活的方法来管理应用的导航和组件切换。通过合理的路由设计和使用，可以更好地组织应用程序的结构，实现良好的用户体验 

二. node.js环境搭建

1.官网下载地址

node.js中文官网icon-default.png?t=N7T8https://nodejs.org/zh-cn/download

2.下载好安装包 

这里我们不选择安装程序安装，选择解压版安装

3.解压 

下载好后到安装目录

解压后在当前解压的目录下新建node_global和node_cache这两个目录

新建目录说明

           node_global：npm全局安装位置

           node_cache：npm缓存路径

4.配置环境变量 

新建一个环境变量，变量名输入NODE_HOME,变量值为安装的目录

 编辑Path

%NODE_HOME%

%NODE_HOME%\node_global

 5.测试是否安装成功

node -v

npm -v

打开cmd窗口，输出如下命令会输出NodeJs和npm的版本号，出现版本号时说明安装成功 

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

打开cmd，分开执行如下命令：

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

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

 框中修改为刚刚创建的两个目录下的路径

注意点

注1：将步骤一创建的node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来

      注2：如果执行命令卡死，可以删除C:\Users\用户名\.npmrc 后重新执行。（用户名：为当前电脑的用户名）

      注3："D:\initPath\node-v10.15.3-win-x64\node_global"，双引号不能少

 

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

7.1 --registry

         设置淘宝源

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

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

          npm config get registry

 

          注1：其实此步骤的内容就是将以下代码添加到C:\Users\用户名\.npmrc文件中

               registry=https://registry.npm.taobao.org

    7.2 cnpm

          npm install -g cnpm --registry=https://registry.npm.taobao.org

 

          注1：cnpm安装完成后，以后就可以用cnpm命令代替npm命令, 此时npm还是会用官方镜像，cnpm会用国内镜像

          注2：如果要恢复成原来的设置，执行如下：

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

8.验证安装结果

查看淘宝镜像设置情况

          npm get registry

查看npm全局路径设置情况

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

         npm install webpack -g 

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

         %node_home%\node_global\node_modules\webpack

9.报错解决

npm ERR! code EPERM npm ERR! syscall mkdir npm ERR! path D:\tools\nodejs\node-v18.16.1-win-x64\node_cache_cacache npm ERR! errno -4048 npm ERR! Error: EPERM: operation not permitted, mkdir 'D:\tools\nodejs\node-v18.16.1-win-x64\node_cache_cacache' npm ERR! [Error: EPERM: operation not permitted, mkdir 'D:\tools\nodejs\node-v18.16.1-win-x64\node_cache_cacache'] { npm ERR! errno: -4048, npm ERR! code: 'EPERM', npm ERR! syscall: 'mkdir', npm ERR! path: 'D:\tools\nodejs\node-v18.16.1-win-x64\node_cache\_cacache', npm ERR! requiredBy: '.' npm ERR! } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It's possible that the file was already in use (by a text editor or antivirus), npm ERR! or that you lack permissions to access it. npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator.

npm ERR! Log files were not written due to an error writing to the directory: D:\tools\nodejs\node-v18.16.1-win-x64\node_cache_logs npm ERR! You can rerun the command with --loglevel=verbose to see the logs in your terminal

 在运行 npm install webpack -g  命令时出现以上报错可能是权限问题，我们需要到node_cache和node_global文件夹中将权限修改全部加上，使用完全控制

 

选择完全控制

 

注意，不只是node_global需要修改node_cache也需要修改

9.node.js运行启动项目

9.1我们将准备好的前端项目解压到文件夹中

 9.2 地址栏输入cmd进入cmd窗口

输入 npm -i 下载安装

 9.3下载安装完成之后启动项目

输入 npm run dev 启动项目

启动完成后浏览器会自动弹出页面 

 

今天的分享到这里就结束了，感谢各位大大的观看，各位大大的三连是博主更新的动力，感谢谢谢谢谢谢谢谢谢各位的支持！！！！！ 

更多推荐

苹果删除的照片如何恢复？无法拒绝的3个方法！

热爱摄影的人通常很热爱生活，照片是捕捉事物、人物、风景以及情绪的最佳方式。通过拍照，我们可以留住生活中路过的美好瞬间，所以照片对我们来说是非常有纪念意义的。但有时候可能会因为误操作而删除了一些非常重要的照片。那么苹果手机删除的照片如何恢复？小编教大家3招，帮助你找回那些珍贵的记忆。方法一：从“最近删除”中恢复删除的照片

.动态内存经典题分析（1）

题目：请问运⾏Test函数会有什么样的结果？voidGetMemory(char*p){p=(char*)malloc(100);}voidTest(void){char*str=NULL;GetMemory(str);strcpy(str,"helloworld");printf(str);}intmain(){Te

浅谈应急照明系统在民用建筑的设计应用与产品选型

贾丽丽安科瑞电气股份有限公司上海嘉定201801【摘要】应急照明分为备用照明、安全照明及疏散照明。文章介绍了应急照明系统的设计、灯具选择、灯具布置、配电等要求。并结合实例进行疏散照明的计算，以指导应急照明系统的设计与应用。【关键词】照度；光通量；消防应急灯具；A型消防应急照明灯具；消防应急照明和疏散指示系统。引言现代建

【已解决】AttributeError: module ‘numpy‘ has no attribute ‘int‘.

文章目录问题详情问题原因解决方法专栏目录：神经网络精讲与实战AlexNetVGGNetGoogLeNetInceptionV2——V4ResNetDenseNetSE-ResNet问题详情AttributeError:module‘numpy’hasnoattribute‘int’.np.intwasadeprecat

策略模式实现方式之Map＜K,Function＞

策略模式实现方式之Map<K,Function>小概念场景我们有一个对象对象有一个行为该行为在不同场景中有不同的表现形式策略模式定义了一系列算法封装了每个算法这一系列的算法可互换代替代码实现定义一个对象行为表现形式枚举//定义一个对象行为表现形式枚举publicenumAdApplyTypeEnumimplements

Spark Dataset 快速上手

文章首发地址SparkDataset是Spark提供的一种强类型的数据抽象，它结合了RDD的强大功能和DataFrame的优化执行。下面是SparkDataset的JavaAPI的详细解释：创建Dataset：使用spark.createDataset()方法：通过调用spark对象的createDataset()方法

20-SpringCloudAlibaba-2

六分布式流量防护1认识分布式流量防护在分布式系统中，服务之间的相互调用会生成分布式流量。如何通过组件进行流量防护，并有效控制流量，是分布式系统的技术挑战之一。什么是服务雪崩假设我有一个微服务系统，这个系统内包含了ABCD四个微服务，这四个服务都是以集群模式构建的。雪崩问题：微服务之间相互调用，因为调用链中的一个服务故障

【Flink实战】玩转Flink里面核心的Sink Operator实战

🚀作者：“大数据小禅”🚀文章简介：玩转Flink里面核心的SinkOperator实战🚀欢迎小伙伴们点赞👍、收藏⭐、留言💬目录导航FlinkSinkOperator简介Flink核心知识SinkOperator速览Flink自定义的Sink连接Mysql存储商品订单案例实战FlinkSinkOperator简

uniapp：APP开发，后台保活

前言：在ios中，软件切换至后台、手机息屏，过了十来秒软件就会被系统挂起，APP内的任务就不能继续执行；在android中，默认情况下，软件在后台运行的时候，触发某些特定条件的情况下，会被杀掉进程。解决方案：以下方案均测试息屏后台运行两小时一、后台运行音频（无声音频）（一般）manifest.json配置：APP常用其

JavaScript：二进制数组【笔记】

二进制数组【ArrayBuffer对象、Type的Array视图和DataView视图】JavaScript操作二进制数据的一个接口。这些接口原本是和WebGL有关【WebGL是浏览器与显卡之间的通信接口】，为了满足JavaScript与显卡之间大量、实时数据交换，那么JavaScript和显卡之间的数据通信必须是二进

MYSQL 窗体汇总函数

如果我们想要汇总当天数据，当月数据，当年数据的。如果不懂窗体函数，可能会比较费劲，那小编就说了，我用java处理同样可以达到效果啊。可问题是。明明有现成的函数，为啥要用java处理，当然同时，java会不停的判断时间范围，严重影响性能。当我们掌握了一下函数使用时，①,提高工作效率②,防止过多bug③,提升项目性能④,适

热文推荐
  1. linux-gic中断分析

    linux-gic中断分析这里主要分析linuxkernel中GICv3中断控制器的代码(drivers/irqchip/irq-gic-v3.c)。一、设备树先来看下中断控制器的设备树信息：gic:interrupt-controller@3400000{compatible="arm,gic-v3";#interr

  2. Git分布式版本控制工具

    概念Git是一个分布式版本控制工具，主要用于管理开发过程中的源代码文件（Java类、xml文件、html页面等），在软件开发过程中被广泛使用。开发中的实际场景1.备份2.代码还原3.协同开发4.追溯问题代码的编写人和编写时间版本控制器的方式1.集中式版本控制工具版本库是集中存放在中央服务器的，team里每个人work时

  3. Qt（day1）

    思维导图Qt实现第一个web的基础页面#include"mywnd.h"#include"ui_mywnd.h"#include<QLabel>#include<QLineEdit>#include<qpushbutton.h>MyWnd::MyWnd(QWidget*parent):QMainWindow(paren

  4. kafka生产者异步发送、同步发送、回调异步发送，是什么情况？

    目录标题一、异步发送二、同步发送三、回调异步发送Kafka是一种分布式流处理平台，它是一种高吞吐量、可扩展、可持久化的消息队列系统，用于处理和存储实时流式数据。Kafka基于发布-订阅模式，采用了分布式、多副本、分区的架构。它允许生产者将数据以消息的形式发送到Kafka集群的一个或多个主题(topic)中，而消费者可以

  5. （五）kafka从入门到精通之topic介绍

    1、kafka简介Kafka是一个流行的分布式消息系统，它的核心是一个由多个节点组成的分布式集群。在Kafka中，数据被分割成多个小块，并通过一些复杂的算法在节点之间传递。这些小块被称为KafkaTopic。2、topic知识一个Topic是一组具有相同主题的消息。可以将Topic看作是一个数据仓库，在这个仓库中存储着

  6. 【Hash表】判断有没有重复元素-力扣 217

    💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kuan的首页,持续学习,不断总结,共同进步,活到老学到老导航檀越剑指大厂系列:全面总结java核心技术点,如集合,jvm,并发编程redis,kaf

  7. ETHERCAT转ETHERCAT协议网关

    JM-ECAT-ECAT产品介绍JM-ECAT-ECAT是自主研发的一款ETHERCAT从站功能的通讯网关。该产品主要功能是将2个ETHERCAT网络连接起来。本网关连接到ETHERCAT总线中做为从站使用。产品参数技术参数l网关做为ETHERCAT网络的从站，可以连接倍福、欧姆龙、基恩士等厂家的PLC。l带2个RJ4

  8. 从零开始学习软件测试-第44天笔记

    adb命令adb存在于androidsdk中全称：AndroidDebugBridge（安卓调试桥）只适用于android系统adb工作原理由client、server、daemon三部分组成client：运行在电脑中，用来发送adb命令server：运行在电脑中，用来管理client和daemon之间的通信daemo

  9. Twin-Builder—系统级多物理域数字孪生平台

    TwinBuilder是ANSYS公司系统仿真业务的核心产品，是一款跨学科多领域系统仿真软件和数字孪生平台。能够实现复杂系统的建模、仿真和验证，基于IIoT物联网平台对数字孪生体进行集成、部署与运行，在完成复杂系统功能、性能的验证和优化的同时，缩短开发时间和降低研发成本，并能够用于故障诊断，系统预测性维护，基于获得的运