Vite2+TypeScript4+Vue3如何入手开发新项目

前言 

我们打开Vite官方网站(https://cn.vitejs.dev/)。

Vite (法语意为 "快速的"，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。
Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

这里，我们将Vite与VueCLI做一下对比。

• Vite在开发模式下不需要打包可以直接运行，使用的是ES6的模块化加载规则；

• VueCLI开发模式下必须对项目打包才可以运行；

• Vite基于缓存的热更新；

• VueCLI基于webpack的热更新；

搭建项目

我们来搭建第一个 Vite 项目，我这里使用Yarn依赖管理工具进行创建项目。

yarn create @vitejs/app

在命令行键入以上命令，然后你可能会等待一会儿~

依次配置Project name、Select a template

Project name: vite-project

Select a template: vue-ts

因为，我们这里要是用Vue+Ts开发项目所以我们选择vue-ts这个模板。一顿操作之后，会提示你键入以下命令，依次填入即可。

cd vite-project
yarn
yarn dev

这样我们搭建项目就完成了。

项目文件夹一览

我们会看到以下文件及其文件夹。

node_modules  ---依赖文件夹
public  ---公共文件夹
src  ---项目主要文件夹
.gitignore  ---排除git提交配置文件
index.html  ---入口文件
package.json  ---模块描述文件
tsconfig.json  ---ts配置文件
vite.config.ts  ---vite配置文件

开发前配置

在开发之前呢，我们需要做以下工作。

1. 编辑ts配置文件

根据需要，配置需要的配置项。compilerOptions里面配置的是编译时的配置项，include项是配置生效包括在内的路径，而exclude则恰恰相反，排除在外的路径。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["vite/client"],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}