vue3+ts实战

目录

一、ts语法练习

1.1、安装

1.2、语法

二、vue3+ts

2.1、项目创建

2.1.1、项目创建(建议node版本在16.及以上)

2.1.2、下载路由、axios

2.1.3、引入element-plus

2.1.4、报错解决

(1)文件路径下有红色波浪

(2)组件名称下有红色波浪

(3)引入模块下有红色波浪

2.2、导航栏模块

2.3、表格模块

2.4、事件与弹窗显示

2.5、Icon组件封装

一、ts语法练习

1.1、安装

安装：npm install -g typescript
检验：tsc -v
编译为js文件:tsc demo.ts(文件名)

1.2、语法

参考博客：TypeScript 语法_typescript 往后加n天-CSDN博客

二、vue3+ts

2.1、项目创建

2.1.1、项目创建(建议node版本在16.及以上)

npm init vite

初始化时填写项目包名称xxx，选择“Vue”、“TypeScript”

cd xxx后npm install,然后npm run dev，即可打开新项目，看到首页

2.1.2、下载路由、axios

npm i vue-router -S

npm i axios -S

在src包下创建router文件夹，并在文件夹下创建index.ts文件;

在src包下创建http/api文件夹，并在文件夹下创建http.ts文件;

(1)、router下的index.ts代码

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
// interface IRouterList {
//     name?: string,
//     path: string,
//     component?: any,
//     [propname: string]: any
// }
// RouteRecordRaw 内置的类型接口,也可以使用自定义的类型约束: IRouterList[]或者Array<IRouterList>
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        name: 'home',
        component: () => import('../components/layout/index.vue'),
        children: [{
            path: '/index',
            name: 'index',
            component: () => import('../views/index/index.vue')
        },
        {
            path: '/monitor',
            name: 'monitor',
            component: () => import('../views/monitor/index.vue')
        },
  ]
    }
];
const router = createRouter({
    history: createWebHashHistory(),
    routes
});
export default router;

在main.ts里引入:

import router from './router'

createApp(App).use(router).mount('#app')

(2)、api下的http.ts代码

import axios, { type AxiosRequestConfig, AxiosResponse } from 'axios';
axios.defaults.baseURL = `http://localhost:3000`;
// AxiosRequestConfig:请求参数类型
// 请求拦截器
axios.interceptors.request.use((config: AxiosRequestConfig | any) => config);
// 响应拦截器
axios.interceptors.response.use((res: AxiosResponse) => {
    return res
}, err => {
    return Promise.reject(err)
});
// export default axios;
// 如何去定义传入参数类型或返回的类型         unknown:未知类型
interface IHttp {
    request<T>(method: string, url: string, params?: unknown): Promise<T>;
}
const http: IHttp = {
    request: (method, url, params) =>
        axios({
            method: method,
            url: url,
            data: params
        })
}
export default http;

页面调用接口：

<script lang="ts" setup>
import axios from '../../api/http'
import { onMounted, ref } from 'vue'
interface ItableData {
    date: string,
    title: string,
    user: string,
    id: number,
    check: boolean
}
const tableData = ref<ItableData[]>([]);
onMounted(async () => {
    let { data } = await axios.request<{ data: ItableData[] }>('get', '/data/query');
    tableData.value = data
})
</script>

不封装的话，只能一个一个写:

import axios from 'axios'
onMounted(async () => {
    axios.get('http://localhost:3000/data/query').then(res => {
        console.log(res);
    })
})

2.1.3、引入element-plus

官网：Overview 组件总览 | Element Plus

安装：npm install element-plus --save

引入：(建议按需引入)https://element-plus.org/zh-CN/guide/quickstart.html

unplugin-auto-import可以不要

注意：如果下载成功，可以在项目的package.json文件里看到对应的版本号

2.1.4、报错解决

(1)文件路径下有红色波浪

问题描述：

component: () => import('../views/index/index.vue');//（路径下面有红色波浪线）

解决方法：

在项目的vite-env.d.ts文件中加入以下代码即可

declare module '*.vue' {
    import { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
  }
(2)组件名称下有红色波浪

问题描述：

import Icons from "../common/icons.vue";  // (Icons下面有红色波浪线)

解决方法：

Vetur(语句高亮插件)暂不支持ts，可以禁用，换成Vue Language Features(Volar)或Vue - Official插件

(3)引入模块下有红色波浪

问题：import { ref } from "vue"; //(vue下面有红色波浪线)

解决方法：

在项目的tsconfig.json文件中的moduleResolution属性值改为"node"

2.2、导航栏模块

注意： <el-menu>里面有了router属性才能跳转到对应的页面

//====================================导航栏页面====================
<template>
  <el-aside width="200px">
    <!-- <el-menu>里面有了router才能跳转到对应的页面 -->
    <el-menu default-active="2" class="el-menu-vertical-demo" router>
      <el-menu-item :index="v.url" v-for="v in menuItems" :key="v.url">
        <!-- <el-icon><component :is="v.icon"></component></el-icon> -->
        <el-icon><Icons :icon="v.icon" /></el-icon>
        <span>{{ v.name }}</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>
<script lang="ts" setup>
import Icons from "../common/icons.vue"; 
import { useMenu } from "./navMenu";
const { menuItems } = useMenu();
</script>
//====================================navMenu.ts页面====================
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from "@element-plus/icons-vue";
import { INavMenu } from '../../models';//INavMenu 是封装的接口
export const useMenu = () => {
    const menuItems: INavMenu[] = [
        { name: "首页", url: "/index", icon: Document },
        { name: "监督活动", url: "/monitor", icon: Location },
        { name: "订单管理", url: "/order", icon: Setting },
        { name: "统计分析", url: "/census", icon: Setting },
    ];
    return {
        menuItems
    }
}
//====================================models文件夹里的index.ts页面====================
export interface INavMenu {//定义接口，作限制类型
    name: string,
    url: string,
    icon?: any,
}

2.3、表格模块

下面模拟了表格自带的筛选功能、文字处理功能、文字过长展示功能以及获取接口数据展示等。

<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Date" :filters="dateHandler" :filter-method="filterHandler" />
        <el-table-column prop="title" label="title" />
        <el-table-column prop="user" label="user" show-overflow-tooltip />
        <el-table-column prop="id" label="id" />
        <el-table-column prop="check" label="check">
            <template #default="{ row }">
                <el-tag :type="row.check ? 'success' : 'danger'">{{ row.check ? '已完成' : '未完成' }}</el-tag>
            </template>
        </el-table-column>
    </el-table>
</template>
<script lang="ts" setup>
import axios from '../../api/http';
import { onMounted, ref, computed } from 'vue';
interface ItableData {
    date: string,
    title: string,
    user: string,
    id: number,
    check: boolean
}
const tableData = ref<ItableData[]>([{
    date: '2024-5-20',
    title: '吧就',
    user: 'dcsavvvvvvvvvvvv',
    id: 1,
    check: true
},
{
    date: '2024-5-21',
    title: '的繁荣的',
    user: '超出隐藏超出隐藏超出隐藏超出隐藏超出隐藏超出隐藏超出隐藏超出隐藏',
    id: 2,
    check: false
}]);
onMounted(async () => {
    let { data } = await axios.request<{ data: ItableData[] }>('get', '/data/query');
    tableData.value = data
})
// 获取日期-动态数据(computed处理)
const dateHandler = computed(() => {
    // return tableData.value.map(item => ({ text: item.date, value: item.date }))
    const map = new Map();
    for (let item of tableData.value) {
        if (!map.has(item.date)) {
            map.set(item.date, item)
        }
    }
    let data = [...map.values()];//map去重
    return data.map(item => ({ text: item.date, value: item.date }))
})
// 筛选方法
const filterHandler = (
    value: string,
    row: ItableData,
) => {
    return row.date === value
}
</script>

2.4、事件与弹窗显示

<template>
 <el-button type="success" @click="setData('add', null)">添加</el-button>
 <el-button type="success" @click="setData('edit', row)">编辑</el-button>
 <!-- 弹出框 -->
 <el-dialog v-model="dialogFormVisible" title="操作数据" width="500">
        <el-form :model="form">
            <el-form-item label="Promotion name">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">
                    提交
                </el-button>
            </div>
        </template>
  </el-dialog>
</template>
<script lang="ts" setup>
let dialogFormVisible = ref<boolean>(false);//弹框状态
let form = ref({});//弹框数据
// 添加或编辑方法
function setData(type: string, row: ItableData | null) {
    dialogFormVisible.value = true;//弹框显示
    type == 'add' ? form.value = {} : form.value = { ...row }
}
</script>

2.5、Icon组件封装

//==============================主页面============================
<template>
<el-icon><Icons :icon="v.icon" /></el-icon>
</template>
<script lang="ts" setup>
import Icons from "../common/icons.vue"; 
</script>
//==============================icons.vue页面============================
<template>
  <component :is="icon"></component>
</template>
<script lang="ts" setup>
import { defineProps } from "vue";
const { icon } = defineProps<{ icon: any }>();
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/635833.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

使用docker完整搭建前后端分离项目

使用docker完整搭建前后端分离项目

1、docker的优势&#xff0c;为啥用docker 2、docker的核心概念 镜像【Image】- 只读模板 容器【Container】- 运行镜像的一个外壳&#xff0c;相当于一个独立的虚拟机 仓库【repository】- 镜像的管理工具&#xff0c;可公开&#xff0c;可私有&#xff1b;类似git仓库 3、c…
阅读更多...
【字典树（前缀树） 位运算】1803. 统计异或值在范围内的数对有多少

【字典树（前缀树） 位运算】1803. 统计异或值在范围内的数对有多少

本文涉及知识点 字典树&#xff08;前缀树&#xff09; 位运算 LeetCode1803. 统计异或值在范围内的数对有多少 给你一个整数数组 nums &#xff08;下标 从 0 开始 计数&#xff09;以及两个整数&#xff1a;low 和 high &#xff0c;请返回 漂亮数对 的数目。 漂亮数对 是…
阅读更多...
勒索病毒的策略与建议

勒索病毒的策略与建议

随着网络技术的快速发展&#xff0c;勒索病毒攻击成为全球范围内日益严重的网络安全威胁。勒索病毒通过加密用户文件或锁定系统来勒索赎金&#xff0c;给个人和企业带来了巨大的损失。因此&#xff0c;了解如何应对勒索病毒攻击至关重要。本文将概述一些有效的防范措施和应对策…
阅读更多...
【01】GeoScene Enterprise(Linux)许可更新

【01】GeoScene Enterprise(Linux)许可更新

如果在Linux环境下部署了GeoScene Enterprise基础环境&#xff0c;也就是部署了server、portal、datastore、web adaptor四大组件&#xff0c;当试用许可到期后&#xff0c;拿到新的许可想要更新许可&#xff0c;从而使得软件能够正常工作&#xff0c;下述步骤是更新GeoScene E…
阅读更多...
pytorch-20 lstm实践

pytorch-20 lstm实践

一、LSTM预测类型 数据类型&#xff1a;单变量、多变量与面板数据数据处理&#xff08;滑窗方式&#xff09;&#xff1a;单变量有seq2seq&#xff0c;seq2point&#xff1b;多变量&#xff1a;特征滑窗&#xff0c;带标签滑窗 1. 数据类型&#xff1a;单变量、多变量与面板数…
阅读更多...
Windows安全应急--反隐身术

Windows安全应急--反隐身术

NO.1 dir命令 首先做个演示&#xff0c;把演示01这个文件夹隐藏起来&#xff0c; 在文件夹上是看不到了&#xff0c; 我们可以使用dir命令查看&#xff0c; NO.2 文件夹选项–显示隐藏 这个是非常常规的了&#xff0c; 这里不做过多介绍 有些隐藏文件很顽固&#xff0c;上面…
阅读更多...
第一周：参照与变迁

第一周：参照与变迁

这是我于2020年10月参加的一个为期10周的管理课程培训的作业集。当时要求每周都需提交一篇课后作业。现在打算重温并整理这些作业&#xff0c;以验证自己在这几年间是否真正有所长进。 事物一旦向相反方向发生改变&#xff0c;那么会相对程度的改变&#xff0c;并且会下意识的以…
阅读更多...
【机器学习与大模型】驱动下的电子商务应用

【机器学习与大模型】驱动下的电子商务应用

摘要&#xff1a; 随着信息技术的飞速发展&#xff0c;电子商务已经成为当今商业领域中最为活跃和重要的部分之一。而机器学习和大模型的出现&#xff0c;为电子商务带来了新的机遇和挑战。本文深入探讨了机器学习与大模型在电子商务中的应用&#xff0c;包括个性化推荐、精准营…
阅读更多...
MyBatisPlus标准分页功能制作，以及设置分页拦截器，selectPage(new Page＜＞(current,size),null)

MyBatisPlus标准分页功能制作，以及设置分页拦截器，selectPage(new Page＜＞(current,size),null)

目录 1、设置分页拦截器 2、创建数据库及表 3、pom.xml 4、添加MP的相关配置信息 application.yml 5、根据数据库表创建实体类 User 6、创建 UserDao 接口 7、编写引导类 8、编写测试类 9、Run的运行结果 1、设置分页拦截器 package com.example.config; import com.baomidou.m…
阅读更多...
文章解读与仿真程序复现思路——电力系统保护与控制EI\CSCD\北大核心《基于改进Q学习算法和组合模型的超短期电力负荷预测》

文章解读与仿真程序复现思路——电力系统保护与控制EI\CSCD\北大核心《基于改进Q学习算法和组合模型的超短期电力负荷预测》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…
阅读更多...
okcc呼叫系统如何限制主叫号码的使用频次？

okcc呼叫系统如何限制主叫号码的使用频次？

OKCC呼叫中心系统是一套完整的呼叫中心与管理平台,为电话营销型企业专门设计的电销平台与客服平台。OKCC系统集电话营销功能与热线客服功能于一体,兼具呼入呼出功能。那么okcc呼叫系统如何限制主叫号码的使用频次呢&#xff1f;请和小编一起来看看&#xff0c;技术问题欢迎一起…
阅读更多...
Java基础教程 - 9 集合

Java基础教程 - 9 集合

更好的阅读体验&#xff1a;点这里 &#xff08; www.doubibiji.com &#xff09; 更好的阅读体验&#xff1a;点这里 &#xff08; www.doubibiji.com &#xff09; 更好的阅读体验&#xff1a;点这里 &#xff08; www.doubibiji.com &#xff09; 9 集合 什么是集合&…
阅读更多...
煤矿ai智能监控系统

煤矿ai智能监控系统

煤矿ai智能监控系统利用智能视频分析技术和YOLO深度学习技术&#xff0c;煤矿ai智能监控系统可以对煤矿现场进行全方位的监测和分析。煤矿ai智能监控系统能够精确识别和分析皮带锚杆、矸石、木板、堆煤等运输设备和物料的运行状态&#xff0c;同时也可以识别煤量的大小以及非法…
阅读更多...
Rocketmq集群再搭建

Rocketmq集群再搭建

注意上面这个官方架构是 主从模式&#xff0c;还无法做到高可用&#xff0c;因为master节点宕机&#xff0c;从节点没法变成主节点&#xff0c;需要人工重启&#xff0c;够用了。 1. 先准备1台虚拟机&#xff0c;装好1台再克隆2台 根据上面的图&#xff0c;3台机器中有一台…
阅读更多...
k8s之yaml文件详解

k8s之yaml文件详解

文章目录 k8s之yaml文件详解一、关于yaml文件1、k8s支持的文件格式2、YAML语言格式3、查看api资源版本标签4、编写nginx-test.yaml资源配置清单4.1 编写资源配置清单4.2 创建资源对象4.3 查看创建的pod资源 5、创建service服务对外提供访问并测试5.1 编写nginx-svc-test.yaml5.…
阅读更多...
【有手就行】使用你自己的声音做语音合成，CPU都能跑,亲测有效

【有手就行】使用你自己的声音做语音合成，CPU都能跑,亲测有效

此文介绍在百度飞桨上一个公开的案例&#xff0c;亲测有效。 厌倦了前篇一律的TTS音色了吗&#xff1f;打开短视频听来听去就是那几个声音&#xff0c;快来试试使用你自己的声音来做语音合成吧&#xff01;本教程非常简单&#xff0c;只需要你能够上传自己的音频数据就可以(建议…
阅读更多...
08.CNN

08.CNN

文章目录 Observation 1Pooling - Max PoolingFlattenApplication&#xff1a;Playing Go使用验证集选择模型食物分类 Observation 1 Pooling - Max Pooling Pooling主要为了降低运算量&#xff0c;现在一般不用了&#xff0c;全convolution Flatten Application&#xff1a;P…
阅读更多...
【Linux学习】进程基础API

【Linux学习】进程基础API

下面是有关进程基础API的相关介绍&#xff0c;希望对你有所帮助&#xff01; 小海编程心语录-CSDN博客 目录 1. 僵尸进程与孤儿进程 1.1 孤儿进程 1.2 僵尸进程 2. 监视子进程 2.1 wait() 2.2 waitpid() 3. 执行新程序 exec族函数 4. 守护进程 1. 僵尸进程与孤儿进程…
阅读更多...
机器学习实验----逻辑回归实现二分类

机器学习实验----逻辑回归实现二分类

目录 一、介绍 二、sigmoid函数 &#xff08;1&#xff09;公式&#xff1a; &#xff08;2&#xff09;sigmoid函数的输入 预测函数&#xff1a; 以下是sigmoid函数代码&#xff1a; 三、梯度上升 &#xff08;1&#xff09;似然函数 公式&#xff1a; 概念&#xff…
阅读更多...
Golang | Leetcode Golang题解之第100题相同的树

Golang | Leetcode Golang题解之第100题相同的树

题目&#xff1a; 题解&#xff1a; func isSameTree(p *TreeNode, q *TreeNode) bool {if p nil && q nil {return true}if p nil || q nil {return false}queue1, queue2 : []*TreeNode{p}, []*TreeNode{q}for len(queue1) > 0 && len(queue2) > …
阅读更多...
最新文章

Copyright @ 2022~2023