Vue路由及Node.js环境搭建

简介: Vue路由及Node.js环境搭建

一.Vue路由

1.1 定义

Vue路由是指使用Vue Router插件来管理前端应用程序的导航和页面路由的过        程。它允许你在单页面应用程序(SPA)中定义不同的路由路径,并将每个路径映射到相应的组件。


通过使用Vue路由,你可以根据URL的变化加载不同的组件或视图,并且可以通过导航链接(例如点击导航菜单或按钮)在不同的页面之间进行切换。Vue路由的核心目标是提供良好的用户体验,使用户能够在应用程序中自由导航和浏览内容,而不需要每次都重新加载整个页面。


1.2 应用领域

Vue路由在以下领域有广泛的应用:

  • 单页面应用(SPA):Vue路由最常用的场景是在单页面应用程序中进行页面导航和路由管理。SPA指的是一种无需刷新整个页面的应用,通过路由切换来加载和显示不同的页面内容。Vue路由提供了轻量级、快速响应的路由解决方案,使开发者可以根据不同的路径加载相应的组件,从而实现整个应用程序的路由功能。
  • 多页面应用(MPA):虽然Vue的主要应用是在单页面应用中,但Vue路由也可以在多页面应用中使用。在这种情况下,Vue路由可以帮助你为每个页面创建独立的路由,并通过路由规则控制页面之间的导航。
  • 前端导航与页面跳转:Vue路由可以帮助你管理页面之间的导航和跳转。通过定义不同的路由路径和对应的组件,你可以使用导航链接或编程方式在应用程序中导航到指定的页面。这在构建用户友好的前端导航和页面跳转功能时非常有用。
  • 权限控制和路由守卫:Vue路由提供了导航守卫功能,可以用于实现权限控制和页面访问权限的验证。你可以使用导航守卫钩子函数,在用户进行路由切换前后执行相应的逻辑。这样你可以根据用户的登录状态、角色或其他条件决定是否允许访问某个页面。

Vue路由在构建现代Web应用程序中起着关键的作用。它使得前端开发者可以轻松地管理页面导航、实现前端路由和构建交互性强的单页面应用程序。无论是开发单页面应用还是多页面应用,Vue路由都可以提供强大的路由功能和良好的用户体验。

1.3 代码展示

代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 1.导入路由所需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>
    <title>路由</title>
  </head>
  <body>
    <div id="app">
        {{name}}
        <!-- 6.触发路由事件的按钮 -->
        <router-link to="/home">首页</router-link>
        <router-link to="/about">关于</router-link>
        <!-- 7.定义锚点,路由内容 -->
        <router-view></router-view>
      </div>
    </body>
    <script type="text/javascript">
      // 2.定义两个组件
      const Home = Vue.extend({
        template:'<div>网站</div>'
      });
      const About = Vue.extend({
        template:'<div>欢迎来到我的网站</div>'
      });
      // 3.定义组件与路径对应关系
      let routes = [{
        component:Home,
        path:'/home'
        },{
        component:About,
        path:'/about'
        }];
        // 4.通过路由关系获取路由对象router
        const router = new VueRouter({routes});
        //5.将路由对象挂在到vue实例中
      new Vue({
        el: '#app',
        router,
        data() {
          return {
            name:'马牛逼'
          };
        }
      })
    </script>
</html>

演示效果如下:

二、Node.js

Node.js并不是一个传统意义上的框架或库,而是一个运行时环境。它提供了一组核心模块,包括文件系统、网络、操作系统等模块,方便开发者进行各种服务器端任务,如创建Web服务器、处理HTTP请求、进行文件操作等。同时,Node.js也支持通过第三方模块来扩展其功能,使得开发者能够轻松地使用各种功能丰富的模块来构建复杂的应用程序。

2.1 定义

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境,可以在服务器端运行JavaScript代码。它使用事件驱动、非阻塞I/O模型,使得它能够高效地处理并发请求。Node.js的设计目标是为了构建可扩展的网络应用程序,它可以处理大量并发连接,并具有出色的性能表现。


Node.js是一个基于Chrome V8引擎的JavaScript运行时环境,可以在服务器端运行JavaScript代码。它使用事件驱动、非阻塞I/O模型,使得它能够高效地处理并发请求。Node.js的设计目标是为了构建可扩展的网络应用程序,它可以处理大量并发连接,并具有出色的性能表现。

2.2 特点

Node.js的主要特点包括:

  • 高性能:Node.js使用非阻塞、事件驱动的I/O模型,使得它能够高效地处理大量并发请求,并具有出色的性能表现。
  • 跨平台:Node.js可以在多个操作系统上运行,包括Windows、MacOS和Linux等,使得开发者可以在不同的平台上使用相同的代码进行开发。
  • JavaScript语言:Node.js使用JavaScript作为开发语言,使得前端开发人员可以在服务器端使用相同的语言进行开发,减少了学习成本和开发团队之间的技术转换。
  • 可扩展性:Node.js支持模块化开发,通过第三方模块可以轻松地扩展其功能,满足各种不同场景下的需求。
  • 社区支持:Node.js拥有庞大而活跃的社区,提供了大量的开源模块,方便开发者解决常见问题并加快开发速度。

Node.js是一个强大的JavaScript运行时环境,它使得开发者可以使用JavaScript在服务器端构建高性能、可扩展的网络应用程序。它的非阻塞I/O模型和事件驱动机制使得它在处理大量并发请求时非常高效,适合构建实时应用、Web服务器、API服务等各种类型的应用程序。  

三.Node.js安装与配置

3.1.下载

下载 nodeJS 资源包 : 下载 | Node.js

注1:Node有两个版本线: LTS是长期维护的稳定版本Current是新特性版本

3.2.安装

将文件解压到指定位置,并在解压后的目录下建立node_globalnode_cache这两个目录

node_global:npm全局安装位置

node_cache:npm缓存路径

如图 :

3.3.环境搭建

打开设置 -> 系统 -> 系统信息 -> 高级系统设置 -> 环境变量 -> 在系统变量中点击新建


新增一个环境变量


变量名 : NODE_HOME


变量值 :


下载后解压的指定目录 如( D:\temp\node\node-v10.15.3-win-x64\node-v10.15.3-win-x64 )


操作如图 :

在系统变量中找到名为 : PATH 变量名的变量选中后,添加以下两个环境变量


需要添加的变量值 :


%NODE_HOME%


%NODE_HOME%\node_global


注 : 根据自己的电脑看是否在变量值后面增加分号来间隔变量值。


如 :


%NODE_HOME%;


%NODE_HOME%\node_global;


操作如图 :

测试安装是否成功及环境变量是否配置完成

Win+R,输入cmd,打开cmd窗口,输出如下命令配置环境变量的查看

          echo %node_home%

          echo %path%

操作如图 :

Win+R,输入cmd,打开cmd窗口,输出如下命令测试安装是否成功

          node -v

          npm -v

操作如图 :

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


Win+R,输入cmd,打开cmd窗口,分开执行如下命令:


npm config set cache "D:\temp\node\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_cache"


npm config set prefix "D:\temp\node\node-v10.15.3-win-x64\node-v10.15.3-win-x64\node_global"


注 :


以上的路径是下载node的本地路径,再进入到增加新建的两个文件目录里面


其中的双引号不能少


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


( node_global(npm全局安装位置)和node_cache(npm缓存路径)与npm联系起来 )


操作如图 :

设置淘宝源 :


修改npm镜像提高下载速度(可以使用 cnpm 或 直接设置 --registry ,推荐设置 --registry)


Win+R,输入cmd,打开cmd窗口,输入指令:


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


注 : 可以根据一下命令查看所有你设置过的源


npm config get registry


设置如图 :

测试是否可以使用并运行启动Node.js项目

随便全局安装一个模块就可以测评

Win+R,输入cmd,打开cmd窗口,输入指令:

npm install webpack -g

命令执行完毕后,会在node_global路径下面生成(node_modules\webpack)文件

如果在自己的本地路径中,进行项目测试。

随便在自己的电脑上找一个项目,看是否可以进行添加Node.js依赖

在项目的跟目录中打开cmd窗口

依赖添加后,启动项目。

继续执行以下命令启动项目:

npm run dev

启动执行后,项目开启说明完成;

          好啦今天到这了,希望帮到你!!!

目录
相关文章
|
13天前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
17 4
|
30天前
|
JavaScript
Node.js 路由
10月更文挑战第5天
13 2
|
1月前
|
JavaScript 前端开发 API
前端技术分享:Vue.js 动态路由与守卫
【10月更文挑战第1天】前端技术分享:Vue.js 动态路由与守卫
|
1月前
|
资源调度 JavaScript UED
如何使用Vue.js实现单页应用的路由功能
【10月更文挑战第1天】如何使用Vue.js实现单页应用的路由功能
|
2月前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
134 11
|
2月前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
|
2月前
|
JavaScript
Vue3基础(21)___在axios.js中使用路由跳转
本文介绍了在Vue 3中如何在axios.js中使用路由跳转,通过直接引入路由实例并使用`router.push`实现页面跳转。
98 0
|
3月前
|
JavaScript 前端开发 UED
服务器端渲染新浪潮:用Vue.js和Nuxt.js构建高性能Web应用
【8月更文挑战第30天】在现代Web开发中,提升应用性能和SEO友好性是前端开发者面临的挑战。服务器端渲染(SSR)能加快页面加载速度并改善搜索引擎优化。Vue.js结合Nuxt.js提供了一个高效框架来创建SSR应用。通过安装`create-nuxt-app`,可以轻松创建新的Nuxt.js项目,并利用其自动路由功能简化页面管理。Nuxt.js默认采用SSR模式,并支持通过`asyncData`方法预取数据,同时提供了静态站点生成和服务器端渲染的部署选项,显著提升用户体验。
77 0
|
3月前
|
JavaScript 前端开发 API
全栈开发革命来临!Vue.js与Node.js联手,打造前后端无缝对接的奇迹之作!
【8月更文挑战第30天】在Web开发领域,前后端分离与协作至关重要。Vue.js以其轻量级和易用性深受前端开发者喜爱,而Node.js则以高性能和事件驱动特性在后端领域崭露头角。二者结合开启了全栈开发新篇章,通过RESTful API或GraphQL实现高效稳定通信。本文以示例说明如何使用Vue.js和Node.js构建全栈应用,从前端Vue组件到后端Express服务器,展示了数据获取与展示的全过程。这种组合提供了一种高效简洁的全栈开发方案,使开发者能更专注于业务逻辑实现。
213 0
|
存储 Web App开发 JavaScript
JavaScript基础(一)js环境搭建、变量常量、数据类型及转换、运算符
JavaScript基础(一)js环境搭建、变量常量、数据类型及转换、运算符
260 0
JavaScript基础(一)js环境搭建、变量常量、数据类型及转换、运算符