# npm
npm install vue@^3.6.0 --save

# yarn
yarn add vue@^3.6.0

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [
    vue({
      compilerOptions: {
        mode: 'vapor' // 核心配置：開啟 Vapor Mode
      }
    })
  ]
});

<template&gt;
  &lt;div class="company-home"&gt;
    <!-- 導航欄（靜態(tài)） -->
    <nav class="nav">
      <div class="logo">Vue 科技</div>
      <ul class="nav-list">
        <li><a href="#home" rel="external nofollow" >首頁</a></li>
        <li><a href="#product" rel="external nofollow" >產(chǎn)品中心</a></li>
        <li><a href="#about" rel="external nofollow" >關于我們</a></li>
        <li><a href="#contact" rel="external nofollow" >聯(lián)系我們</a></li>
      </ul>
    </nav><!-- Banner 圖（靜態(tài)） -->
    <div class="banner">
      <img src="/banner.jpg" alt="企業(yè)Banner">
    </div&gt;

    <!-- 產(chǎn)品介紹（靜態(tài)） -->
    <section id="product" class="product-section">
      <h2 class="section-title">產(chǎn)品中心</h2>
      <div class="product-list">
        <div class="product-item">
          <img src="/product1.jpg" alt="產(chǎn)品1">
          <h3>Vue 性能優(yōu)化方案</h3>
          <p>基于 Vapor Mode 的前端性能優(yōu)化服務，助力項目性能飆升</p>
        </div>
        <div class="product-item">
          <img src="/product2.jpg" alt="產(chǎn)品2">
          <h3>跨平臺開發(fā)框架</h3>
          <p>一套代碼適配多端，兼顧性能與開發(fā)效率</p>
        </div>
        <div class="product-item">
          <img src="/product3.jpg" alt="產(chǎn)品3">
          <h3>前端監(jiān)控系統(tǒng)</h3>
          <p>實時監(jiān)控項目性能，精準定位問題</p>
        </div>
      </div&gt;
    &lt;/section&gt;

    <!-- 聯(lián)系我們（靜態(tài)） -->
    <section id="contact" class="contact-section">
      <h2 class="section-title">聯(lián)系我們</h2>
      <p>地址：北京市朝陽區(qū) XX 大廈 15 層</p>
      <p>電話：400-123-4567</p>
      <p>郵箱：contact@vue-tech.com</p>
    </section>
  </div>
</template>

<script setup>
// 無動態(tài)邏輯，僅靜態(tài)展示
</script>

<style scoped>
.company-home {
  width: 1200px;
  margin: 0 auto;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  border-bottom: 1px solid #eee;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #42b983;
}

.nav-list {
  display: flex;
  list-style: none;
}

.nav-list li {
  margin-left: 30px;
}

.nav-list a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
}

.banner img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  margin: 20px 0;
}

.section-title {
  font-size: 28px;
  text-align: center;
  margin: 40px 0 20px;
  color: #333;
}

.product-list {
  display: flex;
  justify-content: space-between;
  margin: 40px 0;
}

.product-item {
  width: 30%;
  text-align: center;
}

.product-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.product-item h3 {
  margin: 15px 0;
  color: #333;
}

.product-item p {
  color: #666;
  line-height: 1.5;
}

.contact-section {
  text-align: center;
  padding: 40px 0;
  background-color: #f5f5f5;
  border-radius: 8px;
  margin: 40px 0;
}

.contact-section p {
  color: #666;
  line-height: 1.8;
  font-size: 16px;
}
</style>

<template>
  <CompanyHome />
</template>

<script setup>
import CompanyHome from './components/CompanyHome.vue';
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Microsoft YaHei', sans-serif;
}
</style>

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          ...options.compilerOptions,
          mode: 'vapor' // 開啟 Vapor Mode
        };
        return options;
      });
  }
};

<template>
  <div class="user-detail">
    <h2 class="detail-title">用戶信息詳情</h2>
    <div class="detail-content">
      <div class="detail-item">
        <span class="label">用戶 ID：</span>
        <span class="value">{{ userId }}</span>
      </div>
      <div class="detail-item">
        <span class="label">用戶名：</span>
        <span class="value">{{ username }}</span>
      </div>
      <div class="detail-item">
        <span class="label">性別：</span>
        <span class="value">{{ gender }}</span>
      </div>
      <div class="detail-item">
        <span class="label">郵箱：</span>
        <span class="value">{{ email }}</span>
      </div>
      <div class="detail-item">
        <span class="label">注冊時間：</span>
        <span class="value">{{ registerTime }}</span>
      </div>
      <div class="detail-item">
        <span class="label">賬號狀態(tài)：</span>
        <span class="value status-normal">正常</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

// 初始化數(shù)據(jù)（僅加載一次，無后續(xù)更新）
const userId = ref('');
const username = ref('');
const gender = ref('');
const email = ref('');
const registerTime = ref('');

onMounted(() => {
  // 模擬接口請求獲取用戶數(shù)據(jù)
  setTimeout(() => {
    userId.value = 'U20240601001';
    username.value = '張三';
    gender.value = '男';
    email.value = 'zhangsan@example.com';
    registerTime.value = '2024-06-01 10:30:00';
  }, 500);
});
</script>

<style scoped>
.user-detail {
  width: 800px;
  margin: 40px auto;
  padding: 30px;
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: #fff;
}

.detail-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-item {
  display: flex;
  align-items: center;
}

.label {
  font-size: 16px;
  color: #666;
  width: 100px;
  text-align: right;
  margin-right: 20px;
}

.value {
  font-size: 16px;
  color: #333;
}

.status-normal {
  color: #42b983;
  font-weight: bold;
}
</style>