Vite creates vue3 project and uses typescript

1. It is recommended to use the vite tool for the vue3 project

// 安装全局的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 install typescript

yarn add typescript -D

3. Initialize tsconfig.json

npx tsc --init

4. Change main.js to main.ts

At the same time, the src address in index.html needs to be changed synchronously

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

Found that the project reported an error after restarting

main.ts will find

import App from App.vue

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

solve:

Manually create the shim.d.ts file, add the following content, and restart the project

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