02.Vite 安装 Vue-Router_vite vue-router

学习要点：
1.Vue-Router 安装
本节课我们来要在 Vite 项目中安装 Vue-Router 路由插件；
一．Vue-Router 安装
1. 进入项目目录，比如：vite-01，使用如下命令安装路由；
npm install vue-router@next
2. 在 package.json 中或 node_modules 查看是否存在 vue-router；
3. 由于不是和脚手架安装时勾选插件模块，路由并不会自动生成配置，需要手动；
4. 第一步：先注册路由，在 main.js 下注册路由；
import router from './router'
createApp(App).use(router)... 5. 第二步：创建路由配置文件 router/index.js，可复制《Vue3.x 工具篇》的配置；
import { createRouter, createWebHistory } from 'vue-router'
const routes = [...]
const router = ...
export default router
6. 第三步：创建视图组件 views/*.vue，比如：Home.vue 和 About.vue；
7. 第四步：在 App.vue 中移植主页信息到 Home.vue，并设置 link；
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
8. 别名@，也需要设置，并不是自动支持的；在 vue.config.js 中设置；
import { resolve } from 'path'
resolve: {
alias: {
'@': resolve('./src')
}
}