<!-- index.html -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_AK"></script>

<template>
  <div id="map" style="width: 500px; height: 400px;"></div>
</template>

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

const map = ref(null);

onMounted(() => {
  map.value = new BMap.Map("map"); // 创建Map实例
  const point = new BMap.Point(116.404, 39.915); // 创建点坐标
  map.value.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
});
</script>

<style>
/* 你的样式 */
</style>

<template>
  <div>
    <img :src="imageSrc" alt="Dynamic Image" />
  </div>
</template>

<script setup>
// 假设所有图片都在项目的 public/images 目录下
const images = import.meta.glob('/public/images/*.(png|jpg|jpeg|svg)')

// 动态选择一个图片名称来使用
const imageName = 'example.png'
const imageSrc = images[`/public/images/${imageName}`].default
</script>

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td v-for="cell in row" :key="cell">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MobileTable',
  setup() {
    const headers = ref(['Column 1', 'Column 2', 'Column 3']);
    const rows = ref([
      { id: 1, cells: ['Row 1 Cell 1', 'Row 1 Cell 2', 'Row 1 Cell 3'] },
      { id: 2, cells: ['Row 2 Cell 1', 'Row 2 Cell 2', 'Row 2 Cell 3'] },
      // ...
    ]);

    return { headers, rows };
  },
});
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}
</style>

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json()); // 用于解析JSON的中间件

// 口红推荐接口示例
app.get('/recommend', (req, res) => {
  const { color, size } = req.query;
  // 假设有一个简单的推荐逻辑
  const recommended = getRecommendedLipstick(color, size);
  res.json(recommended);
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

// 假设的推荐逻辑函数
function getRecommendedLipstick(color, size) {
  // 这里会根据color和size进行一些数据分析和推荐
  return {
    color: 'red',
    size: 'medium',
    // 其他口红信息
  };
}

<template>
  <div>
    <input v-model="color" type="text" placeholder="Color">
    <input v-model="size" type="text" placeholder="Size">
    <button @click="recommend">Recommend</button>
    <div v-if="recommended">
      Recommended Lipstick: {{ recommended.color }} - {{ recommended.size }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      color: '',
      size: '',
      recommended: null
    };
  },
  methods: {
    async recommend() {
      try {
        const response = await this.$http.get('/recommend', {
          params: { color: this.color, size: this.size }
        });
        this.recommended = response.data;
      } catch (error) {
        console.error('Error fetching recommended lipstick:', error);
      }
    }
  }
};
</script>

// 定义变量
@primary-color: #f00;

// 使用变量
div {
  color: @primary-color;
}

npm install vue-markdown

<template>
  <vue-markdown>{{ markdownContent }}</vue-markdown>
</template>

<script>
// 引入vue-markdown组件
import VueMarkdown from 'vue-markdown'

export default {
  components: { VueMarkdown },
  data() {
    return {
      // 这里是你的Markdown内容
      markdownContent: `
# 标题

这是一个例子。

- 列表项A
- 列表项B
      `
    }
  }
}
</script>

<template>
  <vue-markdown :source="markdownContent" :toc="true"></vue-markdown>
</template>

<template>
  <div ref="threeContainer"></div>
</template>

<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
import { TWEEN } from 'three/examples/jsm/libs/tween.module.min.js';

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 加载环境光照
const loader = new RGBELoader();
loader.loadAsync('./textures/envMap.hdr').then((texture) => {
  scene.environment = texture;
  texture.mapping = THREE.EquirectangularReflectionMapping;
});

// 加载3D模型
const gltfLoader = new GLTFLoader();
gltfLoader.load('./models/scene.gltf', (gltf) => {
  scene.add(gltf.scene);
});

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 使用TweenJS进行动画更新
TWEEN.start();

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  TWEEN.update();
  controls.update();
  renderer.render(scene, camera);
}
animate();
</script>

<style>
body {
  margin: 0;
  overflow: hidden;
}
</style>

import { h, defineComponent, render } from 'vue';

// 定义一个全局组件
const MyGlobalComponent = defineComponent({
  props: {
    msg: String
  },
  setup(props) {
    return () => h('div', props.msg);
  }
});

// 全局注册组件
app.component('MyGlobalComponent', MyGlobalComponent);

// 创建一个Vue实例并挂载到#app元素
const app = Vue.createApp({});
const root = document.createElement('div');
root.id = 'app';
document.body.appendChild(root);

// 使用渲染函数手动渲染组件
const vnode = h(MyGlobalComponent, { msg: 'Hello Vue 3!' });
render(vnode, root);