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/package.json

@@ -9,10 +9,18 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "vue": "^3.5.24"
+        "element-plus": "^2.12.0",
+        "flowbite": "^1.8.1",
+        "vue": "^3.5.24",
+        "vue-router": "^4.6.4"
     },
     "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.1",
+        "autoprefixer": "^10.4.22",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^3.4.19",
+        "unplugin-auto-import": "^20.3.0",
+        "unplugin-vue-components": "^30.0.0",
         "vite": "^7.2.4"
     }
 }

enlish-vue/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    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

enlish-vue/tailwind.config.js

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+	content: [
+		"./index.html",
+		"./src/**/*.{vue,js,ts,jsx,tsx}",
+		"./node_modules/flowbite/**/*.js"
+	],
+	theme: {
+		extend: {},
+	},
+	plugins: [
+		require('flowbite/plugin')
+	],
+}

enlish-vue/vite.config.js

@@ -1,7 +1,26 @@
+import { fileURLToPath, URL } from 'node:url'
+
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
-// https://vite.dev/config/
+// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+	plugins: [
+		vue(),
+		AutoImport({
+			resolvers: [ElementPlusResolver()],
+		}),
+		Components({
+			resolvers: [ElementPlusResolver()],
+		}),
+	],
+	resolve: {
+		alias: {
+			// 定义一个别名 '@'，该别名对应于当前 JavaScript 模块文件所在目录下的 'src' 目录的绝对文件路径。
+			'@': fileURLToPath(new URL('./src', import.meta.url))
+		}
+	}
 })