Vite+Vue2+Composition-api+＜script setup＞+TypeScript搭配如何开发项目？

前言
Vite相信大家都用过，它是一种新型前端开发与构建工具，能够显著提升前端开发体验。我们在搭建Vite项目，选择Vue模板之后，默认会下载Vue3模板。如果你的公司现在还没有准备使用Vue3，而在使用Vue2，那么这篇文章值得你继续看下去。下面，我将带大家如何搭建一个 Vite+Vue2+Composition-api+

**这里使用快捷初始化命令：**
yarn init -y

**安装Vite。**
yarn add vite -D

**初始化Vue2 我们需要安装Vue2，所以直接这样安装。**
yarn add vue

**另外，我们还需要安装vue-template-compiler这个依赖，此包可用于将Vue 2.0模板预编译为渲染函数，以避免运行时编译开销和CSP限制。在编写具有非常特定需求的构建工具时，才需要单独使用它。所以，我们这里单独安装。**
yarn add vue-template-compiler -D

**最后，如果想让Vite支持Vue2，就必须安装这个依赖vite-plugin-vue2。**
yarn add vite-plugin-vue2 -D

**支持Composition-api Composition-api字面意思是组合API，它是为了实现基于函数的逻辑复用机制而产生的。这也是Vue3亮点之一，那么我们如何才能够在Vue2项目中使用呢？这需要安装@vue/composition-api依赖。**
yarn add @vue/composition-api

**支持<script setup>语法
<script setup>是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖，是Vue3.2新加入的语法。那么，我们也可以在Vue2项目中使用它。
你需要安装unplugin-vue2-script-setup依赖。**
yarn add unplugin-vue2-script-setup -D
了解更多，可以查看https://github.com/antfu/unplugin-vue2-script-setup。

**在Vue2项目中使用Volar
以下是官方的解释：
我们建议将 VS Code 与 Volar 结合使用以获得最佳体验（如果您拥有 Vetur，您可能希望禁用它）。使用 Volar 时，您需要安装 @vue/runtime-dom 作为 devDependencies 以使其在 Vue 2 上工作。**
yarn add @vue/runtime-dom -D

**支持TypeScript语法**
随着应用的增长，静态类型系统可以帮助防止许多潜在的运行时错误，所以我们推荐使用TypeScript。
yarn add typescript -D

**最后，我把安装的所有依赖列出来，可以参照有没有漏的。**
  "dependencies": {
    "@vue/composition-api": "^1.1.5",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@vue/runtime-dom": "^3.2.11",
    "typescript": "^4.4.3",
    "unplugin-vue2-script-setup": "^0.6.4",
    "vite": "^2.5.7",
    "vite-plugin-vue2": "^1.8.1",
    "vue-template-compiler": "^2.6.14"
  }

**搭建项目架构
首先，我先列出我自己搭建的项目文件目录，我是参照Vite默认模板而创建的文件目录。**
- public
  -- favicon.ico
- src
  -- assets
    --- logo.png
  -- components
    --- Async.vue
    --- Bar.vue
    --- Foo.vue
    --- HelloWorld.vue
  -- App.vue
  -- main.ts
  -- shims-vue.d.ts
- index.html
- package.json
- ref-macros.d.ts
- tsconfig.json
- vite.config.ts
下面，我们按排列顺序分别看下文件中都放了什么东西？

public文件夹中放着一个ico图标文件，这个不再说明。src文件夹中文件有点多，我们放在最后讨论。

index.html

谈到index.html这个文件，我们需要引入Vite官网一段话:

你可