Vue2+TS项目重构

vue.config.js

module.exports = {
  lintOnSave: false,
  devServer: {
    open: true,
    proxy: {
      'api': {
          target: 'http://1.116.64.64:5004/api2/',
          changeOrigin: true,
          pathRewrite: {
              '^/api': ''
          },
          changeOrigin: true
      }
   }
  },
  chainWebpack(chainableWebpack){
    chainableWebpack.resovle = {
      extension: ['.js','.ts','.json','.d.ts']
    }
  }

}

main.ts

import Vue from "vue";
import App from "./App.vue";
import axios from 'axios'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'font-awesome/css/font-awesome.min.css' 

import router from './router'
import service from './service.js'
import echarts from 'echarts.js'

Vue.use(ElementUI)
Vue.prototype.axios = axios
Vue.prototype.service = service
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false

// router.beforeEach((to,from,next) =>{
//   if (!localStorage.getItem('username')) {
//     if (to.path != '/login') {
//       next('/login')
//     } else next('/login')
//   } next ()
// })

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

shims-vue.d.ts

shims-tsx.d.ts

router-index.ts

import Vue from "vue";
// import VueRouter, { RouteConfig } from "vue-router";
// import Home from "../views/Home.vue";
 import Router from 'vue-router'



const routes: Array<any> = [
      {
        path: '/',
        redirect: '/login',
        name: '首页',
        hidden: true,
        component: ()=> import('@/components/Login.vue')
     },
    {
        path: '/login',
        name: '登录',
        hidden: true,
        component: ()=> import('@/components/Login.vue')
    },
    // {
    //     path: '/home',
    //     // component: Home
    //     // component: ()=> import('@/components/Home')
    //     component: resolve => require(['@/components/Home'],resolve)
    // },
    {
    path: '*',
    name: 'NotFound',
    hidden: true,
    component: ()=> import('@/components/NotFound.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/works',
            name: '作业管理',
            iconClass: 'fa fa-th-list',
            component: ()=> import('@/components/students/WorkMent.vue')
        }
      ]
    },    
    {
    path: '/home',
    name: '数据分析',
    iconClass: 'fa fa-bar-chart',
    component: ()=> import('@/components/Home.vue'),
    children: [
        {
            path: '/home/dataview',
            name: '数据概览',
            iconClass: 'fa fa-line-chart',
            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/TravelMap.vue')
        },
        {
            path: '/home/score',
            name: '分数地图',
            iconClass: 'fa fa-line-chart',
            component: ()=> import('@/components/dataAnalysis/ScoreMap.vue')
        }
    ]
    },
    {
    path: '/users',
    name: '用户中心',
    iconClass: 'fa fa-user',
    component: ()=> import('@/components/Home.vue'),
    children: [
        {
            path: '/users/user',
            name: '权限管理',
            iconClass: 'fa fa-user',
            component: ()=> import('@/components/users/User.vue') 
        }
    ]
    }
  
];
Vue.use(Router);

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

export default router;

api.ts

import service from "../service.js"
import qs from 'qs'
import { IUserData } from "@/types"

//登录接口
export function login(data: IUserData) {
  return service({
    method: 'post',
    url: '/login',
    data
  })
}
//学生列表查询接口
//不做限制，用any就好
export function students(params: any) {
  return service({
    method: 'get',
    url: '/students',
    params
  })
}
//学生列表删除接口
export function studentDel(id: any) {
  return service({
    method: 'delete',
    url: `/students/${id}`
  })
}

// //信息列表新增接口
// export function info(data){
//   data = qs.stringify(data)
//   return service({
//     method: 'post',
//     url: '/info',
//     data
//   })
// }
// //信息列表修改接口
// export function updateInfo(data){
//   data = qs.stringify(data)
//   return service({
//     method: 'put',
//     url: '/info',
//     data
//   })
// }
// 信息列表新增和修改接口
export function info(type: any, data: any) {
  data = qs.stringify(data)
  let obj = { method: type, url: '/info', data }
  return service(obj)
}

//信息列表查询接口
export function getInfo() {
  return service({
    method: 'get',
    url: '/info',

  })
}
//信息列表删除接口
export function infoDel(id: any) {
  return service({
    method: 'delete',
    url: `/info/${id}`
  })
}

//数据概览接口
export function dataview() {
  return service({
    method: 'get',
    url: '/dataview'
  })
}
//旅游地图
export function travel() {
  return service({
    method: 'get',
    url: '/travel'
  })
}

login.vue