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:
24
enlish-vue/src/router/index.js
Normal file
24
enlish-vue/src/router/index.js
Normal 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
|
||||
Reference in New Issue
Block a user