第九节：零散汇总1(defineComponent作用、InstanceType获取组件对象、json转换ts、代理配置、globalProperties全局属性、{ ...item } 拷贝、tem

一. 零散知识汇总

1. defineComponent作用

 　类型推导  和 类型限制 的作用

2. 如何绑定一个组件对象(ts写法)？

　以PageModel组件为例，使用 InstanceType来获取组件类型，最后用ref来包裹。

<template>
    <page-modal ref="pageModalRef">page-modal>
template>
<script lang="ts">
    import { defineComponent, ref } from 'vue';
    import PageModal from '@/components/page-modal/src/page-modal.vue';
    export default defineComponent({
        components: {
            PageModal,
        },
        setup() {
            const pageContentRef = ref<InstanceType<typeof PageContent>>();
          return {
                pageModalRef,
            };
        },
    });
script>

3.  json转换成ts类或接口

　利用工具网站：http://www.json2ts.com/ 

(1). json代码：

{ 
"programmers": [
{ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" },
{ "firstName": "Jason", "lastName":"Hunter", "email": "bbbb" },
],
"authors": [
{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
],
"musicians": [
{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
] }

(2). 转换后ts接口、类

declare module namespace {
    export interface Programmer {
        firstName: string;
        lastName: string;
        email: string;
    }
    export interface Author {
        firstName: string;
        lastName: string;
        genre: string;
    }
    export interface Musician {
        firstName: string;
        lastName: string;
        instrument: string;
    }
    export interface RootObject {
        programmers: Programmer[];
        authors: Author[];
        musicians: Musician[];
    }
}

4.  代理的配置

　默认开发环境下是不支持跨域请求的，所有要配置代理。 

(1). vue.config.js

 　　在devServer配置proxy属性，如下代码，表示凡是以 /api 开头的请求地址，都会改为以 http://47.92.156.224:5000，比如：请求地址的 url= /api/Login/CheckLogin , 则转换为 url=http://47.92.156.224:5000/Login/CheckLogin

    devServer: {
        proxy: {
            '^/api': {
                target: 'http://47.92.156.224:5000',
                pathRewrite: {
                    '^/api': '',
                },
                changeOrigin: true,
            },
        },
        port: 8080,
        open: false,
    },

(2). 请求接口的配置

　以axios为例，通常的套路为参数baseUrl设置为 /api （这里的/api也不是直接写死哦，而是写在配置文件中，即开发环境下才是/api），则下面的请求为直接写后面的地址即可。　 　

A. 设置BaseUrl

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

B. 配置不同环境下的BaseUrl值

.env.development

# base api
VUE_APP_BASE_API = '/api'

.env.production

# base api
VUE_APP_BASE_API = 'http://xxx生产环境地址'

C. 实际请求

export const getArticleList = data => {
  return request({
    url: '/article/list',
    params: data
  })
}

5. globalProperties全局属性的使用

(1). 在main.ts中声明全局属性。下面$filters就是全局属性

app.config.globalProperties.$filters = {
        // 1.时间转换
        formatTime(val: string) {
            return formatUtcString(val);
        },
};

(2). 配置相应的类型(js的不需要配置)

setup中使用需要在当前页面或者main.ts中配置

declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $filters: any;
    }
}