vue路由和nodeJS环境搭建

一、vue路由

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


html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/2.6.0/vue-router.js">script>
	head>
	<body>
		<div id="app">
			
			
			<router-link to="/Home" >首页router-link>
			<router-link to="/About">关于router-link>
			
			<router-view>router-view>
		div>
	body>
	<script>
		//定义组件
		const Home = Vue.extend({
			template: "这是首页
"
		});
		const About = Vue.extend({
			template: "这是关于本站，记录了本站的发展史
"
		});
		//定义组件和路由的关系
		let routes = [{
			path: '/',
			component: Home
		}, {
			path: '/Home',
			component: Home
		}, {
			path: '/About',
			component: About
		}];
		//定义路由
		const router = new VueRouter({
			routes: routes
		})
		//挂载路由
		new Vue({
			el: "#app",
			router,
			data() {
				return {
					msg: "hello,vue!"
				}
			}
		})
	script>
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）
   7、在通过npm run dev 启动项目

登录之后的界面

四、ElementUI简介

我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的,
所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件

ElementUI官网：http://element-cn.eleme.io/#/zh-CN

相关阅读:
我作为前端开发者对低代码平台的理解和搭建流程（一）
【halcon】halcon轮廓总结之select_contours_xld
Web前端：什么时候使用React?什么时候使用React Native?
vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案
1、如何抓取Modbus TCP/UDP 数据包实战
Python之并发编程(线程)
[Hackthebox] Fawn (FTP)
C++DAY 结构体·结构体与函数
招投标系统简介企业电子招投标采购系统源码之电子招投标系统 —降低企业采购成本
C++11 ——— 右值引用和移动语义

原文地址：https://blog.csdn.net/weixin_62735525/article/details/126717073