vue路由&nodeJS环境搭建

目录

1.vue路由

1.1.SPA是什么？

1.2.优势

1.3.思路

1.4.代码

 2.无痕浏览

3.nodeJS环境搭建

3.1.完整步骤

3.2.安装详细步骤

4.ElementUI简介

---

1.vue路由

1.1.SPA是什么？

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

1.2.优势

减少了请求体积，加快页面响应速度，降低了对服务器的压力
     更好的用户体验，让用户在web app感受native app的流畅

1.3.思路

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

1.4.代码

	
		
		
		
		
				
		
	
	
		

			
			首页
			关于
			
			
		
		
	
	

效果图：

点击首页按钮：

 点击关于按钮：

 2.无痕浏览

 

3.nodeJS环境搭建

3.1.完整步骤

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:\node vue\node-v10.15.3-win-x64\node_cache"
npm config set prefix "D:\node vue\node-v10.15.3-win-x64\node_global"

        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 启动项目

3.2.安装详细步骤

第一步：下载nodeJS的安装包

下载地址：https://nodejs.org/zh-cn/download/ 

建议：不要下载最新版本哦！！！

第二步：解压nodeJS的解压包，在根目录下新增两个文件夹node_global和node_cache

 注意：解压的文件夹要放在非中文目录下哦哦！！

在node-v10.15.3-win-x64文件里添加两个文件夹node_global和node_cache

 

第三步：配置环境变量

选中计算机右键属性-------->高级系统设置------>环境变量

1.配置ONDE_HOME

 变量值：是解压onde的路径

2.配置Path

 3.测试环境是否配置成功

徽标键+r -------------输入cmd---------node -v-------npm -v

 如上图输入命令有显示版本说明环境配置成功了！！！

第四步：配置npm的全局模块的下载地址

拿到路径

 npm config set cache "D:\node vue\node-v10.15.3-win-x64\node_cache"
npm config set prefix "D:\node vue\node-v10.15.3-win-x64\node_global"

打开命令窗口把两个路径进行执行

第五步：下载github的Vue的项目解压

 

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

注意：一定要进入vueproject的目录里面进行输入cmd

输入 npm   install

第七步：在通过npm run dev 启动项目

 

 

 

4.ElementUI简介

学习网址：

https://element.eleme.cn/#/zh-CN/component/installation