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

目录

一、Vue路由

        1.1 路由的使用步骤

        1.2 无痕浏览

二、nodeJs环境搭建

        2.1 Node.js是什么

        2.2 配置NodeJS环境

        2.3 下载github的Vue项目

---

一、Vue路由

        1.1 路由的使用步骤

① 引入路由的js

② 定义组件

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

④ 生成路由对象

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

⑥ 定义锚点

⑦ 定义触发的事件

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

	
		
		
		
		
		
	
	
		

			
			首页
			关于
			
			
		
	
	

         我们测试一下是否成功：

        点击首页

        点击关于

        1.2 无痕浏览

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

                加上 replace=" " 就好啦；

    
	首页
	关于
	
	

这样我们就只会保存添加了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环境的搭建的知识分享。