vue路由与nodeJS环境搭建

最新推荐文章于 2023-10-13 21:25:24 发布

朱琳均

最新推荐文章于 2023-10-13 21:25:24 发布

阅读量444

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_73471776/article/details/133126581

版权

vue路由
nodeJS环境搭建

1.vue路由

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<!-- 1.导入路由所需依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js"></script>
		<title>路由</title>
	</head>
	<body>
		<div id="app">
			<!-- {{name}}
			需求，点击首页，显示网站首页内容；
			点击关于，显示本站创始人介绍，以及网站的发展史；
			通过分析，需要定义两个组件，一个组件对应网站首页内容，
			另一个组件对应本站创始人介绍，以及网站的发展史 -->
			
			<!-- 6.触发路由事件的按钮 -->
			<router-link to="/home">首页</router-link>
			<router-link to="/about">关于</router-link>
			<!-- 7.定义锚点，路由内容	 -->
			<router-view></router-view>
		</div>
		<script type="text/javascript">
			// 2对应两个组件
			var Home=Vue.extend({
				template:'<div>网页首页内容</div>'
			});
			var About=Vue.extend({
				template:'<div>本站创始人介绍，以及网站的发展史</div>'
			});
			
			// 3.定义组件与路径对应关系
			var routes=[{
				component:Home,
				path:'/home'
			},{
				component:About,
				path:'/about'
			}];
			// 4.通过路由关系获取路由对象router
		    var router= new VueRouter({routes});
			// 5.router挂载在vue实例中
			new Vue({
				el:'#app',
				router,
				data(){
					return{
						name:'aa'
					};
				}
			});
		</script>
	</body>
</html>

2.nodeJS环境搭建

1、下载nodeJS的安装包,下载地址：https://nodejs.org/zh-cn/download/
   2、解压nodeJS的解压包，在根目录下新增两个文件夹node_global和node_cache
   3、配置环境变量
       NODE_HOME:配置的是nodeJS解压的根路径D:\software\node-v10.15.3-win-x64
       path:%NODE_HOME%;%NODE_HOME%\node_global
       测试安装是否成功：打开cmd窗口，输出如下命令会输出NodeJs和npm的版本号

node -v
       npm -v
   4、配置npm的全局模块的下载地址
       npm config set cache "D:\software\node-v10.15.3-win-x64\node_cache"
       npm config set prefix "D:\software\node-v10.15.3-win-x64\node_global"

修改npm镜像提高下载速度(可以使用 cnpm 或直接设置 --registry ，推荐设置 -- registry）
## 设置淘宝源
npm config set registry https://registry.npm.taobao.org/

其实此步骤的内容就是将以下代码添加到C:\Users\用户名\.npmrc文件中
## 查看源，可以看到设置过的所有的源
npm config get registry

查看npm全局路径设置情况
## 此步骤随便全局安装一个模块就可以测评
npm install webpack -g
## 以上命令执行完毕后，会生成如下文件
%node_home%\node_global\node_modules\webpack
注意：下载过程中出现warn不用管，出现Error，删掉下载的破碎文件重新下载
   5、下载github的Vue的项目解压
   6、在解压的项目中是没有node_modules的，在工程的根目录下需要通过npm            install进行再次依赖下载（package.json）
   7、在通过npm run dev 启动项目

朱琳均

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue路由与nodeJS环境搭建

6、在解压的项目中是没有node_modules的，在工程的根目录下需要通过npm install进行再次依赖下载（package.json）NODE_HOME:配置的是nodeJS解压的根路径D:\software\node-v10.15.3-win-x64。1、下载nodeJS的安装包,下载地址：https://nodejs.org/zh-cn/download/2、解压nodeJS的解压包，在根目录下新增两个文件夹node_global和node_cache。
复制链接

扫一扫