# exam-vue3

**Repository Path**: smileyby/exam-vue3

## Basic Information

- **Project Name**: exam-vue3
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-07
- **Last Updated**: 2022-03-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

* 单组件书写形式
* 单组件内部的属性和方法书写形式
  * component
  * data
  * watch
  * computed
  * 生命周期
  * props
  * emits
  * 路由跳转

  ts 中 使用 require 和 __dirname  需要转 node 类型包 npm install --save-dev @types/node
  ts 配置 axios Headerdefaults 时遇到问题 https://stackoverflow.com/questions/69863687/how-to-set-default-header-in-axios-with-typescript

  ts.config 配置 paths 让其识别 alias 别名

  scss 定义全局变量，通过 vite css=>scss additionalData 直接导入

  tsconfig.json 增加 compilerOptions.suppressImplicitAnyIndexErrors = true 解决for in 循环 取值为字符串时报错问题

  tsconfig.json 增加 compilerOptions.skipLibCheck = true 跳过对第三方依赖的检验

  ts 下 使用 require.context 需要改成  import.meta.globEager('./dir/*.js')

  vite 下的静态资源引入 https://vitejs.cn/guide/assets.html#new-url-url-import-meta-url

  webpack 下引入文件文件名自动补全

  vite 下需要写完成文件名 才能找到文件，不知道是不是配置问题

  scss 下不识别 /deep/ 和 >>> 样式穿透 可以 使用 :deep(.className) 替代

```javascript
// 监听 路由 route 应该避免监听整个route对象
watch(
  () => route.fullPath,
  (val, oldVal) => {
    console.log({val, oldVal});
  }
)
```

vue3 中移除了但组件 $destory事件 和 filter

"TypeError: Failed to fetch dynamically imported module"  当移除vite依赖后，再安装、路由如果引用不存在则直接报错

https://github.com/element-plus/element-plus/issues/3257 
fix(components): [el-tooltip] effect type error 

header-row-style 需要返回值类型是 cssproperties 类型，不知道咋搞，最后换成 header-cell-class-name 替代


关于 组件 是否需要设置name的问题
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md#automatic-name-inference
https://www.zhihu.com/question/485740694

> watch route 后就会出现这个告警
runtime-core.esm-bundler.js:6620 [Vue warn]: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.

runtime-core.esm-bundler.js:6620 [Vue warn]: Component inside <Transition> renders non-element root node that cannot be animated. 

transition 需要手动添加一个 dom元素作为根节点

```typescript
  // 使用 element-plus 获取ref方法, 直接从 element-plus 获取到当前组件的类型
  // ref="imageUploader"
  import type { ElUpload } from 'element-plus'
  const imageUploader = ref<InstanceType<typeof ElUpload>>();
```

vite 提示：Network: use `--host` to expose
可以再 viet.config.js 中配置 server.host = '0.0.0.0' 解决

当使用嵌套组件或者递归组件时，应注意组件的加载时机；父组件调用组组件方法或者给子组件传值是需要使用nextTick包裹确保子组件已经加载

emit 更新 子组件 v-model 绑定的变量，又是不会生效，后续统一改成 以绑定事件的形式更新数据

element-plus 日期选择器 时间戳 的 value-format 对应的是 x

element-plus 定义的变量名不能和 图标名重名，否则图标不展示

ref 获取子组件实例的时候，生命在 setup 即可