vue路由&nodeJS环境搭建

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入vue依赖 -->
		<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>
		<title></title>
	</head>
	<body>
		<div id = "app">
			<!-- 7.触发事件 -->
			<router-link to="/home" replace = "">首页</router-link>
			<router-link to="/about">关于</router-link>
			<!--6.定义锚点 -->
			<router-view></router-view>
		</div>
		
	</body>
	<script type="text/javascript">
		//2.定义组件  首页对应的组件，关于定义的组件
		
		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});
		
		
		
		new Vue({
			el:'#app',
			router,//5.将vue对象挂载到vue实例中
			data(){
				return{
					msg:'hhh'
				}
			}
		})
	</script>
</html>

效果图：

点击首页按钮：

点击关于按钮：

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