Vue路由+NodeJs环境搭建

最新推荐文章于 2024-07-01 10:45:04 发布

秋月平湖

最新推荐文章于 2024-07-01 10:45:04 发布

阅读量114

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_49677278/article/details/131838500

版权

Vue路由+NodeJs环境搭建

一.Vue路由

第一步:引入js文件

第二步:创建两个组件展示相关的功能

第三步:形成组件与请求路径的对应关系

第四步:将路由关系和路由对象绑定

第五步:将路由关系和vue实例绑定

第六步:发起请求

第七步:显示对应的内容

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <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>
		 
	</head>
	<body>
		<!--定义边界-->
		<div id="app">
			<!-- 6发起请求 -->
			<router-link to="/Home">首页</router-link>
			<router-link to="/About">关于</router-link>
			<!-- 7显示对应的内容 -->
			<router-view></router-view>
		</div>
		
		<script>
			//2需要两个组件展示相关的功能
			var Home=Vue.extend({
				template:'<div>首页看到的数据展示</div>'
			});
			var About=Vue.extend({
				template:'<div>网页的发展历史以及更新日志</div>'
			});
			//3形成组件与请求路径的对应关系
			//浏览器访问http://localhost:8080/Home实际访问的是Home组件
			var routes=[{component:Home,path:'/Home'},{component:About,path:'/About'}];
		
			//4将路由关系和路由对象绑定
			var router= new VueRouter({routes:routes});
			//5将路由关系和vue实例绑定
		    new Vue({
		        el:'#app',
				 router,
		        data(){
		            return {
		            
		            }
		        }
			
		    })
		</script>
	</body>
</html>

运行结果

在这里插入图片描述

二.NodeJs环境搭建

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）
thub的Vue的项目解压
6、在解压的项目中是没有node_modules的，在工程的根目录下需要通过npm install进行再次依赖下载（package.json）
7、在通过npm run dev 启动项目

秋月平湖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue路由+NodeJs环境搭建

第一步:引入js文件第二步:创建两个组件展示相关的功能第三步:形成组件与请求路径的对应关系第四步:将路由关系和路由对象绑定第五步:将路由关系和vue实例绑定第六步:发起请求第七步:显示对应的内容运行结果。
复制链接

扫一扫