Vue3+TS Day34 - tsconfig.ts 、def

一、基础

1、tsconfig.ts配置文件的官方介绍在哪里？

• https://www.typescriptlang.org/tsconfig
• 用到在慢慢看吧，一般都是用vue-cli的默认配置，不需要额外修改

2、npm的全称是什么？需要什么环境运行？

• npm 全称是 Node Package Manager，是node包管理系统。是用来管理js的。
• npm在安装nodejs的时候就自带了，npm依赖于nodejs环境
• nodejs是一个基于Chrome V8引擎的JavaScript运行环境，是用C++写的
• nodejs不是库，是一个运行环境，或者说是一个JS语言解释器

3、TS默认情况根本不认识 .vue 文件，为什么Vue-cli创建的项目，可以识别呢？

• 因为在 shims-vue.d.ts 文件中有声明

image.png

4、对比vue+js，我们可以发现vue+ts里面多了个defineComponent的函数包裹，有什么作用？

export default defineComponent({
  setup() {
    return {}
  },
  components: {
    ElButton
  }
})

• 【从js的角度来讲】，这个defineComponent函数，传入什么对象，就会返回什么对象，毫无意义。
• 【从ts的角度来讲】，借助defineComponent函数，做了很多类型限制和类型推导，能让对象内的代码更加严谨

5、如何对css进行一些初始化设置？

借助 normalize.css这个第三方库，即可完成大部分初始化，如果有自己的项目定制，还可以另起一个css文档

npm install --save normalize.css

6、css中的盒子模型包含哪四个值？box-sizing 有哪两种模式？有什么区别？

• 【盒子模型的四个值】width、padding、border、margin
• 【box-sizing】包含：content-box 和 border-box 两种模式
• 【content-box】盒子宽度 = width
• 【border-box】盒子宽度 = width + padding + margin

7、css的flex布局常用四个属性

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

二、登录界面

1、如何使用第三方库UI组件库？基本姿势

• ① 我们不可能把所有组件库都看一遍，首先确定一下自己UI大概需要什么组件？
• ② 然后去第三方的官网里面找一个样式最接近的
• ③ 直接把官方代码拷贝到项目中，看效果，修改即可

2、父组件如何调用子组件的方法？

• 拿到子组件的ref引用，然后直接调用

  setup() {
    const accountRef = ref<InstanceType<typeof LoginAccount>>()

    const handleLoginClick = () => {
      accountRef.value?.loginAction()
    }
    return {
      handleLoginClick,
      accountRef
    }
  }