注意事项

setup不能使用this link

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

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

题目详情页 link

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

子组件props link

      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 });
}
    

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

原因 link

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

解决方案 link

有如下几种解决方案

方案一 link

1. 由于npm的引入地址不对， 那我们使用yarn，删除node_modules，package-lock.json,使用yarn安装，生成新的yarn.lock

2. 修改配置文件

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

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

• 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"),
      },
    },
  },
  // ...
    

方案二 link

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

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

• 清除缓存

         npm cache clean --force
      

• 卸载vite

        npm uninstall vite
      

• 重新安装package.json的版本

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

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

• 清除缓存

         npm cache clean --force
      

• 卸载vue2版本的依赖

        npm uninstall package
      

• 重新安装package.json的版本

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

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

• 清除缓存

         npm cache clean --force
      

• 卸载vue

        npm uninstall vue
      

• 重新安装package.json的版本

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

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

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

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