Skip to main content

到底用哪个方式创建 vite 项目

wKevin

自从 vite 被 vue 官方替代了 vue-cli(webpack) 用来创建 vue 项目之后，先后出现了几个工具（封装）来作为创建项目的脚手架，各种 blog 中会搜到各个历史时期的用法，和各种变换用法，我来整理一下，因为搜到了废弃的用法还不小心用了起来，还挺烦人的。

下表中每种脚手架的 3 种使用方式效果是等价的，先说结论：用下表中的 (4)、(5)，等效的。

脚手架npm installnpxnpm init
create-vite-app
(已废弃)		(1)
npm install -g create-vite-app
create-vite-app my-project		npx create-vite-app(2)
npm init vite-app my-project
cd my-project
npm i
@vitejs/create-app
(已废弃)		npx @vitejs/create-app(3)npm init @vitejs/app
create-vite
(官方推荐)		npx create-vite(4)npm init vite@latest
(5)npm create vite@latest
  • create-vite-app 已废弃多年，用它创建的项目还在用 vit 1.x 的版本，现在已结 3.x 了。其官方 README 中写的用法是 (2)，但很多 blog 中用的是 (1)。
  • @vitejs/create-app 看名字是官方的，但也于 2021 年废弃，应该是用了不短的时间，很多 blog 都在使用 (3) 的方式创建 vite 项目。
  • create-vite 是现行官方推荐，README 中写的是方法 (5)，但一些 blog 就是写 (4)，可能是为了展示一下自己指导 npm create 是 npm init 的别名吧。

npx 避免了本地全局安装​

脚手架都可以用 npx 执行，并且推荐用 npx 执行，但只有 create-vite-app 还创建了命令行入口，所以可以 shell 启动。

npm init 是个封装​

会自动转换为 npx 命令，转换规则：

  • npm init foo -> npx create-foo
  • npm init @usr/foo -> npx @usr/create-foo
  • npm init @usr -> npx @usr/create

npm create 是别名​

2018.4 npm v6 中发布：npm create 是 npm init 的别名。

vite 脚手架只创建了基础​

上面所有脚手架都是基于 vite 的，所以创建的只有 vite（打包、热加载、动态 server），如果想创建一个完整的 web app，还需要使用更大的脚手架：

  1. create-vue:
    • npm init vue@3 等价于 npx create-vue@3
    • vite + vue-router + pinia + eslint + prettier + ts...
  2. vue-cli:
    • npm install -g vue-cli、vue init <template-name> <project-name>，其中 template-name 有 webpack、browserify……
    • 已废弃，2018 年已停止开发

最后​

3 个 vite 脚手架，加上 2 个 vue APP 脚手架，5 个项目的开发者中都有 1 个人： yyx990803，就是尤雨溪，大神真是能折腾，工具开发一个再来一打的人。