路由和node环境搭建

简介: 路由和node环境搭建

1.1 什么是路由

在计算机网络中,路由(Routing)是指根据某种算法将数据包从源节点传输到目标节点的过程。在Web开发中,路由则指的是根据URL地址的不同,将用户请求导向对应的处理程序或页面。简单来说,路由负责将用户的请求分发到不同的处理函数或页面。

1.2 案例实操

在Vue.js中,我们可以使用vue-router库来实现路由功能。下面是一个简单的案例实操步骤:

① 首先,在项目中引入vue-router依赖库。

② 定义组件。我们需要定义多个组件,每个组件代表一个页面或者一个模块。

③ 定义路由。在这一步中,我们需要为每个URL路径定义对应的组件。

④ 将路由加入路由器。

⑤ 将路由挂载到Vue实例中。

⑥ 定义触发路由的按钮。我们可以在页面中定义一个链接,通过点击链接来触发相应的路由跳转。

⑦ 定义锚点。在Vue实例的模板中,我们需要为每个URL路径定义对应的容器,用于渲染对应的组件。

1.2.3 效果展示

经过以上步骤,我们就完成了一个简单的路由配置。当用户访问不同的URL时,页面会根据对应的路由规则加载不同的组件,并渲染到对应的位置上。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>入门</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/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="/Home">首页</router-link>
      <router-link to="/Abort">关于</router-link>
      <!-- 定义锚点 -->
      <router-view></router-view>
    </div>
    <script type="text/javascript">
      // 定义组件
      const Home = Vue.extend({
        template: "<div><p>这是首页</p><div>首页内容</div></div>"
      })
      const Abort = Vue.extend({
        template: "<div><p>这是本站介绍</p><div>本站意义,发展史,未来展望</div></div>"
      })
      // 定义链路集合
      let routes = [{
        path: '/',
        component: Home
      },{
        path: '/Home',
        component: Home
      },{
        path: '/Abort',
        component: Abort
      }];
      // 定义路由
      const router = new VueRouter({routes:routes})
      // 挂载vue
      new Vue({
        el: app,
        router,
        data() {
          return {
            msg: "hello Wrold"
          }
        }
      })
    </script>
  </body>
</html>

这只是一个简单的示例,实际应用中还有更多的功能和配置选项可以使用。希望以上内容能够帮助到您理解路由的概念和实际应用。如有任何疑问,请随时提出。

二、配置Node.js

2.1 新建两个文件夹

首先,您需要创建两个文件夹来存放您的Node.js应用和相关文件。一个文件夹用于存放您的Node.js代码,另一个文件夹用于存放您的项目依赖。

2.2 配置环境变量

接下来,您需要配置环境变量,以便在任意位置都可以运行Node.js命令。

在Windows操作系统上:

打开控制面板,并进入"系统和安全" -> “系统” -> “高级系统设置”。 在弹出的"系统属性"窗口中,点击"环境变量"按钮。

在"环境变量"窗口中,找到"系统变量"下的"Path"变量,点击"编辑"按钮。

在"编辑环境变量"窗口中,点击"新建"按钮,并输入Node.js的安装路径。通常情况下,Node.js会默认安装到"C:\Program

Files\nodejs"。 点击"确定"保存更改。 在Mac或Linux操作系统上:

打开终端,并输入以下命令来编辑用户环境配置文件(根据您使用的shell可能会有所不同,请适当调整): vi ~/.bash_profile

在打开的编辑器中,按下"i"键进入编辑模式,在文件末尾添加以下内容(根据您的Node.js安装路径进行调整): export

PATH=“/usr/local/bin:$PATH” 按下"Esc"键退出编辑模式,然后输入":wq"保存并退出。

3.3 使用管理员身份打开命令提示符或终端窗口 为了能够在任意位置使用Node.js命令,您需要以管理员身份打开命令提示符(Windows)或终端窗口(Mac或Linux)。

在Windows上:按下"Win + X"组合键,然后选择"命令提示符(管理员)“。 在Mac上:打开"Finder”,进入"应用程序"

-> “实用工具”,然后双击打开"终端"。 在Linux上:打开您的终端程序。

3.4 测试Node.js安装是否成功 在打开的命令提示符或终端窗口中,输入以下命令来检查Node.js和npm是否正确安装:

shell node -v npm -v

如果输出了对应的版本号,则说明Node.js和npm已经成功安装,并且环境配置也正确。如果未输出版本号,可能是由于安装过程中出现了问题,请重新检查安装步骤并尝试修复。

现在运行一个项目测试是否安装好

现在说明已经安装好啦。

目录
相关文章
|
6月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
46 0
|
6月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)(上)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
48 0
|
1月前
|
JavaScript
Node.js 路由
10月更文挑战第5天
18 2
|
5月前
|
JavaScript
Node.js 路由
Node.js 路由
28 3
|
6月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)(下)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
55 0
|
6月前
|
JavaScript 前端开发 开发者
Vue路由及Node.js环境搭建
Vue.js 和 Node.js 是两个不同的技术,分别用于前端和后端开发,具有不同的用途和功能
31 1
|
6月前
|
JavaScript 前端开发 中间件
Node.js—Express使用、Express 路由 、Express 中间件、托管静态资源、使用 Express 写接口、node.js链接sqlite数据库
Node.js—Express使用、Express 路由 、Express 中间件、托管静态资源、使用 Express 写接口、node.js链接sqlite数据库
236 0
|
JavaScript
Node.js学习笔记----路由
Node.js学习笔记----路由
|
JavaScript
Node.js学习笔记(十一、路由)
Node.js学习笔记(十一、路由)
140 0
Node.js学习笔记(十一、路由)