ts+vu3+setup+volar

1 js 安装

cd /

vue create 项目

2 js中声明变量

<template>
  <div class="home">
    <h1>vue+ts+setup+volar</h1>
    <button @click="addCount(2)">{{count}}</button>
    <button>{{num}}</button>
    <button v-if="flag">{{str}}</button>
    <div v-for="(item,index) in list" :key="index">{{item}}</div>
    <step :value="5" :max="20" :min="1" :step="2"></step>
  </div>
</template>
<script lang="ts" setup>
    import step from '@/components/StepCom.vue'
    import {ref,reactive} from 'vue'
    const count = ref<number>(10);
    const num = ref(5); 
    const str = ref<string>("i love ts")
    const flag = ref<boolean>(true)
</script>

3 js中定义函数

<template>
  <div class="home">
   
    <button @click="addCount(2)">{{count}}</button>
  
    
    
  </div>
</template>

<script lang="ts" setup>
    import step from '@/components/StepCom.vue'
    // 定义函数
    function addCount(n:number):void{
      count.value+=n;
    }

</script>

4 声明接口

interface Iuser {

  name:string,

  age:number,

  pet:undefined|string

}

5输出列表

const list = reactive<Iuser>({name:"mumu",age:18,pet:"dog"})