Vue路由和Node.js环境搭建

已于 2023-09-22 10:39:57 修改
阅读量974 收藏 1
点赞数
文章标签： vue.js node.js 前端
于 2023-09-21 11:20:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TestXzing/article/details/133122827
版权

文章目录


在这里插入图片描述

一、vue路由

1.1 简介

Vue 路由是 Vue.js 框架中用于实现单页面应用（SPA）的路由管理工具。它允许你在应用中定义不同的路由，并根据用户的操作动态地切换视图，而无需重新加载整个页面。

在 Vue 路由中，你可以定义路由规则，指定每个路由对应的组件，并在需要时进行导航。Vue 路由提供了一些核心的概念和组件，包括路由器（router）、路由视图（router-view）和路由链接（router-link）。

  • 路由器（router）是 Vue 路由的核心，它负责管理应用的路由规则，并根据用户的导航操作来切换视图。你可以在路由器中定义路由规则，指定每个路由对应的组件，并配置其他参数，如路由守卫、路由模式等。
  • 路由视图（router-view）是用于显示当前路由对应组件的容器。当用户导航到不同的路由时，路由视图会根据当前路由的配置动态地渲染相应的组件。
  • 路由链接（router-link）是用于在应用中生成导航链接的组件。你可以使用路由链接来创建导航菜单、导航按钮等，它会根据配置的路由规则生成正确的链接，并在用户点击时触发路由切换。

1.2 SPA

SPA 是单页面应用（Single Page Application）的缩写。它是一种 Web 应用程序的架构模式，通过在加载初始页面后，动态地更新页面的部分内容，而不是每次用户操作都重新加载整个页面。

单页面应用通过使用 JavaScript 和 AJAX 技术，将应用的不同部分组织为组件，并在用户进行导航时，动态地更新组件的内容，而不需要重新加载整个页面。

客户端 vs. 服务端路由

服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时，浏览器会从服务端获得全新的 HTML，然后重新加载整个页面。

然而，在单页面应用中，客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下，因为这类场景下用户通常会在很长的一段时间中做出多次交互。这种方式可以提供更快的用户响应时间，减少不必要的网络请求，同时也提供了更流畅的用户体验。

1.3 实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由</title>
		<!-- 1、确保引入Vue.vue-router的js依赖 -->
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
	</head>
	<body>
		<div id="app">

			<h1>{{msg}}</h1>
			<!-- 6、定义锚点 -->
			<router-link to='/home'>首页</router-link>
			<router-link to='/about'>关于</router-link>
			 <!-- 使用RouterLink组件导航. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
       <!-- 通过传入 `to` 属性指定链接. -->
			<router-view> </router-view>
			<!-- 使用RouterView组件显示. -->
		</div>
	</body>
	<script>
		/* 2、定义组件 */
		var home = Vue.extend({
			template: '<div>首页内容：路由</div>'
		});
		var about = Vue.extend({
			template: '<div>路由相关介绍</div>'
		});
		/* 注1：extend是构造一个组件的语法器. 你给它参数，他给你一个组件,然后这个组件
           你可以作用到Vue.component这个全局注册方法里，也可以在任意vue模板里使用car组件 */
           
		/* 	3、需要将不同的组件放入一个容器中（路由集合） */
		var routes = [{
			component: home,
			path: '/home'
		}, {
			component: about,
			path: '/about'
		}]
		/* 4、将路由集合组装成路由器 */
		var router = new VueRouter({
			routes
		});
		/* 5、将路由挂载到Vue实例中 */
		new Vue({
			el: "#app",
			router,
			data() {
				return {
					msg: '路由'
				};
			}
		});
	</script>
</html>

在这里插入图片描述

二、Node.js环境搭建

2.1 Node.js简介

Node.js是一个开源的、跨平台的JavaScript运行时环境，它允许开发者使用JavaScript语言编写服务器端的应用程序。传统上，JavaScript主要用于在浏览器中编写前端代码，但是Node.js的出现使得开发者可以将JavaScript应用于服务器端开发。

Node.js基于Chrome V8引擎，它提供了一组丰富的内置库和模块，使得开发者可以轻松地构建高性能、可扩展的网络应用程序。Node.js采用事件驱动、非阻塞I/O模型，这意味着它可以处理大量并发请求而不会阻塞其他操作，从而提供了出色的性能和可伸缩性。

Node.js的应用场景非常广泛，包括构建Web服务器、API服务器、实时应用程序、命令行工具等。它还可以与各种数据库进行交互，如MongoDB、MySQL等，以及与其他服务进行通信，如HTTP、TCP、UDP等。

Node.js–>JavaScript运行环境，开发语言是：javascript
J2EE -->Java运行环境， 开发语言是java

2.2 npm

npm 是Node Package Manager的缩写，是一个用于管理和共享JavaScript代码的工具。它是Node.js的默认包管理器，用于安装、发布和管理JavaScript模块。

通过npm，开发者可以轻松地安装和更新依赖项，以及共享自己编写的代码供他人使用。npm提供了一个庞大的开源代码库，开发者可以从中获取各种功能强大的模块，以加快开发速度并提高代码质量。

类似于maven

2.3 环境搭建

2.3.1 下载解压

官网

Node有两个版本线: LTS是长期维护的稳定版本Current是新特性版本
本章使用的是：node-v18.16.1-win-x64

下载后解压到指定文件夹就行，并在解压后的目录下建立node_global和node_cache这两个目录
在这里插入图片描述

注1：新建目录说明
node_global：npm全局安装位置
node_cache：npm缓存路径

注2：本教程是将文件解压到D:\develop\node-v18.16.1-win-x64，后面都以此为例，实际开发中请修改成自己的解压目录

2.3.2 配置环境变量

与配置java非常相似

新增NODE_HOME，值为：D:\develop\node-v18.16.1-win-x64
在这里插入图片描述
在PATH添加：%NODE_HOME%与%NODE_HOME%\node_global
在这里插入图片描述
测试，在cmd窗口输入node -v与npm -v ，出现版本即表示配置成功
在这里插入图片描述

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

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

  • npm config set cache “D:\develop\node-v18.16.1-win-x64\node_cache”

  • npm config set prefix “D:\develop\node-v18.16.1-win-x64\node_global”

注1：将步骤一创建的node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来
注2：如果执行命令卡死，可以删除C:\Users\用户名.npmrc 后重新执行。（用户名：为当前电脑的用户名）
注3：“D:\develop\node-v18.16.1-win-x64”，双引号不能少

2.3.4 修改npm镜像提高下载速度

可以使用 cnpm 或 直接设置 --registry ，推荐设置 --registry

  • –registry

       ## 设置淘宝源

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

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

   npm config get registry

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

  • 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/

  • 查看npm全局路径设置情况

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

   npm install webpack -g

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

   %node_home%\node_global\node_modules\webpack
   
   注意：下载过程中出现warn不用管，出现Error，删掉下载的破碎文件重新下载

在这里插入图片描述
在这里插入图片描述

2.4 运行项目

在项目文件中打开cmd，输入 nmp i
在这里插入图片描述

命令执行完项目文件中会出现node_modules文件
在这里插入图片描述

命令执行完后，你会发现，项目的根目录下多了一个node_modules文件夹，

那里面就是从npm远程库里下载的模块，然后“安装”到你的项目中，

 此步骤，可理解成修改maven的pom文件添加依赖，然后maven再从中央仓库下载依赖

然后输入 npm run dev
在这里插入图片描述
在这里插入图片描述

许潜行
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
安装node配置环境变量，安装yarn，安装vue脚手架，vue搭建项目流程
军火库
01-30 392
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
基于Vue.js和Node.js音乐 播放器的设计与实现
04-18
在本文中，我们将深入探讨如何使用Vue.js和Node.js设计并实现一个音乐播放器。Vue.js是一个轻量级的前端JavaScript框架，它以其简洁的API和高效的组件化开发模式受到开发者喜爱。而Node.js则是一个基于Chrome V8引擎...
Node.js-简单路由器控制
张新丁
08-22 363
render.js: //引入模块 let http = require("http"); let fs = require("fs"); //创建HTTP服务 http.createServer(function (req,res) { if (req.url === "/favicon.ico"){ return false; } if (req...
Node.js（三）路由器、中间件、MySQL模块、RESTful接口
商务合作 | 共同学习 | 携手共进
08-10 1024
Node.js：路由器、中间件、MySQL模块、RESTFul接口
解决npm安装vue-router版本过高报错及node Sass 版本过高导致 TypeError: this.getOptions is not a function at Object报错问题
weixin_48451408的博客
07-20 1201
解决vue-router，node Sass版本过高于node.js不兼容运行报错的问题。1.首先找到package.json下的sass。
Node.Js - 路由Router
菜鸟成长日记
06-17 807
参考博客:Node初学者入门，一本全面的NodeJS教程 Node.Js的环境搭建略过，关于路由需要以下4个文件： server.jsindex.jsrouter.jsrequestHandler.js //server.js var http = require("http"); var url = require("url"); function start(rou
基于node.js与vue.js的校园考试系统源码.zip
05-18
1. **Node.js**: Node.js是一个基于Chrome V8引擎的JavaScript运行环境，用于构建高性能的网络应用。在本项目中，Node.js被用来搭建服务器，处理HTTP请求，与数据库进行交互，实现数据的增删查改。 2. **Express...
基于vue+node.js制作猫眼电影基本网页
06-16
本文将详细讲解如何基于Vue.js和Node.js技术栈构建一个简易版的猫眼电影网站，适合于大学生在软件工程课程中进行项目实践或作为毕业设计参考。我们将涵盖Vue.js的基本概念、Node.js后端开发以及如何整合这两个技术来...
Vue.js和node.js安装包(windows下64位)
01-03
在Windows环境下安装Vue.js和Node.js，首先需要下载对应的安装包。对于Node.js，访问官方网站下载适用于64位Windows系统的安装程序，运行并按照向导提示进行安装。安装过程中可以自定义安装路径，同时可以选择是否将...
vue-cli4.x环境搭建
01-08
在开始搭建 Vue CLI 4.x 环境之前，首先确保已安装 Node.js。你可以通过在终端运行 `node -v` 来检查当前的 Node.js 版本。推荐使用稳定版的 Node.js，例如 v12.13.0。Vue CLI 是基于 Node.js 的，所以需要先安装它...
nodejs -Router
weixin_30674525的博客
09-04 261
Node用 request事件来处理请求响应，事件内使用分支语句处理不同路径的请求，而 Express封装了这些操作，使得代码简洁优雅 但如果请求路径变多，都写在 app.js 文件里的话，就会让这个入口文件变得臃肿且难维护 加上 Node 是模块化编程，所以应该将这些 app.get() 和 app.post() 都抽取出来作为一个路由模块 router.js 方式一，ro...
node.js浅入深出---之事件循环机制
weixin_34363171的博客
06-06 132
var http = require("http"); var server = http.createServer(function(req,res){ //得到url var userurl = req.url; res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"}) //substr函数来判断此时的开头 if(useru...
NodeJs搭建前端Vue开发环境需要的工具和框架
speedwalkman的专栏
02-07 1348
NodeJs搭建前端Vue开发环境需要的工具和框架
Node.js中Router的使用
最新发布
jkjkikik的博客
03-30 1495
在Node.js中，Router是Express框架提供的一种用于组织路由的方式，是express中创建的一个对象专门用于放置路由文件，通过module.exports导出供外部使用。router实际上是一个中间件，我们可以把在它身上绑定各种路由以及其他的中间件。通过使用Router，你可以将相关的路由组织在一起，从而更好地管理你的应用程序的路由。下面是关于如何在Node.js中使用Router在Router实例上定义你的路由。你可以使用等方法来定义相应的HTTP动词的路由。
Vue路由及Node.js环境搭建
kissship的博客
09-20 764
Vue路由是指使用Vue Router插件来管理前端应用程序的导航和页面路由的过程。它允许你在单页面应用程序（SPA）中定义不同的路由路径，并将每个路径映射到相应的组件。通过使用Vue路由，你可以根据URL的变化加载不同的组件或视图，并且可以通过导航链接（例如点击导航菜单或按钮）在不同的页面之间进行切换。Vue路由的核心目标是提供良好的用户体验，使用户能够在应用程序中自由导航和浏览内容，而不需要每次都重新加载整个页面。
node.js路由Router的设置
weixin_47556679的博客
03-18 1306
node.js路由的学习笔记
Nodejs学习（二）--路由（router）
Nicolaszsh的博客
10-15 2695
Nodejs
node中Router的使用
m0_63498341的博客
06-19 227
创建独立的JS文件（homeRouter.js）主文件。
NodeJS路由(server.js + router.js)
weixin_30699443的博客
03-29 130
手动路由... server.js 创建http服务器，解析pathname，传递给router处理。 var http = require("http"); var url = require("url"); function start(route) { function onRequest(request, response) { var...
npm vue路由安装
09-07
要安装Vue路由，您可以按照以下步骤进行操作： 1. 打开您的项目，然后在项目的根目录下打开命令行或终端。 2. 输入以下命令来安装全局路由： ``` npm install vue-router -S ``` 这将会安装Vue路由插件并将其添加到项目的依赖中。 3. 在项目的`src`目录下创建一个名为`router`的文件夹，并在其中添加一个名为`index.js`的文件。这个文件将作为总路由文件。 4. 在`index.js`文件中，引入Vue和Vue路由插件： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' ``` 5. 使用路由中间件： ```javascript Vue.use(VueRouter) ``` 6. 在`index.js`文件中，定义路由表和路由规则。您可以根据需求自由添加路由规则。例如： ```javascript const index = () => import('../page/index.vue') const routes = [ { path: '/', component: index, meta: { title: '首页' } }, ] ``` 7. 创建一个新的Vue路由实例，并设置路由模式和基本URL： ```javascript const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) ``` 8. 在`main.js`文件中引入刚刚创建的`index.js`文件，并将路由实例添加到Vue实例中： ```javascript import router from './router' new Vue({ router, // other configurations }) ``` 9. 在您的`App.vue`文件中，添加路由出口，即 `<router-view></router-view>` 标记。这将作为路由组件的渲染区域，根据URL的不同，不同的组件将会被渲染出来： ```html <template> <div id="app"> <!-- other content --> <router-view></router-view> </div> </template> ``` 这样，您就成功安装了Vue路由，并将其集成到了您的项目中。现在，您可以根据需要定义和使用各种路由规则来实现页面切换和导航功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值