【VUE实战项目】使用typescript重构项目

前言

本文是博主vue实战系列中的一篇,本系列不是专业的前端教程,是专门针对后端熟悉前端的。前面我们用vue实现了一个基础的管理系统,前文专栏地址:

https://blog.csdn.net/joker_zjn/category_12469788.html?spm=1001.2014.3001.5482

接下来我们要基于typescript来重构该项目。

目录

目录

前言

目录

搭架子

安装依赖

迁移配置

迁移其它

重构路由

api重构


搭架子

重新建一个项目来做ts的重构吧。

npx vue create project-ts

不要选择vue2还是vue3,而是选择手动设置,在手动设置里,选择上ts:

选择配置上以下内容:

然后选择2.X版本,做以下配置:

创建出来的项目的目录结构:

可以看到由于上面选择了支持ts,main.js变成了main.ts,而且代码的工程目录中多了很多关于ts的配置文件:

  • shims-vue.d.ts,用来支持在ts中使用vue

  • tsconfig.json,用来对ts进行配置

安装依赖

架子搭好了,下一步就是安装依赖。

cnpm i element-ui font-awesome axios echarts@4 -S

迁移配置

仔细想想项目里会有哪些配置?无非就是vue的配置文件,vue.config.js以及main.js。

在新项目中建一个vue.config.js,把vue的配置从老项目中复制过去,并追加一些对webpack的配置:

module.exports = {  
    devServer:{
      open:true,
      host:'localhost',
      //配置代理
      proxy:{
        '/api':{
          //目标地址
          target:'http://127.0.0.1:8081/api/',
          //开启跨域
          changeOrigin:true,
          pathRewrite:{
            '^/api':''
          }
        }
      }
    },
    //对webpack进行配置
    chainWebpack(chainWebpack){
        chainableWebWebpack.resovle={extensions:['.js','.ts','.json','.d.ts']}
    }
  }

然后将老项目的main.js手动合并到新的项目的main.ts中来:

在合并过程中有可能有些import会报错,把对应的依赖在node_moudle中删除重新install即可。

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

// import '../plugins/element.js'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'font-awesome/css/font-awesome.min.css';
import axios from "axios";

//import service from './utils/service';

import echarts from 'echarts';

Vue.use(ElementUI)
//挂载到原型,可以在全局使用
Vue.prototype.axios=axios
// Vue.prototype.service=service;
Vue.config.productionTip = false
Vue.prototype.$echarts=echarts
Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

然后我们会发现,还有老项目中的service.js还要合过来,其实不止service.js,utils下面的所有js都要拿过来:

直接把整个utils文件夹拿过来吧。

然后需要在shims-vue中配置将echarts和自己写的这些js暴露出来,在main.ts中才能被引用到:

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}
//有一些第三方库和自定义的js或者三方的js,并不支持ts
//用declare module可以将其完成兼容,从而在ts中import它们
declare module 'echarts'
declare module '*.js'

迁移其它

配置和依赖都迁移完了,接下来该迁移其它东西了。其它还有什么?

assert文件夹、router文件夹、api文件夹、component文件夹、app.vue

将这些全数复制过来覆盖新项目默认初始化出来的即可。

重构路由

由于现在项目用的是ts不是js,所以要将原来的router.js重构为router.ts,项目初始化后router.js中是有配置示例的,直接将原来的路由里面的各个路由放入这个数组中即可:

import Vue from "vue";
import Router from "vue-router";

const routes: Array<any> = [
  {
    path: "/",
    redirect: "/login",
    name: "首页",
    hidden: true,
    component: () => import("@/components/Login.vue"),
  },
  {
    path: "/login",
    name: "Login",
    hidden: true,
    component: () => import("@/components/Login.vue"),
  },
  {
    path: "/home",
    name: "学生管理",
    iconClass: "fa fa-users",
    //默认转跳到学生管理页
    redirect: "/home/student",
    component: () => import("@/components/Home.vue"),
    children: [
      {
        path: "/home/student",
        name: "学生列表",
        iconClass: "fa fa-list",
        component: () => import("@/components/students/StudentList.vue"),
      },
      {
        path: "/home/info",
        name: "信息列表",
        iconClass: "fa fa-list-alt",
        component: () => import("@/components/students/InfoList.vue"),
      },
      {
        path: "/home/infos",
        name: "信息管理",
        iconClass: "fa fa-list-alt",
        component: () => import("@/components/students/InfoLists.vue"),
      },
      {
        path: "/home/work",
        name: "作业列表",
        iconClass: "fa fa-list-ul",
        component: () => import("@/components/students/WorkList.vue"),
      },
      {
        path: "/home/workMent",
        name: "作业管理",
        iconClass: "fa fa-list",
        component: () => import("@/components/students/WorkMent.vue"),
      },
    ],
  },
  {
    path: "/home/dataview",
    name: "数据分析",
    iconClass: "fa fa-bar-chart",
    component: () => import("@/components/Home.vue"),
    children: [
      {
        path: "/home/dataview",
        name: "数据概览",
        iconClass: "fa fa-list",
        component: () => import("@/components/dataAnalysis/DataView.vue"),
      },
      {
        path: "/home/mapview",
        name: "地图概览",
        iconClass: "fa fa-line-chart",
        component: () => import("@/components/dataAnalysis/MapView.vue"),
      },
      {
        path: "/home/travel",
        name: "旅游地图",
        iconClass: "fa fa-line-chart",
        component: () => import("@/components/dataAnalysis/ScoreMap.vue"),
      },
      {
        path: "/home/score",
        name: "分数地图",
        iconClass: "fa fa-line-chart",
        component: () => import("@/components/dataAnalysis/TravelMap.vue"),
      },
    ],
  },
  {
    path: "/users",
    name: "用户中心",
    iconClass: "fa fa-user",
    component: () => import("@/components/Home.vue"),
    children: [
      {
        path: "/home/user",
        name: "用户概览",
        iconClass: "fa fa-list",
        component: () => import("@/components/users/User.vue"),
      },
    ],
  }
];

Vue.use(Router);
const router = new Router({
  mode: "history",
  routes,
});

export default router;

唯一要注意的是,给各个组件跟上.vue,这是因为ts是有类型概念的,所以其类型检查要比js严格,使用js时路由转跳配置中组件可以没有后缀名,构建工具会在各类后缀名中反复尝试。但是到了ts,由于有强类型的概念了,构建工具就不会去自动尝试了而是一板一眼的来编译。所以在使用ts时强制要求声明文件后缀名,否则会报错。

api重构

在api目录下新建一个api.ts,将原来api.js中的内容拷贝过来,然后修改为ts。

首先在src下面创建一个type.d.ts,这是

然后拿原来的登陆方法login来示例。

先在type.d.ts中定义实体类:

export interface IUserData{
    username:string;
    password:string;
}

然后在api.ts中调用:

import { IUserData } from '../types';
export function login(data:IUserData){
    return service({
        method:'post',
        url:'/login',
        data
    })
}

最后改造出来的结果:

import service from '../utils/service.js'
import { IUserData } from '../types';
export function login(data:IUserData){
    return service({
        method:'post',
        url:'/login',
        data
    })
}
​
export function students(params:any){
    return service({
        method:'get',
        url:'/student/list',
        params
    })
}
​
export function studentDel(id:any){
    return service({
        method: 'delete',
        url:`/student/${id}`
    })
}
​
export function info(data:any){
    return service({
        method:'post',
        url:'/student/info',
        data
    })
}
​
export function getInfo(){
    return service({
        method:'get',
        url:'/student/info'
    })
}
//信息列表修改接口
export function updateInfo(data:any){
    return service({
        method:'put',
        url:'/student/info',
        data
    })
}
​
export function deleteInfo(id:any){
    return service({
        method:'delete',
        url:`/student/info/${id}`
    })
}

api.ts写好后,api.js就可以删掉了,然后全局搜一下把对api.js的引用全部改为api.ts。

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

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

相关文章

windows10开启防火墙,增加入站规则后不生效,还是不能访问后端程序

一、背景&#xff1a; 公司护网要求开启防火墙&#xff0c;开启防火墙后&#xff0c;前后端分离的项目调试受影响&#xff0c;于是增加入站规则开放固定的后台服务端口&#xff0c;增加的mysql端口3306和redis端口6379&#xff0c;别人都可以访问&#xff0c;但是程序的端口808…

丑数问题,力扣264,坑点

丑数问题&#xff0c;力扣264&#xff0c;坑点 力扣链接 给你一个整数 n &#xff0c;请你找出并返回第 n 个 丑数 。 丑数 就是质因子只包含 2、3 和 5 的正整数。 示例 1&#xff1a; 输入&#xff1a;n 10 输出&#xff1a;12 解释&#xff1a;[1, 2, 3, 4, 5, 6, 8, 9, …

f_mkfs格式化最小分区数是191

使用fatfs的f_mkfs最小分区数是191原因&#xff1a; 在挂载ram_disk时参考的文章有提到&#xff1a; “然后是GET_SECTOR_COUNT 用于f_mkfs格式化时获取可用的sector的数量&#xff0c;32bit-LBA的情况下至少为191” 自己也实际试过确实要不少于191&#xff0c;网上也没找到相…

将 Vision Transformer 用于医学图像的语义分割

关于ViT的关键点如下&#xff1a; ViT架构基于将图像表示为一组补丁。图像补丁是图像的非重叠块。每个块最初都有一个由该块中的图像像素形成的嵌入向量。Transformer编码器是ViT的主要部分&#xff0c;它根据它们的类别归属来训练补丁之间的相似度。它包含一系列线性、归一化…

DLP迎来新机遇 | 天空卫士数据防泄漏防护市场占有率连续三年第一

IDC 于近日发布了《中国数据泄露防护市场份额&#xff0c;2023&#xff1a;DLP迎来新机遇》&#xff08;Doc#CHC50973524 &#xff0c;2024年6月&#xff09;报告&#xff0c;天空卫士DLP产品以21.9%的市场份额再次位列中国数据防泄露防护市场第一。这一成绩体现了天空卫士在技…

2024SpringCloud学习笔记

远程调用Rest Template 服务注册与发现&分布式配置管理 Consul 下载安装 官网https:/ldeveloper.hashicorp.com/consul/downloads 开发者模式启动consul agennt -dev 浏览器访问本地端口:8500 服务注册与发现 Maven引入 <!--SpringCloud consul discovery -->…

基于 BERT 的非结构化领域文本知识抽取

文章目录 题目摘要方法实验 题目 食品测试的大型语言模型 论文地址&#xff1a;https://arxiv.org/abs/2103.00728 摘要 随着知识图谱技术的发展和商业应用的普及&#xff0c;从各类非结构化领域文本中提取出知识图谱实体及关系数据的需求日益增加。这使得针对领域文本的自动化…

MechMind结构光相机 采图SDK python调用

测试效果 Mech-Mind结构光相机 Mech Mind(梅卡曼德)的结构光相机,特别是Mech-Eye系列,是工业级的高精度3D相机,广泛应用于工业自动化、机器人导航、质量检测等多个领域。以下是对Mech Mind结构光相机的详细解析: 一、产品概述 Mech Mind的结构光相机,如Mech-Eye PRO,…

极狐GitLab X 中科星图,用实际行动赋能空天行业开发者

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab &#xff1a;https://gitlab.cn/install?channelcontent&utm_sourcecsdn 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署…

RFID技术革新养猪业,构建智能化养殖场

RFID技术作为无线射频识别技术的一种&#xff0c;凭借着非接触、高效识别的特性&#xff0c;在养殖业行业中得到了广泛的应用&#xff0c;为构建智能化、高效化的养殖场提供了强大的技术支持&#xff0c;给传统养殖业带来了一场前所未有的技术变革。以下是RFID技术在养猪行业不…

podman 替代 docker ? centos Stream 10 已经弃用docker,开始用podman了!

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;CSDN博客专家   &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01…

记一次Ueditor上传Bypss

前言 前一段时间和小伙伴在某内网进行渗透测试&#xff0c;目标不给加白&#xff0c;只能进行硬刚了&#xff0c;队友fscan一把梭发现某资产疑似存在Ueditor组件&#xff0c;但初步测试是存在waf和杀软的&#xff0c;无法进行getshell&#xff0c;经过一番折腾最终getshell&am…

Python基础语法:运算符详解(算术运算符、比较运算符、逻辑运算符、赋值运算符)②

文章目录 Python中的运算符详解一、算术运算符二、比较运算符三、逻辑运算符四、赋值运算符五、综合示例结论 Python中的运算符详解 在Python编程中&#xff0c;运算符用于执行各种操作&#xff0c;例如算术计算、比较、逻辑判断和赋值。了解并掌握这些运算符的使用方法是编写…

【观成科技】Websocket协议代理隧道加密流量分析与检测

Websocket协议代理隧道加密流量简介 攻防场景下&#xff0c;Websocket协议常被用于代理隧道的搭建&#xff0c;攻击者企图通过Websocket协议来绕过网络限制&#xff0c;搭建一个低延迟、双向实时数据传输的隧道。当前&#xff0c;主流的支持Websocket通信代理的工具有&#xf…

物联网系统中市电电量计量方案(二)

上文我们主要介绍了电量计量中最重要的组成部分——电量计量芯片&#xff08;如果没有阅读该文章的&#xff0c;可以点击这里&#xff09;。本文会再为大家介绍电量计量的另外一个组成部分——电流互感器。 电流互感器的定义 电流互感器是一种可将一次侧大电流转换为二次侧小电…

AppStandby白名单机制

背景&#xff1a;原生机制中AppStandby机制的白名单是共享Doze白名单&#xff0c;即一旦设置doze白名单&#xff0c;也即AppStandby的白名单 需求&#xff1a;如何建立AppStandby自己的白名单 技术原理&#xff1a;可以使用setAppStandbyBucket接口实现 setAppStandbyBucket…

Java内存划分详解:从基础到进阶

Java内存划分详解&#xff1a;从基础到进阶 1. 程序计数器&#xff08;Program Counter Register&#xff09;2. Java虚拟机栈&#xff08;Java Virtual Machine Stack&#xff09;3. 堆&#xff08;Heap&#xff09;4. 方法区&#xff08;Method Area&#xff09;5. 运行时常量…

揭秘”大模型加速器”如何助力大模型应用

文章目录 一、大模型发展面临的问题二、“大模型加速器”助力突破困难2.1 现场效果展示2.1.1 大模型加速器——文档解析引擎2.2.2 图表数据提取 三、TextIn智能文档处理平台3.1 在线免费体验3.1.1 数学公式提取3.1.2 表格数据提取 四、acge文本向量化模型4.1 介绍4.2 技术创新4…

前端面试题40(浅谈MVVM双向数据绑定)

MVVM&#xff08;Model-View-ViewModel&#xff09;架构模式是一种用于简化用户界面&#xff08;UI&#xff09;开发的软件架构设计模式&#xff0c;尤其在现代前端开发中非常流行&#xff0c;例如在使用Angular、React、Vue.js等框架时。MVVM模式源于经典的MVC&#xff08;Mod…

网络协议(TCP三次握手,四次断开详解)

TCP的详细过程&#xff1a; TCP&#xff08;传输控制协议&#xff09;的三次握手和四次断开是其建立连接和终止连接的重要过程&#xff0c;以下是详细解释&#xff1a; 三次握手&#xff1a; 1. 第一次握手&#xff1a;客户端向服务器发送一个 SYN&#xff08;同步&#x…