Vue路由&nodeJS环境搭建

目录

一、路由

1.路由 

2.SPA是什么

3.实现路由思路有7个步骤

二、无痕浏览 

三、NodeJs环境搭建 

1.Node.js是什么 

2.npm是什么 

 3.下载

4.配置环境变量 

5.测试 

6.配置npm的全局模块的下载地址 

 7.下载github的Vue的项目解压

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

8.总结步骤 

四、ElementUI简介 

五、总结 

 1.路由

2.无痕浏览    replace

3.NodeJS环境搭建 

4.ELement UI 

---

一、路由

1.路由 

我们之前点击导航栏是跳转页面，现在不再是跳转页面了，是通过路由的方式，跳转到组件

2.SPA是什么

 单页Web应用（single page application，SPA），就是只有一个Web页面的应用，
   是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序

   单页面应用程序：
     只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
   传统多页面应用程序：
     对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面
   
   优势
     减少了请求体积，加快页面响应速度，降低了对服务器的压力
     更好的用户体验，让用户在web app感受native app的流畅
 

3.实现路由思路有7个步骤

1、确保引入Vue.vue-router的js依赖
2、首先需要定义组件（就是展示不同的页面效果）
3、需要将不同的组件放入一个容器中（路由集合）
4、将路由集合组装成路由器
5、将路由挂载到Vue实例中
6、定义锚点
7、跳转

实现路由思路的代码块：  

	
		
		
		
		
		
		
	
	
		
		

			
			首页
			关于
			
			
		
	
	

运行结果如图所示： 

二、无痕浏览 

无痕浏览的意思是，我们消除上一页的记录，好比如：

我们在百度搜索一张图片，点击图片，然后我们在按返回键如图所示：

  

三、NodeJs环境搭建 

1.Node.js是什么 

Node.js 是JavaScript程序的运行环境、只是封装成运行环境

NodeJS是js脚本语言的运行环境

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

  注1：Node.js-->JavaScript运行环境，开发语言是：javascript
       J2EE   -->Java运行环境， 开发语言是java
  注2：Node.js v10.15.3文档地址：http://nodejs.cn/api/

2.npm是什么 

npm其实是Node.js的包管理工具，相当于后台的maven

npm其实是Node.js的包管理工具（package manager）。

   为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。
   如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。
   于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，
   直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。

   更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，
   npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。

   注1：npm==maven  有点类似

 3.下载

   下载地址：https://nodejs.org/zh-cn/download/ 
      选择相应的版本下载，本章使用的是：node-v10.15.3-win-x64.zip 

放在非中文目录下解压

我们就解压到我的E盘里面的去如图所示：

4.配置环境变量 

1.这个配置跟我们java配置一样的

 2.在去path里面使用

 

5.测试 

 徽标键+r然后输入cmd    测试语法：node -v         npm -v

就可以看到相对应的版本的问题，特别要 注意版本问题

 

6.配置npm的全局模块的下载地址 

这些命令一一执行，必须要一个一个的执行

1.文件的缓存       

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

2.设置全局变量
        npm config set prefix "E:\temp\nodeJS\node-v10.15.3-win-x64\node_global"

3.加快npm，js依赖下载的速度

我们安装淘宝的cnpm镜像，因为国外的很慢。我们可以采用cnpm install  来代替npm安装 
        npm config set registry https://registry.npm.taobao.org/

就会出现一个

 里面就是我们执行上面的语句

 7.下载github的Vue的项目解压

解压

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

注意一定要进入到这里面然后输入cmd

 

这样就下载好了

去看一下那个文件夹有多少兆     一共大概就是190多兆，如果没有这么多，比如是150兆，然后这个项目就会运行不起来，删了重新来过

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

或者说，在这里报了一个错，下面的就实现不了，就要删了重新下，这里一般都不会 

运行好的项目，这里随便登录，只要不为空就可以了 

登录进来如图所示：

如果说这个项目不看了就可以把cmd执行码关闭掉 

8.总结步骤 

只要跟着这7个步骤，一般都会没有问题  

 1、下载nodeJS的安装包
    2、解压nodeJS的解压包，在根目录下新增两个文件夹node_global和node_cache
    3、配置环境变量
        NODE_HOME:配置的是nodeJS解压的根路径D:\initPath\node-v10.15.3-win-x64
        path:%NODE_HOME%;%NODE_HOME%\node_global
        node -v
        npm -v
    4、配置npm的全局模块的下载地址
        npm config set cache "D:\initPath\node-v10.15.3-win-x64\node_cache"
        npm config set prefix "D:\initPath\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 启动项目

四、ElementUI简介 

 官网：Element - The world's most popular Vue UI framework

前后端分离采用下面的这个  npm i element-ui -s 

 我们element UI有两种开发模式，一种是传统开发模式，二是前后端分离的开发模式

 分比例：

 类型的案例

它的代码块：

我们前后端开发模式，是不使用这种开发模式的，这种开发模式只是当做bootstrap，LayUI，easyui去使用。

前后端分离应该采用第二种开发模式  npm i element-ui -s

	
		
		
		
		
		
		
		
		
		
		
		
	
	
		

			

				

					
{{ts}}
					
传统html+vue+elementUI开发
					
						
							

								主要按钮
							
						
					
					
						
							
博客信息
						
						
							
分类管理
						
					
					
						
							
版权信息
						
					

				
			
		
	
	

五、总结 

 1.路由

分为7个步骤：

        1.导入vue-router.js依赖

        2.定义组件        const Home = vue.extend({})

        3.定义路由与组件的对应关系 [{path:'/home',component:Home,{...}]

        4.获取VueRouter对象  new vueRouter（{routes:routes}） 注意这里一定要是routes

        5.将路由对象挂载到vue实例中

        6.定义锚点       

        7.触发事件       

2.无痕浏览    replace

3.NodeJS环境搭建 

  什么是nodeJs：运行JAVAScript脚本语言的环境

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

1.下载nodejs的安装包，并解压

2.再解压目录下的根目录下，新建两个文件夹  node_global、node_cache    

3.环境变量设置

       NODE_HOME:nodejs安装包的解压目录

        path：%NODE_HOME%;%NODE_HOME%\node_global;

        测试有没有安装好

        node -v

        npm -v

4.从github中下前端vue项目进行测试     -  资料中有

5. 通过npm install 下载本项目的js依赖，会在项目根路径生成node_module

6.通过 npm run dev 启动项目进行测试

4.ELement UI 

1.传统开发模式：html+vue+Element UI类似于bootstrap、LayUI、easyui 

2.前后端分离的开发模式