diff --git a/components.d.ts b/components.d.ts index d5b6134..9ff4061 100644 --- a/components.d.ts +++ b/components.d.ts @@ -8,7 +8,11 @@ export {} /* prettier-ignore */ declare module 'vue' { export interface GlobalComponents { + ElTabPane: typeof import('element-plus/es')['ElTabPane'] + ElTabs: typeof import('element-plus/es')['ElTabs'] + Footer: typeof import('./src/components/Footer.vue')['default'] HelloWorld: typeof import('./src/components/HelloWorld.vue')['default'] + Navbar: typeof import('./src/components/Navbar.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] Test: typeof import('./src/components/Test.vue')['default'] diff --git a/package.json b/package.json index 56a2f4f..9f8a9a5 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "dependencies": { "@vueuse/core": "^13.3.0", "axios": "^1.9.0", + "element-plus": "^2.10.1", "pinia": "^2.1.7", "postcss-px-to-viewport": "^1.1.1", "vue": "^3.5.13", @@ -52,6 +53,7 @@ "postcss": "^8.4.24", "postcss-px-to-viewport-8-plugin": "^1.2.5", "prettier": "^3.5.3", + "sass": "^1.89.2", "typescript": "5.1.6", "unplugin-auto-import": "^19.3.0", "unplugin-vue-components": "^28.7.0", diff --git a/postcss.config.cjs b/postcss.config.cjs index 6362885..303c5eb 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -32,7 +32,7 @@ module.exports = { plugins: { 'postcss-px-to-viewport-8-plugin': { unitToConvert: 'px', - viewportWidth: 750, + viewportWidth: 1920, unitPrecision: 5, viewportUnit: 'vw', fontViewportUnit: 'vw', diff --git a/src/App.vue b/src/App.vue index 4a48484..ad7ce98 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,42 +1,14 @@ - diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png new file mode 100644 index 0000000..4f1c981 Binary files /dev/null and b/src/assets/images/logo.png differ diff --git a/src/main.ts b/src/main.ts index 0968924..895858a 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,7 +5,18 @@ import App from './App.vue' import routes from './router/routes' import i18n from './locales/i18n' // 导入i18n配置 import './style.css' +import '@/styles/global.less' // 引入全局样式 // 修正：明确 meta.title 的类型为 string + +// 引入 element-plus 核心库 +import ElementPlus from 'element-plus' +// 引入 element-plus 全局样式（可根据需求选择是否自定义主题，这里先引入默认样式） +// import 'element-plus/dist/index.css' +// 如果你需要使用 Element Plus 提供的国际化（i18n）功能，还需引入对应的语言包，比如中文 + +// 修正：使用正确的语言包路径（从 es/locale/lang 导入） +import zhCn from 'element-plus/es/locale/lang/zh-cn' +// 使用 ElementPlus 插件，并配置国际化等选项（这里以配置中文为例） declare module 'vue-router' { interface RouteMeta { title?: string // 明确指定为 string 类型 @@ -22,6 +33,9 @@ export const createApp = ViteSSG( ctx => { // 安装 i18n 插件 ctx.app.use(i18n) + ctx.app.use(ElementPlus, { + locale: zhCn + }) // 路由守卫：设置页面标题 ctx.router.beforeEach((to, _from, next) => { diff --git a/src/router/routes.ts b/src/router/routes.ts index 8bc365c..852d83d 100644 --- a/src/router/routes.ts +++ b/src/router/routes.ts @@ -1,40 +1,53 @@ // src/router/routes.ts import type { RouteRecordRaw } from 'vue-router' // 添加type关键字 -import Home from '@/views/Home.vue' -import About from '@/views/About.vue' -import I18nDemo from '../views/I18nDemo.vue' - +import Home from '@/views/Home/Home.vue' +// import About from '@/views/About.vue' +// import I18nDemo from '../views/I18nDemo.vue' +import Layout from '@/layout/Layout.vue' const routes: RouteRecordRaw[] = [ - { - path: '/i18n-demo', - name: 'I18nDemo', - component: I18nDemo, - meta: { - title: '国际化演示' - } - }, { path: '/', - name: 'Home', - component: Home, - meta: { - title: '首页 - 极简官网' // 明确指定title为string类型 - } as { title: string } // 强制类型断言 - }, - { - path: '/about', - name: 'About', - component: About, - meta: { - title: '关于我们 - 极简官网' - } as { title: string } - }, - { - path: '/:pathMatch(.*)*', - name: 'NotFound', - component: () => import('@/views/NotFound.vue'), - meta: { title: '404 - 页面不存在' } as { title: string } + component: Layout, + children: [ + { path: '', name: 'Home', component: Home }, + { path: 'news', name: 'News', component: () => import('@/views/News.vue') }, + { path: 'network', name: 'Network', component: () => import('@/views/Network.vue') }, + { path: 'dating', name: 'Dating', component: () => import('@/views/Dating.vue') }, + { path: 'app', name: 'App', component: () => import('@/views/App.vue') }, + { path: 'ecosystem', name: 'Ecosystem', component: () => import('@/views/Ecosystem.vue') }, + { path: 'about', name: 'About', component: () => import('@/views/About.vue') } + ] } + // { + // path: '/i18n-demo', + // name: 'I18nDemo', + // component: I18nDemo, + // meta: { + // title: '国际化演示' + // } + // }, + // { + // path: '/', + // name: 'Home', + // component: Home, + // meta: { + // title: '首页 - 极简官网' // 明确指定title为string类型 + // } as { title: string } // 强制类型断言 + // }, + // { + // path: '/about', + // name: 'About', + // component: About, + // meta: { + // title: '关于我们 - 极简官网' + // } as { title: string } + // }, + // { + // path: '/:pathMatch(.*)*', + // name: 'NotFound', + // component: () => import('@/views/NotFound.vue'), + // meta: { title: '404 - 页面不存在' } as { title: string } + // } ] export default routes diff --git a/src/style.css b/src/style.css index 79ef228..8b122da 100644 --- a/src/style.css +++ b/src/style.css @@ -62,9 +62,9 @@ button:focus-visible { } #app { - max-width: 1280px; + /*max-width: 1280px;*/ margin: 0 auto; - padding: 2rem; + /*padding: 2rem;*/ text-align: center; } diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue new file mode 100644 index 0000000..bc32358 --- /dev/null +++ b/src/views/Home/Home.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/src/views/Home/sections/Banner.vue b/src/views/Home/sections/Banner.vue new file mode 100644 index 0000000..1f7bc3b --- /dev/null +++ b/src/views/Home/sections/Banner.vue @@ -0,0 +1,95 @@ + + + + + diff --git a/src/views/Home/sections/CoreValue.vue b/src/views/Home/sections/CoreValue.vue new file mode 100644 index 0000000..da32bf3 --- /dev/null +++ b/src/views/Home/sections/CoreValue.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/src/views/Home/sections/CustomerFeedback.vue b/src/views/Home/sections/CustomerFeedback.vue new file mode 100644 index 0000000..ed332d5 --- /dev/null +++ b/src/views/Home/sections/CustomerFeedback.vue @@ -0,0 +1,188 @@ + + + + + diff --git a/src/views/Home/sections/GlobalService.vue b/src/views/Home/sections/GlobalService.vue new file mode 100644 index 0000000..0335937 --- /dev/null +++ b/src/views/Home/sections/GlobalService.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/src/views/Home/sections/Partners.vue b/src/views/Home/sections/Partners.vue new file mode 100644 index 0000000..9e54dd9 --- /dev/null +++ b/src/views/Home/sections/Partners.vue @@ -0,0 +1,124 @@ + + + + + diff --git a/src/views/Home/sections/UseCases.vue b/src/views/Home/sections/UseCases.vue new file mode 100644 index 0000000..16e8629 --- /dev/null +++ b/src/views/Home/sections/UseCases.vue @@ -0,0 +1,113 @@ + + + + + diff --git a/vite.config.ts b/vite.config.ts index 252c7ec..e706f19 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -5,20 +5,38 @@ import path from 'path' // 引入 path 模块 import viteImagemin from 'vite-plugin-imagemin' // 新插件 import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' +// 引入 ElementPlus 相关解析器 +import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' import legacy from '@vitejs/plugin-legacy' export default defineConfig({ plugins: [ vue(), + legacy({ targets: ['ie >= 11'], additionalLegacyPolyfills: ['regenerator-runtime/runtime'], modernPolyfills: true // 启用现代浏览器的 polyfill }), AutoImport({ - imports: ['vue', 'vue-router'] // 自动导入 Vue、Vue Router API + imports: ['vue', 'vue-router'], // 自动导入 Vue、Vue Router API + // 自动导入 Vue 相关函数，以及 ElementPlus 的相关函数等 + resolvers: [ + ElementPlusResolver({ + importStyle: 'sass', // 可选：按需导入样式 + directives: true, // 导入指令 + version: '2.3.6' // 版本号 + }) + ] }), Components({ + // 自动导入 ElementPlus 的组件 + resolvers: [ + ElementPlusResolver({ + importStyle: 'sass', + directives: true + }) + ], dirs: ['src/components'] // 自动扫描组件目录 }), viteImagemin({ @@ -42,6 +60,17 @@ export default defineConfig({ } } }, + css: { + preprocessorOptions: { + less: { + // 关键配置：自动注入 global.less + additionalData: `@import "@/styles/global.less";`, + + // 可选：如果需要自定义 Less 选项 + javascriptEnabled: true + } + } + }, resolve: { alias: { '@': path.resolve(__dirname, 'src') // 添加路径别名