vue2+TS 项目重构

前言

每天学习一点，希望每天都能进步一点。

1、创建项目

vue create project





Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 ( ) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing



? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, B
abel, TS, Router, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project wit
h 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-de
tected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for in
dex fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules a
re supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In pa
ckage.json
? Save this as a preset for future projects? (y/N) n

2、安装项目所需要的第三方依赖或库

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

3、配置vue.config.js

module.exports = {
    lintOnSave: false,
    devServer: {
        open: true,
        proxy: {
            '/api': {
                target: '',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
    chainWebpack(ChainableWebpack) {
        // 用chainWebpack做高级配置:包括loader的添加、修改,以及插件的配置
        // resovle让这些选项能设置模块如何被解析
        // extensions:尝试按照顺序解析这些后缀名
        ChainableWebpack.resovle = { extensions: ['.js', '.ts', '.json', '.d.ts'] }
    }
}

4、把main.js内容复制过来,把文件修改成main.ts

main.js中红色波浪线的问题,比如service.js、echarts的引入 解决这两个问题需要去shims-vue.d.ts文件进行配置

// declare module xxx {}是用来做一些第三方库没有支持ts的
// 通过declare module,让我们在代码中可以import进来,从而使用这些第三方库
declare module 'echarts'
declare module '*.js'

5、关于原项目文件的操作

把assets、plugins、components、tuils这些文件按照对应的位置复制过来
把现有项目中的views文件夹删除掉,把App.vue文件复制过来

6、改写router文件夹中的router.js文件

首先把router.js改写成router.ts,

import Vue from "vue";
// import VueRouter, { RouteConfig } from "vue-router";
import VueRouter from "vue-router";

Vue.use(VueRouter);

// const routes: Array<RouteConfig> = [
const routes: Array<any> = [
  {
    path: '/',
    component: () => import('@/components/Login.vue'),
    hidden: true
    // meta: {
    //   hidden: true
    // }
  }
]

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

export default router;

7、把api.js改写成api.ts,新建types.d.ts类型描述文件定义接口

// types.d.ts
// 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
    })
}

// 学生列表查询接口
// option和后台响应的数据一般不做ts限制,用any就可以了,因为变化太大了
export function students(params: any) {
    return service({
        method: 'get',
        url: '/students',
        params
    })
}

8、改写Login.vue文件

把script改成ts的写法,并且把vue组件改成class类组件的形式进行重写 使用class类组件需要使用vue-class-component库,如果在预设我们没有选择的话,需要使用cmd cnpm i vue-class-component -S