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

enlish-vue/src/App.vue

@@ -1,30 +1,11 @@
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
+
 </script>
 
 <template>
-  <div>
-    <a href="https://vite.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>
-  <HelloWorld msg="Vite + Vue" />
+	<router-view></router-view>
 </template>
 
 <style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
+
 </style>

enlish-vue/src/assets/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

enlish-vue/src/components/HelloWorld.vue

@@ -1,43 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

enlish-vue/src/main.js

@@ -1,5 +1,11 @@
+import '@/assets/main.css'
 import { createApp } from 'vue'
-import './style.css'
-import App from './App.vue'
+import App from '@/App.vue'
+// 导入路由
+import router from '@/router'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+
+// 应用路由
+app.use(router)
+app.mount('#app')

enlish-vue/src/pages/index.vue

@@ -0,0 +1,4 @@
+<template>
+    
+</template>
+

enlish-vue/src/router/index.js

@@ -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