一、Vue路由

1.1 路由的使用步骤

1.2 无痕浏览

二、nodeJs环境搭建

2.1 Node.js是什么

2.2 配置NodeJS环境

2.3 下载github的Vue项目

一、Vue路由

1.1 路由的使用步骤

① 引入路由的js

② 定义组件

③ 定义路由与组件的对应关系

④ 生成路由对象

⑤ 将vue对象挂载到vue实例中

⑥ 定义锚点

⑦ 定义触发的事件

Leaf这里就直接放上整个页面代码，都写好了实现步骤；

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><!-- 1、引入路由的js --><script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script></head><body><div id="app"><!-- 7、触发的事件 --><router-link to="/home">首页</router-link><router-link to="/about">关于</router-link><!-- 6、定义锚点 --><router-view></router-view></div></body><script type="text/javascript">//2、定义组件//Vue.component("Home",{})const Home = Vue.extend({template:'<div>这是首页内容，展示最新的10篇博客</div>'})const About = Vue.extend({template:'<div>这是关于本站显示的内容区域，本站的发展史...</div>'})//3、定义路由与组件的对应关系let routes = [{path:'/home',component:Home},{path:'/about',component:About},]//4、生成路由对象const router = new VueRouter({routes:routes});//vue实例new Vue({el:"#app",router,//5、将vue对象挂载到vue实例中data(){return {msg:"hello Leaf!!!"}}})</script>
</html>

我们测试一下是否成功：

点击首页

点击关于

1.2 无痕浏览

要实现无痕浏览，就只需要在你要保留访问记录的页面触发事件中，

加上 replace=" " 就好啦；

<div id="app"><!-- 7、触发的事件 --><router-link to="/home" replace="">首页</router-link><router-link to="/about">关于</router-link><!-- 6、定义锚点 --><router-view></router-view>
</div>

这样我们就只会保存添加了replace的页面记录，其他的页面就不能通过浏览器的返回上一个页面而访问到了。

二、nodeJs环境搭建

2.1 Node.js是什么

① Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]；

② Node.js是JavaScript脚本语言程序的运行环境。

npm：是nodeJS的包管理工具，相当于后台的maven

2.2 配置NodeJS环境

配置步骤如下：

1、配置系统变量：

2、新建一个NODE_HOME系统变量

3、把这一串配置到Path中：

%NODE_HOME%;%NODE_HOME%\node_global

这里要注意：如果系统配置是一条条分开的，那就要把%NODE_HOME%;单独分开配置；

测试是否配置成功：

Windows + R，输入cmd

nodeJs配置成功

然后我们再输入npm -v，查看npm的版本：

2.3 下载github的Vue项目

① 下载github的Vue的项目解压

在解压的项目中是没有node_modules的，

在工程的根目录下输入cmd，通过npm install进行再次依赖下载（package.json）

下载成功

② 最后一步就是输入npm run dev，运行项目；

然后就跳到了登录页面，这也就代表我们的nodeJS环境搭建成功。

输入信息全部不为空就OK，登录成功后的主页面：

总结nodeJS环境搭建步骤：

1、下载nodeJS的安装包

2、解压nodeJS的解压包，在根目录下新增两个文件夹node_global和node_cache

3、配置环境变量

NODE_HOME:配置的是nodeJS解压的根路径E:\AnZhuangBao\NodeJs\node-v10.15.3-win-x64

path:%NODE_HOME%;%NODE_HOME%\node_global

node -v

npm -v

4、配置npm的全局模块的下载地址

npm config set cache "E:\AnZhuangBao\NodeJs\node-v10.15.3-win-x64\node_cache"

npm config set prefix "E:\AnZhuangBao\NodeJs\node-v10.15.3-win-x64\node_global"

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

5、下载github的Vue的项目解压

6、在解压的项目中是没有node_modules的，在工程的根目录下需要通过npm install进行再次依赖下载（package.json）

7、在通过npm run dev 启动项目

OK，以上就是今天Leaf带来的关于Vue路由的使用、以及nodeJS环境的搭建的知识分享。

Vue路由无痕浏览 - nodeJs环境搭建相关推荐

vue路由无痕浏览nodeJS环境搭建
目录一.vue路由&无痕浏览 1. SPA是什么 2. SPA实现思路和技术点 ①技术点 ②思路 3. 通过vue的路由可实现多视图的单页Web应用(基于html的SPA) 4. route ...
vue路由无痕浏览nodeJS环境搭建ElementUI简介
目录一.vue路由&无痕浏览 1. SPA是什么 2. SPA实现思路和技术点 ①技术点 ②思路 3. 通过vue的路由可实现多视图的单页Web应用(基于html的SPA) 4. route ...
Vue路由--无痕浏览 NodeJs环境搭建
文章目录一.路由二.SPA是什么三.路由实现步骤导入Vue.vue-rou ...
vue路由、无痕浏览和nodeJS环境搭建、ElementUI简介
目录 1.vue路由和无痕浏览 1.1.SPA是什么 1.2.SPA实现思路和技术特点 1.2.1.技术特点 1.2.2.思路 1.3.通过vue的路由可实现多视图的单页Web应用 1.4.route ...
Vue05之ElementUI入门+nodejs环境搭建+运行nodejs项目
14天阅读挑战赛努力是为了不平庸~ 目录 1. ElementUI入门 1.1 ElementUI简介 1.2 Vue+ElementUI安装 1.3 开发示例 2. 搭建nodejs环境 2.1 ...
Vue.js学习总结（2）——Vue.js2.X + ElementUI开发环境搭建
一.开发前准备: Vue项目通常通过webpack工具来构建,而webpack命令的执行是依赖node.js的环境的,所以首先要安装node.js.(官方地址:https://nodejs.org/e ...
NodeJS环境搭建以及运行Node.js项目、饿了么ui（elementui）开发模式简单介绍
一.Node.js是什么? 1.1 Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]. Node.js使用了一个事件驱动.非阻塞式I/O 的模型. 1.2 Node.j ...
vue开发移动端h5环境搭建
技术选型公司现在需要开发移动端的h5,使用现在比较流行的vue 2.0开发,使用的脚手架是Vant2,网络访问使用的是axios,路由跳转使用的是vue-router,开发工具是vscode,作为一 ...
nodejs实践录：windows 10系统nodejs环境搭建
本文讲述windows 10 64bit系统中,nodejs环境的搭建. 安装下载地址为:https://nodejs.org/zh-cn/download/, 下载安装包为node-v10.15. ...

Vue路由无痕浏览 - nodeJs环境搭建

一、Vue路由

1.1 路由的使用步骤

1.2 无痕浏览

二、nodeJs环境搭建

2.1 Node.js是什么

2.2 配置NodeJS环境

2.3 下载github的Vue项目

① 下载github的Vue的项目解压

② 最后一步就是输入npm run dev，运行项目；

总结nodeJS环境搭建步骤：

Vue路由无痕浏览 - nodeJs环境搭建相关推荐

最新文章

热门文章