Vite 的脚手架工具的使用

「这是我参与2022首次更文挑战的第20天，活动详情查看：2022首次更文挑战」。

前面几节内容我们是从零开始搭建了一个项目，然后使用 Vite 对项目中的 css、js、ts、.vue 文件做了支持。但在真实开发中，我们不可能这样从零开始搭建项目，就像我们不可能从零开始搭建 Webpack 环境，然后搭建出来 Vue 的项目，而是会直接使用 Vue CLI 脚手架搭建 Vue 的项目。那么，Vite 也是一样的，在真实开发中，我们也会使用 Vite 的脚手架来搭建项目。

首先要安装 Vite 的脚手架：

npm install -g create-vite

然后我们用这个脚手架创建一个项目（项目名称为 vite_cli_demo）：

create-vite vite_cli_demo

执行上面的命令后，脚手架首先会让我们选择项目要使用的框架（Vite 的脚手架是可以创建很多框架的项目的）：

我们这里选择使用 vue 框架创建项目：

选择 vue 框架之后，脚手架还会让我们选择要不要使用 TypeScript：

我们选择 vue-ts，即项目使用 TypeScript 开发：

之后，Vite 的脚手架就会自动帮助我们搭建出来 vite_cli_demo 项目了。但是，它这里默认没有帮我们安装好项目所有的依赖，所以我们需要进入项目目录：

cd vite_cli_demo

安装依赖：

npm install

安装好之后，我们可以看下项目的目录结构：

你会发现，Vite 的脚手架（create-vite）搭建的项目和我们之前讲过的 Vue 的脚手架 Vue CLI（@vue/cli）搭建的项目的目录结构是比较相似的：

只不过这次创建的项目中使用了 ts。

那么怎么把这个项目跑起来呢？我们可以打开 package.json 文件，看下有哪些脚本命令：

不难看出，如果是在开发阶段，想要对代码进行构建，把项目跑起来，可以执行 npm run dev：

浏览器中打开项目地址，效果如下：

如果你想打包了，就可以执行 npm run build 命令（这里实际执行的命令中的 vue-tsc 命名是用来对 ts 代码做检测的，后面讲 ts 时再说）：

打包后，如果想要预览一下效果，则可以执行 npm run preview 命令：

浏览器中打开项目地址，效果如下：

所以，在真实开发中，如果想通过 Vite 创建一个项目，我们更多时候会使用脚手架来完成。

小结一下：

• 在开发中，我们不可能所有的项目都使用 Vite 从零去搭建，比如一个 React 项目、Vue 项目；

  • 这个时候 Vite 还给我们提供了对应的脚手架工具；

• 所以 Vite 实际上是有两个工具的：

  • vite：相当于是一个构建工具，类似于 webpack、rollup；
  • create-vite：类似于 @vue/cli、create-react-app；
    • create-vite 之前叫做 @vitejs/create-app，你可以在 npmjs.com 网站上（www.npmjs.com/package/@vi… ）查到，后来被弃用了。GitHub 上也可以看到相应的更新情况：github.com/vitejs/docs…

• 如何使用脚手架工具呢？

  npm init vite
  

  在 create-vite 工具之前，即还在使用 @vitejs/create-app 工具时，使用脚手架的命令是：

  npm init @vitejs/app
  

  关于 npm init 命令的知识，你可以查阅 npm 官方文档：docs.npmjs.com/cli/v8/comm…

• 上面的命令（npm init vite）相当于省略了安装脚手架的过程（会使用到脚手架但不会安装脚手架到本地）：

  npm install create-vite -g
  
  create-vite
  

  npm init @vitejs/app 相当于省略了安装脚手架的过程：

  npm install @vitejs/create-app -g
  
  create-app