路由和node环境搭建

路由和node环境搭建

    • 1.1 什么是路由
    • 1.2 案例实操
    • 1.2.3 效果展示
  • 二、配置Node.js
    • 2.1 新建两个文件夹
    • 2.2 配置环境变量

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: "

这是首页

首页内容
"
}) const Abort = Vue.extend({ template: "

这是本站介绍

本站意义,发展史,未来展望
"
}) // 定义链路集合 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环境搭建_第1张图片

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

二、配置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已经成功安装,并且环境配置也正确。如果未输出版本号,可能是由于安装过程中出现了问题,请重新检查安装步骤并尝试修复。

现在运行一个项目测试是否安装好
路由和node环境搭建_第2张图片

路由和node环境搭建_第3张图片
现在说明已经安装好啦。

你可能感兴趣的:(node)