- Edit
- components/HelloWorld.vue to test HMR
-
- Check out - create-vue, the official Vue + Vite starter -
-- Learn more about IDE Support for Vue in the - Vue Docs Scaling up Guide. -
-Click on the Vite and Vue logos to learn more
- - - diff --git a/enlish-vue/src/main.js b/enlish-vue/src/main.js index 2425c0f..04c755b 100644 --- a/enlish-vue/src/main.js +++ b/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') diff --git a/enlish-vue/src/pages/index.vue b/enlish-vue/src/pages/index.vue new file mode 100644 index 0000000..309d2b9 --- /dev/null +++ b/enlish-vue/src/pages/index.vue @@ -0,0 +1,4 @@ + + + + diff --git a/enlish-vue/src/router/index.js b/enlish-vue/src/router/index.js new file mode 100644 index 0000000..37e1921 --- /dev/null +++ b/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 diff --git a/enlish-vue/tailwind.config.js b/enlish-vue/tailwind.config.js new file mode 100644 index 0000000..10b72aa --- /dev/null +++ b/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') + ], +} diff --git a/enlish-vue/vite.config.js b/enlish-vue/vite.config.js index bbcf80c..03d2501 100644 --- a/enlish-vue/vite.config.js +++ b/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)) + } + } })