error TS1192: Module '" A.module"' has no default export

原因：主要是没有默认导出模块

// tsconfig.json
compilerOptions:{
  "allowSyntheticDefaultImports": true
}
// 如果添加了这个属性之后还是显示，将你的vscode退出试试

Vue-Router的两种路由模式的产生原因

原因：主要是为了 单页面路由变换的时候不向服务器请求，页面不重新加载 并且可以模拟页面跳转和实现数据的获取和传递，所以提供了两种可实现的方式。这两种方式的主要区别是：

hash模式：主要是利用#号后面的内容改变的时候不会向服务器发送请求的特性。 history模式：主要是利用HTML5新增的pushState()和replaceState()不会请求服务的特性

element-plus 中的ElNotification的消息提示出现样式不全的问题。

原因是 没有将对应的样式导入 一种是直接全局引入的方式 来导入;第二中是通过局部引入，然后在使用的消息的地方，对应的将消息提示的样式导入

// 局部导入
import 'element-plus/es/components/notification/style/css'
import { ElNotification } from 'element-plus'

//全局导入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

// 通过在vite.config.ts中配置自动导入组件，无需手动导入 ,具体配置查看链接
https://github.com/sxzz/element-plus-best-practices/blob/main/vite.config.ts

AutoImport({
imports: ['vue'], // 自动导入vue相关的api， 无需再自己导入
resolvers: [ElementPlusResolver()],
dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
}),

vite中导入数据的时候提示"无法找到对应的模块",别名问题alias

//1. 在vit.config.ts中设置
import { defineConfig } from 'vite'
import path from 'path'
const pathSrc = path.resolve(__dirname, 'src')

export default defineConfig({
...
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
    extensions:['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'] // 可以省略的文件名称,vue官网并不建议省略
  }
})

// 2.需要在tsconfig.json中设置
{
  "compilerOptions": {
    "paths":{
      "baseUrl": ["."],
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
     }
  }
}

在Vue项目中，如果使用lang="tsx"中导入ElForm会提示路由错误，咱不知咋回事

<script lang="txs">
....
import { ElForm } from 'element-plus'
</script>

Vue-router4 中对于所有的路由匹配由之前的*变成了pathMatch来匹配

const routes = [
  // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  // 将匹配以 `/user-` 开头的所有内容，并将其放在 `$route.params.afterUser` 下
  { path: '/user-:afterUser(.*)', component: UserGeneric },
]

Vite中使用require.context出现require is not defined这样的问题

原因： vite中并没有这个API

解决： 可以通过使用import.meta.globEager这个方法，相当于require.context

相关链接 相关链接2

Vue3中key和active属性的区别是什么

key：主要是为了最大可能的原地复用之前的DOM，减少重新渲染的次数

active: 应该是最大可能的减少DOM的变换和更新，使用方法如下，如果是activeId的值变换了之后，应该是只会重新渲染item.id == activeId的那一行的数据

<ListItem
  v-for="item in list"
  :id="item.id"
  :active="item.id === activeId" />

vue3 中的refs是如何获取的呢？ 好像还是和直接使用变量一样

1. getCurrentInstance().refs['xxxx']

ref和 reactive的使用

基础使用外部链接