快速开发工具 Vite-Vue脚手架工具使用

时间:2024-11-10 07:46:37

在开发中,我们不可能所有的项目都使用vite从零去搭建,比如一个react项目、Vue项目,

这个时候vite还给我们提供了对应的脚手架工具。

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

  • vite:相当于是一个构件工具,类似于webpack、rollup;
  • @vitejs/create-app:类似vue-cli、create-react-app;

如果使用脚手架工具呢?

npm create vite 
yarn create vite 
pnpm create vite

Case:

nathanchen@NathansMacBook-Pro vite-脚手架 % npm create vite
Need to install the following packages:
  create-vite@5.5.5
Ok to proceed? (y) y
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'create-vite@5.5.5',
npm WARN EBADENGINE   required: { node: '^18.0.0 || >=20.0.0' },
npm WARN EBADENGINE   current: { node: 'v16.19.0', npm: '8.19.3' }
npm WARN EBADENGINE }
✔ Project name: … vue
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

Scaffolding project in /Users/nathanchen/Downloads/CoderWhy/17_Webpack工程化高级/code/Nathan/vite-脚手架/vue...

Done. Now run:

  cd vue
  npm install
  npm run dev

nathanchen@NathansMacBook-Pro vite-脚手架 % cd vue