【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、思路

路由思路

确保引入Vue.vue-router的js依赖

首先需要定义组件（就是展示不同的页面效果）

需要将不同的组件放入一个容器中（路由集合）

将路由集合组装成路由器

将路由挂载到Vue实例中

定义锚点

跳转

2.2、实例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由</title>
    <!--  jQuery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!--  vue.js-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    <!--    导入router js-->
    <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: '<div>这是一个首页</div>'
    });
    var Home = Vue.extend({
        template: '<div>这是一个介绍666</div>'
    });
    // 定义组件与路径对应关系
    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具有以下特点：

事件驱动：Node.js使用事件驱动的非阻塞I/O模型，使得在处理大量并发请求时效率更高。
单线程：Node.js采用单线程的方式运行，但通过事件循环机制和异步操作，能够处理大量并发请求，而不会阻塞其他操作。
跨平台：Node.js可以在多个平台上运行，包括Windows、Linux和 macOS。
轻量高效：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 配置环境变量

进入电脑的高级系统设置配置环境变量

新增NODE_HOME：找到你解压后的目录

修改PATH并在最后添加：%NODE_HOME%;%NODE_HOME%\node_global;

测试安装是否成功：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"
将步骤一创建的node_global(npm全局安装位置 )和node_cache(npm缓存路径)与npm联系起来

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

"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

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

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

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
静静的等待它加载，最后就是启动成功了

我的分享到这里就结束了，欢迎各位在评论区大家一起讨论！！！