初始化项目

src/views/NewsView.vue

+<script setup>
+import TheHeader from '../components/TheHeader.vue'
+import TheFooter from '../components/TheFooter.vue'
+</script>
+
+<template>
+  <div class="news">
+    <TheHeader />
+    <div class="center-width" style="padding: 50px 0; min-height: 400px;">
+      <h1>新闻资讯</h1>
+      <p>此页面正在开发中...</p>
+    </div>
+    <TheFooter />
+  </div>
+</template> 
\ No newline at end of file

src/views/ProductsView.vue

+<script setup>
+import TheHeader from '../components/TheHeader.vue'
+import TheFooter from '../components/TheFooter.vue'
+</script>
+
+<template>
+  <div class="products">
+    <TheHeader />
+    <div class="center-width" style="padding: 50px 0; min-height: 400px;">
+      <h1>产品技术</h1>
+      <p>此页面正在开发中...</p>
+    </div>
+    <TheFooter />
+  </div>
+</template>
+
+<style>
+h1 {
+  margin-bottom: 20px;
+}
+</style> 
\ No newline at end of file

vite.config.js

+import { defineConfig } from "vite";
+import { fileURLToPath, URL } from "node:url";
+import vue from "@vitejs/plugin-vue";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  // 配置@/
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+});