vue的路由以及nodeJS环境搭建

一：路由

1、确保引入Vue.vue-router的js依赖

2、首先需要定义组件（就是展示不同的页面效果）

3、需要将不同的组件放入一个容器中（路由集合）

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

3、配置环境变量

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

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

6、在解压的项目中是没有node_modules的

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

一：路由

1、确保引入Vue.vue-router的js依赖

<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>

2、首先需要定义组件（就是展示不同的页面效果）

//2.定义需求中需要的组件
		// const也是es6写法，代表了该变量是对象
		const Home = Vue.extend({
			template:"<div><p>这是博客内容页面</p><div>具体的博客内容</div></div>"
		});
		const Abort = Vue.extend({
			template:"<div><p>这是关于本站的页面</p><div>本站的意义，发展史，未来的规划</div></div>"
		});

3、需要将不同的组件放入一个容器中（路由集合）

// 3.定义路由跳转路径
		let routes = [{
				path:'/',
				component:Home
			},{
				path:'/Home',
				component:Home
			},{
				path:'/Abort',
				component:Abort
			}];

4、将路由集合组装成路由器

// 4.得到路由对象
			const router = new VueRouter({routes:routes});

5、将路由挂载到Vue实例中

// 5.将路由与Vue实例进行绑定
			router,

6、定义锚点

<!-- 6定义组件存放的位置 ，定义锚点-->
		<router-view></router-view>

7、跳转

<!-- 7.路由组件跳转触发点 -->
		<router-link to="/">首页</router-link>
		<router-link to="/Abort">关于本站</router-link>

效果演示：

二：无痕浏览

 replace
      设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。
      <router-link :to="{ path: '/home'}" replace></router-link>

三：环境搭建

    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:\Y1\J2EE\VueL\node-v10.15.3-win-x64"
       npm config set prefix "D:\Y1\J2EE\VueL\node-v10.15.3-win-x64"
       npm config set registry https://registry.npm.taobao.org/
   5、下载github的Vue的项目解压
   6、在解压的项目中是没有node_modules的，在工程的根目录下需要通过npm            install进行再次依赖下载（package.json）
   7、在通过npm run dev 启动项目

根据上述步骤，是在以及下载了nodeJS安装包的情况下进行，把解压包放在非中文目录下，先把第二个node-v10.15.3-win-x64.zip进行解压