【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 = [
  {
    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。