【Vue+NodeJS】vue路由及NodeJS环境搭建(Windows版)

本文涉及的产品
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
可观测可视化 Grafana 版,10个用户账号 1个月
简介: Node.js是一个基于Chrome V8引擎构建的JavaScript运行时环境使用了一个事件驱动、非阻塞式I/O 的模型;可以让JavaScript在服务器端运行,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。相对于传统的JavaScript运行环境(如浏览器),Node.js具有以下特点:事件驱动:Node.js使用事件驱动的非阻塞I/O模型,使得在处理大量并发请求时效率更高。单线程。


一、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>
              <!--  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>

          image.gif

          效果演示

          image.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版本的

            image.gif编辑

             3.2、解压

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

            image.gif编辑

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

            新建目录说明

                      node_global:npm全局安装位置

                      node_cache:npm缓存路径

            image.gif编辑

             3.3 配置环境变量

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

              1. 新增NODE_HOME:找到你解压后的目录image.gif编辑
              2. 修改PATH并在最后添加:%NODE_HOME%;%NODE_HOME%\node_global;image.gif编辑
              3. 测试安装是否成功:win+R 打开cmd窗口,输出如下命令会输出NodeJs和npm的版本号
                1. node -v
                2. npm -vimage.gif编辑

                  有些电脑在配置环境变量的时候会生成node_global一个文件夹,

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

                  image.gif编辑

                  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"
                  image.gif

                  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"
                  image.gif
                    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文件夹里面,一个在用户里面image.gif编辑image.gif编辑

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

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

                         3.5.1 --registry

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

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

                             3.5.2 cnpm

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

                          image.gif

                            1. cnpm安装完成后,以后就可以用cnpm命令代替npm命令, 此时npm还是会用官方镜像,cnpm会用国内镜像
                            2. 如果要恢复成原来的设置,执行如下:
                            npm config set registry https://registry.npmjs.org/
                            1. image.gif

                            3.6 验证安装结果

                            查看npm全局路径设置情况

                              • 此步骤随便全局安装一个模块就可以测评
                              npm install webpack -g
                              • image.gifimage.gif编辑
                              • 以上命令执行完毕后,会生成如下文件
                                %node_home%\node_global\node_modules\webpack

                              image.gif编辑

                                      注意:下载过程中出现warn不用管,出现Error,删掉下载的破碎文件重新下载

                              4、测试Node

                              找一个Node的项目,或者用自己的Node项目,我这里就用一个Node项目进行一个测试。

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


                              image.gif编辑


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


                              image.gif编辑

                              可以看到所花费的时间image.gif编辑

                              命令执行完后,项目的根目录下多了一个node_modules文件夹,那里面就是从npm远程库里下载的模块,然后“安装”到你的项目中。image.gif编辑

                              输入命令启动项目

                              npm run dev
                              image.gif

                              静静的等待它加载,最后就是启动成功了

                              image.gif编辑

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

                              相关文章
                              |
                              1月前
                              |
                              前端开发
                              前端毕业设计|基于Vue+Nodejs实现游戏资讯平台(二)
                              前端毕业设计|基于Vue+Nodejs实现游戏资讯平台
                              |
                              25天前
                              |
                              JavaScript
                              Vue中的路由懒加载是什么?如何实现?
                              Vue中的路由懒加载是什么?如何实现?
                              21 1
                              |
                              19天前
                              |
                              JavaScript
                              Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
                              Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
                              16 0
                              |
                              15天前
                              |
                              Web App开发 JavaScript 前端开发
                              构建现代Web应用:Vue.js与Node.js的完美结合
                              在当今快速发展的Web技术领域,选择合适的技术栈对于开发高效、响应迅速的现代Web应用至关重要。本文深入探讨了Vue.js和Node.js结合使用的优势,以及如何利用这两种技术构建一个完整的前后端分离的Web应用。不同于传统的摘要,我们将通过一个实际的项目示例,展示从搭建项目架构到实现具体功能的整个过程,着重介绍了Vue.js在构建用户友好的界面方面的能力,以及Node.js在处理服务器端逻辑和数据库交互中的高效性。通过本文,读者不仅能够理解Vue.js与Node.js各自的特点,还能学习到如何将这两种技术融合应用,以提升Web应用的开发效率和用户体验。
                              |
                              15天前
                              Vue3使用路由及配置vite.alias简化导入写法
                              Vue3使用路由及配置vite.alias简化导入写法
                              19 0
                              |
                              18天前
                              |
                              JavaScript 前端开发 API
                              从Vue 2到Vue 3:深入了解路由配置的变化与升级建议
                              欢迎阅读本篇文章,我们将带您深入探索Vue 2和Vue 3的路由配置。在现代前端开发中,路由是构建交互式Web应用程序不可或缺的一部分。Vue.js作为一种流行的JavaScript框架,在版本2和版本3之间进行了重大改进和升级。
                              |
                              21天前
                              |
                              存储 Web App开发 JavaScript
                              第十二章:vue路由进阶使用
                              第十二章:vue路由进阶使用
                              41 0
                              |
                              21天前
                              |
                              JavaScript 前端开发 网络架构
                              第十一章:vue路由配置01基础
                              第十一章:vue路由配置01基础
                              39 0
                              |
                              24天前
                              |
                              JavaScript
                              Vue3 + Typescript + Node.js 搭建elementUI使用环境
                              Vue3 + Typescript + Node.js 搭建elementUI使用环境
                              14 0
                              |
                              26天前
                              |
                              JavaScript
                              Vue中的路由导航守卫有哪些?它们的执行顺序是什么?
                              Vue中的路由导航守卫有哪些?它们的执行顺序是什么?
                              17 6

                              相关产品

                            • 云消息队列 MQ
                            • 云消息队列 Kafka 版
                            • 微服务引擎