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

痛定思痛。 2024-03-02 09:15 10阅读 0赞

## 一、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、实例 ####

<!DOCTYPE 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: '<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>

**效果演示**

![4c70d059e4c34dbb82ff5b8f00f7eb99.gif][]

## 二、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)![icon-default.png?t=N7T8][icon-default.png_t_N7T8]https://nodejs.org/zh-cn/download][_ Node.js _nodejs.org_icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_nodejs.org_zh-cn_download]
> 
> ![31741f87427c4cbe82ee3985bb4a6eac.png][]

#### 3.2、解压 ####

> 把下载好的Node.js解压到自己的路径里，后续不更改位置，我这里有两个版本，但是不影响，根据自己的需求来
> 
> ![5d80ec45843b41e3831ebfca272cce34.png][]
> 
> **再解压后的目录里面手动新建两个文件node\_global、node\_cache**
> 
> 新建目录说明  
> node\_global：npm全局安装位置  
> node\_cache：npm缓存路径
> 
> ![ce3368125ac14182a41bb80b8bd8321b.png][]

#### 3.3 配置环境变量 ####

> 进入电脑的高级系统设置配置环境变量
> 
> 1.  新增NODE\_HOME：找到你解压后的目录![223d6a6228c149009a8b2571d8da2ed8.png][]
> 2.  修改PATH并在最后添加：%NODE\_HOME%;%NODE\_HOME%\\node\_global;![15dc7808197e4e6ca5c0d106c30ad0c3.png][]
> 3.  测试安装是否成功：win+R 打开cmd窗口，输出如下命令会输出NodeJs和npm的版本号
>     
>     1.  node -v
>     2.  npm -v![961870aaa85f4e3b82fbb5f033c75258.png][]

> 有些电脑在配置环境变量的时候会生成**node\_global**一个文件夹，
> 
> 如果没有就需要自己手动新建一个**node\_global**的文件夹

![48bf70d0b59a4d5ebfe76d0a7b62f8be.png][]

#### 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文件夹里面，一个在用户里面![70bcadb81ff34086bfdecb64ae1b56f5.png][]![95347acc14434eb9b9cef98dc36ff154.png][]  
>

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

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

##### 3.5.1 --registry #####

>  *  设置淘宝源
>     
>         npm config set registry https://registry.npm.taobao.org/
>  *  查看源，可以看到设置过的所有的源
>     
>         npm config get registry
>     
>       
>     ![18e8af06a57945dfba3872d1f6d55d08.png][]

*  其实此步骤的内容就是将以下代码添加到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
>     
>     ![fedb87c1585a4eb9851dd31f5eaf7e73.png][]
>  *  以上命令执行完毕后，会生成如下文件  
>     %node\_home%\\node\_global\\node\_modules\\webpack
> 
> ![dcde2a183e3041c6871b0c37402bf69a.png][]
> 
> 注意：下载过程中出现warn不用管，出现Error，删掉下载的破碎文件重新下载

### 4、测试Node ###

> 找一个Node的项目，或者用自己的Node项目，我这里就用一个Node项目进行一个测试。
> 
> **进入我们Node项目的根目录按照以下图操作**  
>   
> ![7ec6491097ef4382a101b778c6e774ea.gif][]  
>   
> **进入npm i 命令之后等待它加载完成**  
>   
> ![a68ddf067a5b4ce68e09e46584b473e5.png][]
> 
> **可以看到所花费的时间**![b55a336a589f4072be6ea83ac8e85f67.png][]  
> 命令执行完后，项目的根目录下多了一个**node\_modules**文件夹，那里面就是从npm远程库里下载的模块，然后“安装”到你的项目中。![d72eab0befca40cbaad6720372dc5a2d.png][]
> 
>   
> 输入命令启动项目
> 
>     npm run dev
> 
> 静静的等待它加载，最后就是启动成功了
> 
> ![d72107ca46414ac991988f44d38a65b1.png][]

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

[4c70d059e4c34dbb82ff5b8f00f7eb99.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/ad7ad45a1e07481b941597f0b85b84c6.png
[icon-default.png_t_N7T8]: https://csdnimg.cn/release/blog_editor_html/release2.3.6/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N7T8
[_ Node.js _nodejs.org_icon-default.png_t_N7T8_icon-default.png_t_N7T8_https_nodejs.org_zh-cn_download]: https://nodejs.org/zh-cn/download
[31741f87427c4cbe82ee3985bb4a6eac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/59b758168de44b01b2c3e40e1f3dcc6e.png
[5d80ec45843b41e3831ebfca272cce34.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/3163d810b053411495c7143887995f36.png
[ce3368125ac14182a41bb80b8bd8321b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/2a254417bfc74a20a51121e1bf6d47f4.png
[223d6a6228c149009a8b2571d8da2ed8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/ccfc68f300894a7a89786d86615e1a46.png
[15dc7808197e4e6ca5c0d106c30ad0c3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/1642e698a9dc4e219a79909bfd149e62.png
[961870aaa85f4e3b82fbb5f033c75258.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/b904d71b2f6f412e9978976739dce25c.png
[48bf70d0b59a4d5ebfe76d0a7b62f8be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/9fe2ae3ffa874fbc9223ad8950acd981.png
[70bcadb81ff34086bfdecb64ae1b56f5.png]: https://img-blog.csdnimg.cn/70bcadb81ff34086bfdecb64ae1b56f5.png
[95347acc14434eb9b9cef98dc36ff154.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/4b9c00d749594639ac6625c0ea2c442d.png
[18e8af06a57945dfba3872d1f6d55d08.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/c380decb3cb74809b3b155b7cd393267.png
[fedb87c1585a4eb9851dd31f5eaf7e73.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/2775dcec40614fa3a4c24ecdd1d85e0b.png
[dcde2a183e3041c6871b0c37402bf69a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/279bec6bc1094364bd457fe113281d75.png
[7ec6491097ef4382a101b778c6e774ea.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/0a74578f90a044a884292b32a50ef3c3.png
[a68ddf067a5b4ce68e09e46584b473e5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/c7a30db0a5e74b669b9563692f44aed8.png
[b55a336a589f4072be6ea83ac8e85f67.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/0596577cc50149c198e8f6a066d2c065.png
[d72eab0befca40cbaad6720372dc5a2d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/1cda403fe5a546698c1a4ec114ca38b4.png
[d72107ca46414ac991988f44d38a65b1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/1da8cfb12b7a48f298ed4a7d144f4132.png