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

前言:

今天我们来讲解关于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.mzph.cn/news/83378.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IP协议的相关特性

IP协议相关特性 报头结构 报文结构解释 4位版本号:指定IP协议的版本,对于IPV4来说,就是四位. 4位首部长度:IP头部的长度是多少个32bit,也就是Length4的字节数,4bit表示的最大的数是15,因此IP头部最大长度是60. 8位服务类型:3位优先权字段&#xff08;已经弃用&#xff09;&…

安全生产知识竞赛活动小程序界面分享

安全生产知识竞赛活动小程序界面分享

linux内核分析:进程通讯方式

信号 一旦有信号产生,我们就有下面这几种,用户进程对信号的处理方式。 1.执行默认操作。Linux 对每种信号都规定了默认操作,例如,上面列表中的 Term,就是终止进程的意思。Core 的意思是 Core Dump,也即终止进程后,通过 Core Dump 将当前进程的运行状态保存在文件里面…

Python画图系列——折线图

好看的折线图 import numpy as np import matplotlib.pyplot as plt# 生成随机数据 # np.random.seed(42) # 设置随机种子以确保可重复性 sample_numbers np.arange(1, 21) # 生成1到20的样本编号random_data np.random.rand(20) # 生成20个随机数&#xff0c;范围在0到1之…

淘宝商品详情数据采集

淘宝商品详情数据采集的方法如下&#xff1a; 确定采集目标&#xff1a;明确要采集的商品信息&#xff0c;如商品标题、价格、销量、评论、图片等。选择采集工具&#xff1a;可以选择Scrapy框架、Java的WebMagic框架等。编写爬虫程序&#xff1a;进入目标文件夹&#xff0c;输…

无涯教程-JavaScript - POWER函数

描述 POWER函数返回加到幂的数字的输出。 语法 POWER (number, power)争论 Argument描述Required/OptionalNumber 基数。 它可以是任何实数。 RequiredPowerThe exponent to which the base number is raised.Required Notes 可以使用" ^"运算符代替POWER来指示…

八一书《乡村振兴战略下传统村落文化旅游设计》许少辉瑞博士生辉少许——2023学生开学季许多少年辉光三农

八一书《乡村振兴战略下传统村落文化旅游设计》许少辉瑞博士生辉少许——2023学生开学季许多少年辉光三农

二、搭建Java环境

搭建Java环境 搭建Java环境1.1.下载JDK1.2.在Win10下配置JDK环境 —————————————————————————————————————————————————— ———————————————————————————————————————————————…

python 冒泡排序以及鸡尾酒排序

冒泡排序 就是一次循环&#xff0c;两两数据比较&#xff0c;将最大值放入末尾&#xff0c;此时找到了最大值&#xff0c;然后进行二次三次等循环&#xff0c;直到排序结束 冒泡排序代码 def bubble_sort_v1(array[]):for i in range(len(array)-1):for j in range(len(arra…

【CANoe/CANalyzer脚本】通过CAPL发送NM帧报文测试网络管理

优质博文推荐阅读&#xff08;单击下方链接&#xff0c;即可跳转&#xff09;&#xff1a; Vector工具链 CAN Matrix DBC CAN Matrix Arxml 一、在CANoe/CANalyzer中创建Program Node 在Measurement Setup中&#xff0c;创建Program Node&#xff1b; 接着导入下面的Demo:N…

D数树,牛客小白月赛78,思维

链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 262144K&#xff0c;其他语言524288K 64bit IO Format: %lld 题目描述 “开导&#xff01;” 众所周知&#…

echarts 轴文字内容太长导致显示不全解决方案

情况&#xff1a;Y轴内容是文字&#xff0c;内容太长可能会系那是不全。调整grid会导致短数据前的留白过于多。 解决方案&#xff1a; 方法一&#xff1a; 首先可以配置grid自适应 &#xff0c; containLabel 属性设置true &#xff08;这常用于『防止标签溢出』的场景&…

树、二叉树、森林的相互转化

目录 一、树>二叉树 二、二叉树>树 三、二叉树>森林 四、森林>二叉树 一、树>二叉树 ①兄弟相连 ②断开每个节点除与左孩子之外的连线 ③调整树为二叉树 二、二叉树>树 ①如果一个节点有父节点&#xff0c;将其右孩子与父节点相连&#xff0c;右孩子…

3D模型格式转换工具HOOPS Exchange协助Epic Games实现CAD数据轻松导入虚幻引擎

一、面临的挑战 Epic Games最为人所知的身份可能是广受欢迎的在线视频游戏Fortnite的开发商&#xff0c;但它也是虚幻引擎背后的团队&#xff0c;虚幻引擎是一种实时3D创作工具&#xff0c;为世界领先的游戏提供动力&#xff0c;并且也被电影电视、建筑、汽车、制造、模拟等领…

Python计算机二级知识点整理

1.当一个进程在运行过程中释放了系统资源后要调用 唤醒进程原语 唤醒进程原语是把进程从等待队列里移出到就绪队列并设置进程为就绪状态&#xff0c;当一个进程在运行过程中释放了系统资源后进入就绪状态&#xff0c;调用唤醒进程原语。 2. 3. 4.在希尔排序法中&#x…

windows常见的命令行操作

1.查看网络 ipconfig 2.根据任务id关闭进程 1.模糊搜索服务 tasklist | findstr QQ 2.根据模糊搜索结果&#xff0c;获取对应的pid taskkill /F /PID 5128 其他常见命令 若不清楚参数&#xff0c;使用&#xff08;命令 /?&#xff09;即可查看help

Day 02 python学习笔记

python运算符 算术运算符 混合运算的优先级&#xff1a; () > ** * / // % 高于 - 赋值运算符 - * / ** a 1 > a 3 > a a 3 其余同理 注意&#xff1a; python没有自增自减 &#xff08;a a a-- --a&#xff0…

Android EditText筛选+选择功能开发

在日常开发中经常会遇到这种需求&#xff0c;EditText既需要可以筛选&#xff0c;又可以点击选择。这里筛选功能用的是AutoCompleteTextView&#xff0c;选择功能使用的是第三方库https://github.com/kongzue/DialogX。 Android AutoCompleteTextView(自动完成文本框)的基本使用…

go语言 最小堆 最大堆 堆排序

建堆 调整 删除 先根据数组构建完全二叉树 从第一个非叶结点开始 调整为大跟堆&#xff0c;这里就是图里面的1结点开始调整 代码如下&#xff1a; func findKthLargest(nums []int, k int) int {heapSize : len(nums)buildMaxHeap(nums,heapSize)for i : len(nums) - 1; i &…

PRT(Precomputed Radiance Transfer【2002】)原理实现

声明 本文源自对Games202课程&#xff0c;作业2的总结。 参考 手把手教你写GAMES202作业&#xff1a;GAMES202-作业2&#xff1a; Precomputed Radiance Transfer&#xff08;球谐函数&#xff09;GAMES 202 作业2Games202课程个人Blog 课程总结&#xff1a;Games202(P6、P7…