从零开始搭建vue3项目（三）项目集成vue-router

前言

目前，我们自己创建的项目里是没有引入vue-router的，本节来引入vue-router，然后简单配置两个静态路由页面，看看效果。

安装依赖

在项目的根目录打开终端，输入以下命令安装依赖：
npm install vue-router
安装成功后，在package.json文件里能看到vue-router的版本信息

配置vue-router

1. 为了便于维护，一般把类似vue-router这种，一个功能模块的代码放在一个文件夹里进行管理。在src下新建文件夹router，然后在该文件夹下创建index.js文件作为vue-router的出口。
   
2. 接着需要在index.js里创建路由对象，配置路由信息，这里简单加两个页面做演示。
   页面一般放在src下的文件夹下，我习惯命名为views，然后在views目录下创建两个文件夹login和home，再分别创建index.vue，表示每个模块的出口文件，创建后的目录结构如下所示