这里介绍怎样安装和配置基本的开发工具和依赖库，这里基本的开发工具包括：

一、安装

• nodejs: Node.js, 官网下载LTS版本的并安装
• yarn: node包管理工具

  npm install --global yarn

• vue3: Vue3.x版本, 参考vue3.0安装文档

  yarn global add @vue/cli@next

• 用vite创建项目

  yarn create @vitejs/app <project-name> --template vue

• 加入基本的开发依赖：

  yarn add typescript -D
  yarn add @types/node -D
  yarn add @vueuse/core -D
  npx tsc --init

二、配置文件解释

当项目生成以后，会在项目的根目录下的package.json中看到如下一些开发依赖库：

"devDependencies": {
    "@vitejs/plugin-vue": "^1.2.2",
    "@vue/compiler-sfc": "^3.0.5",
    "typescript": "^4.2.4",
    "vite": "^2.2.3"
}

@vitejs/plugin-vue提供Vue3单文件组件支持能力，因为vite2.0以后，其作为一个构建工具和框架无关，其通过@vitejs/plugin-vue这个库通过插件的方式提供vue的支持，@vue/compiler-sfc是@vitejs/plugin-vue的一个依赖，项目生成后会生成一个vite.config.js文件如下:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

三、基本配置

1. 在创建的tsconfig.json文件中，配置如下:

   "compilerOptions": {
   // this aligns with Vue's browser support
   "target": "esnext",
   // this enables stricter inference for data properties on `this`
   "strict": true,
   // if using webpack 2+ or rollup, to leverage tree shaking:
   "module": "esnext",
   "moduleResolution": "node",
   // include vitejs 类型定义
   "types": ["vite/client"],
   "lib": ["dom", "esnext"]
   },
   "include": [
   "src/**/*.ts",
   "src/**/*.d.ts",
   "src/**/*.vue",
   "types/**/*.d.ts",
   "types/**/*.ts"
   ],

2. 打开main.ts会发现import App from App.vue会报错: Cannot find module './App.vue' or its corresponding type declarations, 这是因为现在ts还没有识别vue文件，需要添加*.vue文件的typescript类型支持，请在项目下新建一个types目录，并新建vue-shims.d.ts文件如下：

   declare module "*.vue" {
   import { defineComponent } from 'vue';
   const Component: ReturnType<typeof defineComponent>;
   export default Component;
   }

3. 修改index.html中的main.js为main.ts

   FROM:
   <script type="module" src="/src/main.js"></script>
   TO:
   <script type="module" src="/src/main.ts"></script>