【Vue项目1】第一篇

01. 环境配置介绍和项目搭建

（1）安装node.js

安装完成之后，在vscode命令行输入npm install 20.16.0，然后重新开启命令行，输入nvm list来查看当前已下载的依赖。而后，通过nvm use 20.16.0切换到指定版本20.16.0，切换之后，输入node -v来查看当前的版本。

（2）创建Vue项目

我们使用Vite来创建。

Vite是一个脚手架工具，优点在于构建项目时速度非常快


输入npm i下载依赖，这样项目就创建完成了。

02. Router路由配置引入

在当前默认页面中，url地址里面所显示的login，是其中的一个路由所对应的登陆页面。


点击登录之后，url中的地址login变为dashboard

这里就涉及到页面跳转。

在Vue当中，页面跳转是使用Vue-Router来帮我们实现的。因此，我们接下来要去下载Vue-Router插件。

在命令行输入上述命令之后，确认版本没问题之后，我们就需要去使用Vue-Router去创建路由和对应页面。

日后路由配置就写入此文件中。

之后，执行如下操作：
（1）创建数组对象

（2）调用createRouer方法

实操如下：
（1）创建数组对象

const routes=[
	{
   
		//最开始的数据肯定是'/'
		path:'/'
		//这个'/'下会匹配当前访问'/'所匹配的页面
		//这个页面的属性就是component
		//component需要对应我们当前的一个Vue组件
		component:
	}
]

（接上文代码内容）
所以，我们创建一个Vue组件（Main.vue）来匹配：

并且引入到index.js中。
（想了解原因可去看我写的【Vue3】第四篇最后一节）

以此类推，创建登陆界面：