vite创建vue3项目及使用typescript

1，vue3项目建议使用vite工具

// 安装全局的vite 创建项目
npm install -g create-vite-app
create-vite-app vue3-demo
cd vue3-vite
npm install
npm run dev
// # 或者使用yarn
yarn add -g create-vite-app
yarn create vite-app <project-name>


//使用 yarn
yarn
yarn dev
//然后启动项目

2，npm安装typescript

yarn add typescript -D

3，初始化tsconfig.json

npx tsc --init

4，将 main.js 改成 main.ts

同时需要将index.html中的src地址同步更改

<script type="module" src="/src/main.ts"></script>

重启后发现项目报错

main.ts会发现

import App from App.vue

会报错:Cannot find module ‘./App.vue’ or its corresponding type declarations.

解决：

手动创建 shim.d.ts文件，添加以下内容，重启项目即可

declare module "*.vue" {
    
    
  import {
    
     Component } from "vue";
  const component: Component;
  export default component;
}