vite 官方一般推荐使用脚手架工具来创建项目，或者使用社区模板：

# use npm 7.x
npm init vite some-prj -- --template vue-ts 

# use yarn
yarn create vite some-prj --template vue-ts

受 nuxt3 最近动态的启发，我重新思考了一下 vite 最初的介绍，那就是 vite = devServer + bundler，即开发服务器和打包器。

开发服务器解析、转换代码的工具主要是 esbuild，而打包器由于 esbuild 仍不够成熟用的是 rollup。

区分 create-vite 和 vite 两个包

很简单，create-vite 包有类似脚手架的作用，你只需指定项目名称、模板名称等信息，它就能帮你在磁盘上创建对应模板的项目，以及安装所需的依赖包，包括 vite 本身。

而 vite 的介绍，我就不重复一次了吧？上面有了。

那么如何验证 vite 是个包括了开发服务器和打包器的 “下一代打包工具” 呢？

创建空项目并安装 vite 依赖

轻车熟路，创建目录并初始化项目：

mkdir pure-vite-use-demo && cd ./pure-vite-use-demo && yarn add vite -D

执行上述命令后，你应该会得到如下结构的文件夹：

- pure-vite-use-demo
  + node_modules
  - package.json
  - yarn.lock

一个很普通的 node 包结构，此时 package.json 是这样的：

{
  "devDependencies": {
    "vite": "^2.6.2"
  }
}

补充必要的 package.json 属性

{
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "vite": "^2.6.2"
  }
}

指定 type 为 "module"，是让 node 知道这个项目的模块机制是 ESM；

指定两个 script，dev 来验证开发服务器功能，build 来验证打包器的功能。

聪明的你一定发现了，这个项目和 vanilla 模板很相似，只是少了 vite.config.js 和 index.html、src/* 这几项，其实，只要 dev 命令运行成功，那么 build 命令也一样会成功，你只需按你需要配置好 vite 打包时所需的信息即可。

启动开发服务器

yarn dev

如果没意外，譬如断电了，蓝屏了，那么你会得到如下控制台输出：

$ vite
Could not determine entry point from rollupOptions or html files. Skipping dependency pre-bundling.

  vite v2.6.2 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 342ms.

此时你若访问 http://localhost:3000/，你会吃个闭门羹：

那是因为访问 / 默认会访问 /index.html，而 vite 默认配置中根目录就是项目目录，项目目录下没有 index.html，也即上面报的信息 Could not determine entry point from rollupOptions or html files. ，自然就 404 了。

聪明的你一定能想到一个文件：package.json，不如访问它 http://localhost:3000/package.json：

大功告成，接下来的做法就是跟着官方配置文档一步一步落实你从零创建的项目，或者以旧换新的项目了。

vite 用作库的打包器

因为当前 vite 的默认打包器还是 rollup，所以即使你不用开发服务器，你也可以在 vite 的配置文件中只使用它来构建 JavaScript 库。

详见资料 Vitejs Doc - 库模式