Vue的路由使用,Node.js下载安装及环境配置教程 (超级详细)

news/2025/2/12 4:14:06/

前言:

今天我们来讲解关于Vue的路由使用,Node.js下载安装及环境配置教程

一,Vue的路由使用

首先我们Vue的路由使用,必须要导入官方的依赖的。

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务icon-default.png?t=N7T8https://www.bootcdn.cn/

<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>

路由思路
1、引入路由的js依赖
2、定义组件内容用来显示网页中的内容
3、定义路由路径关系
4、通过路由关系获取对象
5、挂载实例上
6、触发点击事件
7、定锚点,展示内容 

具体步骤:

1、引入路由的js依赖

<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>

2、定义组件内容用来显示网页中的内容

			// 2定义组件内容用来显示网页中的内容var Home = Vue.extend({template: '<div>网站首页内容</div>'});var About = Vue.extend({template: '<span>发展历史</span>'});

3、定义路由路径关系

	//3定义路由路径关系var routes = [{component: Home,path: '/home'},{component: About,path: '/about'}]

4、通过路由关系获取对象

//4通过路由关系获取对象var router = new VueRouter({routes});

5、挂载实例上

//5挂载实例上new Vue({el: '#app',router,data() {// 创造数据:以后我们结合后台就会从数据库中获取json格式的数据return {msg: '云'}}})


6、触发点击事件

			<!-- 6触发点击事件 --><router-link to="/home">点我回首页</router-link><router-link to="/about">关于本网站</router-link>


7、定锚点,展示内容 

			<!-- 7定锚点,展示内容 --><router-view></router-view>

效果:我们点击后,上面的刷新按钮是没有刷新的,这就意味着我们与后台交互后,如果数据量多的话,那数据展示就不会停下很长时间。

二,Node.js下载安装及环境配置教程 

Node.js的介绍:

Node.js是一个基于Chrome V8引擎的JavaScript运行环境。 Node.js使用了一个事件驱动、非阻塞式I/O 的模型。Node.js是一个让JavaScript运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言 

Node.js官网:下载 | Node.js (nodejs.org)icon-default.png?t=N7T8https://nodejs.org/zh-cn/download

npm是什么?

npm其实是Node.js的包管理工具(package manager)。方便我们项目操作用的。

如果想下载先前版本也可以:

下载后是个zip文件(安全性高),我们解压后,通过cmd窗口测试安装是否成功,按下【win+R】键,输入cmd,运行黑窗口  

     输入指令:node -v     // 显示node.js版本

                       npm -v      // 显示npm版本

成功显示版本说明安装成功

注意事项:

node.js的版本区别,v14版本以下与以上有着巨大的差别

 三、环境配置

(1)找到安装的目录,在安装目录下新建两个文件夹(node_global)(node_cache)。一定要是在安装node.js的根目录下。

(2)配置环境变量

 新增NODE_HOME,值为:D:\soft\node-v10.15.3-win-x64

 修改PATH并在最后添加:window11不用;

%NODE_HOME%          %NODE_HOME%\node_global

(3)创建完毕后,使用管理员身份打开cmd命令窗口,输入

npm config set prefix “你的路径\node_global” (复制你刚刚创建的“node_global”文件夹路径)

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


 ②npm config set cache “你的路径\node_cache”  (复制你刚刚创建的“node_cache”文件夹路径)

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

(4)安装淘宝镜像

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

安装成功后会在C:\Users\用户名\下生成.npmrc文件

 四、测试

  配置完成后,全局安装一个最常用的 express 模块进行测试

npm install express -g   // -g代表全局安装

运行解压的项目--》npm i  (这里加载的时间比较长)

五、安装淘宝镜像

①安装淘宝镜像

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

  查看是否成功:

npm config get registry

这个vue项目私信我可得,我们先进到该项目的根目录输入cmd.

启动项目

  npm run dev

启动效果:


http://www.ppmy.cn/news/1117742.html

相关文章

【操作系统】聊聊磁盘IO是如何工作的

磁盘 机械磁盘 主要是由盘片和读写磁头组成。数据存储在盘片的的环状磁道上&#xff0c;读写数据前需要移动磁头&#xff0c;先找到对应的磁道&#xff0c;然后才可以访问数据。 如果数据都在同一磁道上&#xff0c;不需要在进行切换磁道&#xff0c;这就是连续IO&#xff0c;可…

Lua 点 冒号面向对象 继承

1.点与冒号 self机制 local a {} function a.test() print("a.test") end a.test() local b {} function b:test() --self代表调用表的实例 print("b:test", self) end -- b:test() --self机制下a应该改为 b则不需要修改 local a {} function a.test(s…

【深度学习实验】前馈神经网络(三):自定义多层感知机(激活函数logistic、线性层算Linear)

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 三、实验内容 0. 导入必要的工具包 1. 构建数据集 2. 激活函数logistic 3. 线性层算子 Linear 4. 两层的前馈神经网络MLP 5. 模型训练 一、实验介绍 本实验实现了一个简单的两层前馈神经网络 激活函数…

【图像去噪】【TGV 正则器的快速计算方法】通过FFT的总(广义)变化进行图像去噪(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

mysql向数据库中添加数据

要向MySQL数据库中添加数据&#xff0c;您可以使用INSERT INTO语句。以下是一些基本步骤和示例代码来添加数据&#xff1a; 连接到数据库&#xff1a; 首先&#xff0c;您需要使用MySQL客户端或编程语言中的MySQL连接库连接到您的数据库。 编写INSERT语句&#xff1a; 创建一个…

C++中string对象之间比较、char*之间比较

#include <cstring> //char* 使用strcmp #include <string> //string 使用compare #include <iostream> using namespace std; int main() {string stringStr1 "42";string stringStr2 "42";string stringStr3 "213";cout …

QT-day4

画一个时钟 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPaintEvent> #include <QDebug> #include <QPainter> #include <QTimer> #include <QTime>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } Q…

使用Arduino简单测试HC-08蓝牙模块

目录 模块简介模块测试接线代码测试现象 总结 模块简介 HC-08 蓝牙串口通信模块是新一代的基于 Bluetooth Specification V4.0 BLE 蓝牙协议的数传模块。无线工作频段为 2.4GHz ISM&#xff0c;调制方式是 GFSK。模块最大发射功率为4dBm&#xff0c;接收灵度-93dBm&#xff0c…