搭建项目

前期搭建仿照这位博主的搭建方式：www.jianshu.com/p/dc92be6d4…

正确的demo目录结构：

问题解决方案：

1.test.d.ts文件变更：

/*
 * @Description: 
 * @Version: 2.0
 * @Author: XG
 * @Date: 2021-10-06 23:07:30
 * @LastEditors: xuchaoxin
 * @LastEditTime: 2021-10-06 23:13:51
 */
// 在没用用到需要具体定义的内容的时候，可以只声明一下'*.vue'就可以
// src/main.d.ts
declare module '*.vue' {
    import {ComponentOptions} from 'vue';
    const componentOptions: ComponentOptions;
    export default componentOptions;
}

2.tsconfig.json文件变更：

// 指定了用来编译这个项目的根文件和编译选项
// 配置参考https://www.tslang.cn/docs/handbook/tsconfig-json.html
{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "strict": true, //这样可以对`this`上的数据属性进行严格的推断，否则总是被视为any类型
        "jsx": "preserve",
        "moduleResolution": "node"
    },
    "include": [
        "src/**/*", 
        "src/main.d.ts" //**/递归匹配任意子目录
    ],
    "exclude": [
        "node_modules"
    ]
}

如果提示文件找不到的问题 重启一下vscode 就好了 因为我们在配置ts时 vscode好像会缓存一些东西 虽然改对了 但是还是会提示你 文件解析失败！

安装devtools

demo搭建完了 那就开始安装devTools了 vue需要新版本的devtools旧的不能用

vue3对应的devtools: chrome.google.com/webstore/de…

就是对应bate版的

安装完之后 需要把原先的devtools在扩展工具中给禁掉或者卸载了。然后还不行的话就重启一下vscode和浏览器就好了。

vue3 新知识补充：

...