使用vite从头搭建一个vue3项目（二）创建目录文件夹以及添加vue-router

一、创建 vue3 项目 vite-vue3-project-js

使用 vite 创建一个极简 vue3 项目请参考此文章：使用Vite创建一个vue3项目

下面是我在创建vue3项目时，没有切换 node 版本导致的node版本兼容性警告。 vite3 需要 node 必须是 =18 || >=20 版本才行。

分享一个 node 版本管理器 nvm（点击进入下载页面 github），可以很方便的切换 node 版本，大家可以安装一个试试。
如果使用 nvm 安装 node 失败的话可以参考这篇文章解决问题：使用nvm安装nodejs时，npm安装失败，提示 handshake timeout 。

下载 nvm 时，选择 nvm-setup.exe 安装程序安装。

二、创建项目目录

根据目录文件，在新建的 vite-vue3-project-js 项目的 src 目录文件夹下创建目录文件：

├── src
│   ├── api            		数据请求
│   ├── assets         		静态资源
│		├── images    	 	图片
│		├── style      		样式
│   ├── components     		公共组件
│   ├── layout         		布局（自定义菜单与内容布局）
│   ├── pages          		页面组件
│		├── Home       		
│		├── About      		
│   ├── router         		路由配置
│   ├── stores          	数据状态管理
│   └── utils          		工具函数
│		├── request.js 		axios封装

三、创建Home、About组件以及 vue-router 配置路由

1. 安装 vue-router。

   npm install vue-router@next
   

2. 使用 createRouter 创建 router 路由，在 router 文件夹中新建 index.js，书写如下代码：

   import { createRouter, createWebHistory } from "vue-router";
   import Home from "../pages/Home/index.vue"
   const routes = [{path: '/',name: 'home',component: Home,},{path: '/about',name: 'about',component: () => import('../pages/About/index.vue')}
   ]
   const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes,
   })
   export default router;
   

3. 创建Home、About组件。

   <!-- src/Home/index.vue -->
   <template><div><h3>This is Home page</h3><HelloWorld msg="Vite + Vue" /></div>
   </template><script setup>
   import HelloWorld from '../../components/HelloWorld.vue'
   </script><style lang="scss" scoped></style>
   

   <!-- src/About/index.vue -->
   <template><div><h3>This is About page!</h3></div>
   </template><script setup></script><style lang="scss" scoped></style>
   

4. 修改App.vue文件。

   <template><h1>Hello App!</h1><div><a href="https://vitejs.dev" target="_blank"><img src="/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /></a></div><p><!-- 使用 router-link 组件进行导航 --><!-- 通过传递 `to` 来指定链接 --><!-- `<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签 --><nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></nav></p><hr><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view>
   </template>
   

   在<style scoped></style>中添加 nav、router-link 的样式

   nav {width: 100%;text-align: center;margin-top: 2rem;
   }
   nav a.router-link-exact-active {color: var(--color-text);
   }
   nav a.router-link-exact-active:hover {background-color: transparent;
   }
   nav a {display: inline-block;padding: 0 1rem;border-left: 1px solid var(--color-border);
   }
   nav a:first-of-type {border: 0;
   }
   

5. 将 style.css 中的样式注释。

   body {margin: 0;/* display: flex;place-items: center; */min-width: 320px;min-height: 100vh;
   }
   

6. 修改 main.js 文件，挂载 router 路由。

   import { createApp } from 'vue'
   import './style.css'
   import App from './App.vue'
   import router from "./router/index.js"const app = createApp(App)
   app.use(router)// 挂载永远是最后一步
   app.mount('#app')
   

四、修改完成后页面