Vue3 +TScript 基本开发-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3 +TScript 基本开发。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

首先你要使用 vite 创建项目

npm init vue@latest

并选择带ts的版本
Vue3 +TScript 基本开发,typescript,vue.js

文件的结构
Vue3 +TScript 基本开发,typescript,vue.js
main.ts 文件

import { createApp } from "vue"
import { createPinia } from 'pinia'

import App from "./App.vue"
const pinia = createPinia()
const app = createApp(App)

app.use(pinia).mount("#app")

App.vue 文件

<script setup>
import "./styles/base.css"
import "./styles/index.css"
    
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";

</script>
<template>
  <section class="todoapp">
    <TodoHeader></TodoHeader>
    <TodoMain></TodoMain>
    <TodoFooter></TodoFooter>
  </section>
</template>

store / todos.js 文件文章来源地址https://www.toymoban.com/news/detail-541149.html

import axios from 'axios'
// import { el } from 'element-plus/es/locale'
import {defineStore} from 'pinia'
import {computed, ref} from 'vue'

export default defineStore('todos', () => {
    let list = ref([])

    // 得到数据
    const getList = async () => {
        const res = await axios.get('/list')
        list.value = res.data
        console.log('得到数据',res)
    }
    // 修改状态
    const editStatus = async (id,obj) => {
        const res = await axios.patch('/edit/'+id,obj)
        console.log('修改状态',res)
    }
    // 删除当前项
    const delData = async (id) => {
        const res = await axios.delete('/del/'+id)
        console.log('删除当前项', res)
    }
    // 添加
    const addData = async (obj) => {
        const res = await axios.post('/add',obj)
        console.log('添加', res)
    }
    // 计算属性
    const type = ref('all')
    const setType = curType => type.value = curType
    
    const listType = computed(()=> {
        if(type.value === 'all') {
            return list.value
        } else if(type.value === 'yes') {
            return list.value.filter(it => it.isDone)
        } else {
            return list.value.filter(it => !it.isDone)
        }
    })
    
    console.log('type属性',type)

    // 导出
    return {
        list,
        getList,
        editStatus,
        delData,
        addData,
        setType,
        type,
        listType
    }
})