【Vue+NodeJS】vue路由及NodeJS环境搭建（Windows版）

【Vue+NodeJS】vue路由及NodeJS环境搭建（Windows版）
一、Vue路由

1、什么是Vue路由

        Vue路由是Vue.js框架中用于实现单页面应用（SPA）的路由管理器。它允许您创建多个页面之间的导航，并通过URL的变化来动态加载不同的组件。Vue路由通过声明式的方式定义页面的导航规则，并提供了一些内置的导航组件和功能，如路由链接、路由视图和导航守卫。

        通过Vue路由，您可以定义不同路径对应的组件，然后在页面中使用路由链接来触发相应的页面切换。Vue路由还支持动态路由参数、查询参数和嵌套路由，使您能够构建复杂的应用程序导航结构和页面间的切换逻辑。

        Vue路由还提供了导航守卫的功能，可以在路由切换之前或之后执行一些逻辑操作，如验证用户身份、处理路由过渡效果等。

        Vue路由是Vue.js框架中实现页面导航和组件切换的核心工具，使得构建交互式、流畅的单页面应用变得更加简单和高效。

1. 1、SPA是什么

   单页Web应用（single page application，SPA），就是只有一个Web页面的应用，

   是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序
- 单页面应用程序：
只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
- 传统多页面应用程序：
对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面
- 优势
减少了请求体积，加快页面响应速度，降低了对服务器的压力，更好的用户体验
2、Vue路由思路及实例

2.1、思路
路由思路
1. 确保引入Vue.vue-router的js依赖
2. 首先需要定义组件（就是展示不同的页面效果）
3. 需要将不同的组件放入一个容器中（路由集合）
4. 将路由集合组装成路由器
5. 将路由挂载到Vue实例中
6. 定义锚点
7. 跳转
2.2、实例
```
html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由title>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js">script>
    
    <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>
head>
<body>
<div id="app">
    
    <router-link to="/index">首页router-link>
 
    <router-link to="/home">介绍router-link>
 
    
    <router-view>router-view>
div>
body>
<script type="text/javascript">
    // 定义两个组件
 
    var Index = Vue.extend({
        template: '这是一个首页
'
    });
    var Home = Vue.extend({
        template: '这是一个介绍666
'
    });
    // 定义组件与路径对应关系
    var routes = [{
        component: Index, path: '/index'
    }, {
        component: Home, path: '/home'
    }];
    // 通过路由关系获取路由对象 router
    var router = new VueRouter({routes});
    new Vue({
        el: '#app',
    // 将路由对象挂载到vue实例中
        router
    })
script>
html>
```
效果演示

二、Node环境搭建

1、什么是Node.js

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

相对于传统的JavaScript运行环境（如浏览器），Node.js具有以下特点：
1. 事件驱动：Node.js使用事件驱动的非阻塞I/O模型，使得在处理大量并发请求时效率更高。
2. 单线程：Node.js采用单线程的方式运行，但通过事件循环机制和异步操作，能够处理大量并发请求，而不会阻塞其他操作。
3. 跨平台：Node.js可以在多个平台上运行，包括Windows、Linux和 macOS。
4. 轻量高效：Node.js的运行时环境相比传统的服务器端语言如Java和PHP，具有更小的内存占用和更高的处理性能。
Node.js可以用于构建各种类型的应用程序，包括网站后端、命令行工具、实时通信应用、API服务器等。它提供了丰富的标准库和第三方模块，使得开发者能够快速构建高性能的应用程序。

总结

Node.js是一个用于在服务器端运行JavaScript的运行时环境，通过其事件驱动的非阻塞I/O模型，使得构建高性能的网络应用变得更加简单和高效。

2、npm是什么

        npm其实是Node.js的包管理工具（package manager）。它是一个用于管理和分享开源JavaScript代码模块的工具。

        通过npm，开发者可以方便地在自己的项目中引入、安装、更新和删除各种JavaScript模块。npm提供了一个巨大的模块仓库，其中包含了数以万计的开源模块，涵盖了各种功能和用途。开发者可以通过npm搜索需要的模块，并将其添加到自己的项目中。

        使用npm管理模块非常简单。通过在命令行中输入相应的命令，可以完成模块的安装、卸载、更新等操作。npm还提供了一套完整的依赖管理系统，可以自动解决模块之间的依赖关系，确保项目能够正常运行。

        npm不仅仅是一个模块管理工具，它还是一个社区和生态系统。开发者可以将自己的JavaScript模块发布到npm仓库，供其他开发者使用和贡献。通过npm，开发者能够轻松地与其他开发者共享代码、解决问题和学习开源项目。

        总结：npm是Node.js的包管理器，用于管理和分享JavaScript代码模块。它简化了模块的安装和管理过程，使得 JavaScript 开发更加高效和便捷。

3、环境搭建

3.1、下载node.js

下载对应的版本，我用的就是Windows版本的下载 | Node.js (nodejs.org)https://nodejs.org/zh-cn/download

3.2、解压

把下载好的Node.js解压到自己的路径里，后续不更改位置，我这里有两个版本，但是不影响，根据自己的需求来

再解压后的目录里面手动新建两个文件node_global、node_cache

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

3.3 配置环境变量
进入电脑的高级系统设置配置环境变量
1. 新增NODE_HOME：找到你解压后的目录
2. 修改PATH并在最后添加：%NODE_HOME%;%NODE_HOME%\node_global;
3. 测试安装是否成功：win+R 打开cmd窗口，输出如下命令会输出NodeJs和npm的版本号
  node -v
  npm -v
有些电脑在配置环境变量的时候会生成node_global一个文件夹，

如果没有就需要自己手动新建一个node_global的文件夹

3.4、配置npm全局模块路径和cache默认安装位置
打开cmd，分开执行如下命令：

npm config set cache "你的安装路径\node_cache"
```
npm config set cache "D:\zking App\Node.js\node-v18.16.1-win-x64\node-v18.16.1-win-x64\node_cache"
```
npm config set prefix "你的安装路径\node_global"
```
npm config set prefix "D:\zking App\Node.js\node-v18.16.1-win-x64\node-v18.16.1-win-x64\node_global"
```
1. 将步骤一创建的node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来
2. 如果执行命令卡死，可以删除C:\Users\用户名\.npmrc 后重新执行。（用户名：为当前电脑的用户名）
3. "D:\zking App\Node.js\node-v18.16.1-win-x64\node-v18.16.1-win-x64\node_global"，双引号不能少
- 执行完第一个命令之后会生成两个文件，一个在node_cache文件夹里面，一个在用户里面
3.5 修改npm镜像提高下载速度

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

3.5.1 --registry
- 设置淘宝源
  npm config set registry https://registry.npm.taobao.org/
- 查看源，可以看到设置过的所有的源
  npm config get registry
- 其实此步骤的内容就是将以下代码添加到C:\Users\用户名\.npmrc文件中
registry=https://registry.npm.taobao.org

3.5.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/
```
3.6 验证安装结果
查看npm全局路径设置情况
- 此步骤随便全局安装一个模块就可以测评
  npm install webpack -g
- 以上命令执行完毕后，会生成如下文件
  %node_home%\node_global\node_modules\webpack
注意：下载过程中出现warn不用管，出现Error，删掉下载的破碎文件重新下载
4、测试Node
找一个Node的项目，或者用自己的Node项目，我这里就用一个Node项目进行一个测试。

进入我们Node项目的根目录按照以下图操作

进入npm i 命令之后等待它加载完成

可以看到所花费的时间
命令执行完后，项目的根目录下多了一个node_modules文件夹，那里面就是从npm远程库里下载的模块，然后“安装”到你的项目中。

输入命令启动项目
```
npm run dev
```
静静的等待它加载，最后就是启动成功了
我的分享到这里就结束了，欢迎各位在评论区大家一起讨论！！！
相关阅读:
基于OpenVINO 2022.1 POT API实现YOLOv5模型INT8量化
 @Zabbix6.2安装部署【 Red Hat Enterprise Linux 8.2】
三十分钟学会SCALA
抖音小店：庞大用户基数与强大商业化能力的未来发展
 举个栗子！Tableau 技巧（236）：创建简单的参数样式
 CocosCreator3.8研究笔记（三）CocosCreator 项目结构说明及编辑器的简单使用
 AI入门指南(二)：算法、训练、模型、大模型是什么？
【NodeJs-5天学习】第二天篇④ ——项目模块化
 [附源码]java毕业设计学生信息管理系统
 Springboot 打成jar包后结合idea remote 远程debug
原文地址：https://blog.csdn.net/weixin_74383330/article/details/133086921

一、Vue路由

1、什么是Vue路由

1. 1、SPA是什么

2、Vue路由思路及实例

2.1、思路

2.2、实例

二、Node环境搭建

1、什么是Node.js

2、npm是什么

3、环境搭建

3.1、下载node.js

3.2、解压

3.3 配置环境变量

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

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

3.5.1 --registry

3.5.2 cnpm

3.6 验证安装结果

4、测试Node