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

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

前言:

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

一,Vue的路由使用

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

<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官网:

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

启动效果:

目录
相关文章
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
431 19
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
14933 23
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
674 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
445 10
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
1063 2
2024年5月node.js安装(winmac系统)保姆级教程
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
1185 4
|
JavaScript 前端开发
js教程——函数
js教程——函数
400 4
|
JavaScript 前端开发 Java
Vue路由与nodejs下载安装及环境变量的配置
Vue路由与nodejs下载安装及环境变量的配置
327 0
|
缓存 JavaScript 开发者
Vue路由的使用及node.js下载安装和环境搭建
Vue路由的使用及node.js下载安装和环境搭建
306 0
|
JavaScript 算法 内存技术
如何降低node.js版本(nvm下载安装与使用)
如何降低node.js版本(nvm下载安装与使用)