注意事项原创

# setup不能使用this

import { useRouter } from "vue-router"
const router = useRouter() 
router.push('/')  //相当于this.$router.push('/')

import { useRoute } from "vue-router"
const route = useRoute() //route是页面的路由信息，相当于this.$route

1
2
3
4
5
6

# 题目详情页

 <router-link :to="'/interface/detail/'+item.id"></router-link>

# 子组件props

const props = defineProps({
  page: {
    type: Number,
    default: 1,
  },
  limit: {
    type: Number,
    default: 10,
  }
});

const emit = defineEmits(["pagination", "update:page", "update:limit"]);

const currentPage = useVModel(props, "page", emit);

const pageSize = useVModel(props, "limit", emit);

function handleSizeChange(val: number) {
  emit("pagination", { page: currentPage, limit: val });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 报错 Uncaught TypeError: Cannot read properties of null (reading ‘isCE‘) at renderSlot

# 原因

造成这个的原因是有两个不同的vue版本，就可能下载的其他的第三方和当前的vue版本不相同，就有两个vue的副本，在引入的时候， npm去尝试引入的地址不对

# 解决方案

有如下几种解决方案

# 方案一

由于npm的引入地址不对，那我们使用yarn，删除node_modules，package-lock.json,使用yarn安装，生成新的yarn.lock
修改配置文件
- vite搭建的项目，在 vite.confg.js 文件中添加如下配置
```
 resolve: {
	  dedupe: [
	    'vue'
	  ]
},
```
1
2
3
4
5

webpack（vue-cli）搭建的项目，在vue.config.js文件中添加如下配置

const { defineConfig } = require("@vue/cli-service");
const path = require("path");

module.exports = defineConfig({
  // ...
  configureWebpack: {
   // 👇🏻 这个配置
    resolve: {
      symlinks: false,
      alias: {
        vue: path.resolve("./node_modules/vue"),
      },
    },
  },
  // ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 方案二

继续使用npm,首先检查vite版本

执行npm list vite，查看依赖所用的版本是否与package.json一致，若不一致按如下步骤

清除缓存
```
 npm cache clean --force
```
1
卸载vite
```
npm uninstall vite
```
1

重新安装package.json的版本

 npm install vite@4.4.7 --save-dev # 项目局部安装vitepackage.json版本

其次检查vue版本执行npm list vue，查看依赖所用的版本是否同时有vue2,vue3,找到依赖igthub仓库下载兼容vue3的版本，执行如下步骤

清除缓存
```
 npm cache clean --force
```
1
卸载vue2版本的依赖
```
npm uninstall package
```
1

重新安装package.json的版本

npm install package --save-dev # 项目局部安装package.json的版本

再查看vue3版本是否与package.json一致，，若不一致按如下步骤

清除缓存
```
 npm cache clean --force
```
1
卸载vue
```
npm uninstall vue
```
1

重新安装package.json的版本

npm install vue@3.3.4 --save-dev # 项目局部安装vue package.json版本

最后统一版本后修改配置文件

vite搭建的项目，在 vite.confg.js 文件中添加如下配置

resolve: {
	  dedupe: [
	    'vue'
	  ]
},

1
2
3
4
5

#前端

上次更新: 2024/02/04 10:50:57

← vuex使用 swagger自动生成接口→