Mluti-Agent_simulation/WebModule/train-web

项目介绍

技术栈

Vue 3 + TypeScript + Vite

• canvas
• vue3
• vuex
• vue-router
• typescript
• vite
• axios
• element-plus
• vant
• mockjs
• echarts
• dayjs
• js-cookie
• nprogress
• vue-i18n
• pinia
• pinia-plugin-persistedstate
• pinia-plugin-persist

参考地址

• VUE3
• canvas 进阶

VUE3 参数模板

• TypeScript 与组合式 API

<!-- 子组件 -->
<template>
  <h1>ts sample</h1>
  <p>{{ msg }}</p>
</template>
<script setup lang="ts">
// 第一种方式:分离模式
interface Props {
  msg?: string | number | boolean;
  title?: string[];
}
withDefaults(defineProps<Props>(), {
  msg: "hello",
  title: () => ["one", "two"],
});

// 第二种方式：组合模式
withDefaults(defineProps<{ msg?: string | number | boolean; title?: string }>(), {
  msg: "hello vite",
  title: "默认标题",
});

// 第三种方式：利用接口声明类型
interface testType {
  name: string;
  age: number;
}
const props = withDefaults(
  defineProps<{
    text: testType;
  }>(),
  {
    text: {
      name: "flying_dark_feather",
      age: 20,
    },
  }
);
</script>