feat(router): 初始化项目路由与页面结构

- 删除默认示例组件 HelloWorld.vue 及相关代码
- 使用 <router-view> 替换 App.vue 中的默认内容
- 引入并应用 Vue Router,实现基础页面路由配置
- 在 main.js 中注册路由插件
- 添加首页组件 index.vue,作为根路径路由的目标组件
- 配置 vite 别名 '@' 指向 src 目录,方便路径引用
- 添加 Element Plus、Flowbite 和 Vue Router 依赖,集成 UI 框架
- 配置自动导入和组件按需加载插件,简化开发流程
- 配置 Tailwind CSS 及 Flowbite 插件,设置样式基础
- 创建主样式文件 main.css 并导入 Tailwind 指令
- 添加 postcss 配置支持 Tailwind 和 autoprefixer
This commit is contained in:
lbw
2025-12-14 12:06:08 +08:00
parent 5585f33f95
commit 9a11a7c094
11 changed files with 3115 additions and 1359 deletions

View File

@@ -0,0 +1,24 @@
import Index from '@/pages/index.vue'
import { createRouter, createWebHashHistory } from 'vue-router'
// 统一在这里声明所有路由
const routes = [
{
path: '/', // 路由地址
component: Index, // 对应组件
meta: { // meta 信息
title: 'Weblog 首页' // 页面标题
}
}
]
// 创建路由
const router = createRouter({
// 指定路由的历史管理方式hash 模式指的是 URL 的路径是通过 hash 符号(#)进行标识
history: createWebHashHistory(),
// routes: routes 的缩写
routes,
})
// ES6 模块导出语句,它用于将 router 对象导出,以便其他文件可以导入和使用这个对象
export default router