如何创建一个 Vite 项目？

创建一个 Vite 项目非常简单，以下是详细步骤：

1. 安装 Node.js

确保已安装 Node.js（建议使用最新稳定版）。

2. 创建 Vite 项目

使用以下命令创建新项目：
```
npm create vite@latest
```
按提示操作：
1. 项目名称：输入项目名称。
2. 选择框架：选择 Vue、React、Preact、Lit、Svelte 或 Vanilla。
3. 选择变体：选择 JavaScript 或 TypeScript。

3. 进入项目目录

创建完成后，进入项目目录：
```
cd your-project-name
```

4. 安装依赖

安装项目依赖：
```
npm install
```

5. 启动开发服务器

启动开发服务器：
```
npm run dev
```
默认情况下，开发服务器运行在 http://localhost:5173。

6. 构建生产环境

构建生产环境代码：
```
npm run build
```
构建结果在 dist 目录中。

7. 预览生产构建

预览生产构建结果：
```
npm run preview
```

示例：创建一个 Vue + TypeScript 项目

创建项目：
```
npm create vite@latest
```
设置项目名称：
```
? Project name: › vite-vue-ts
```

选择框架：

? Select a framework: › - Use arrow-keys. Return to submit.
    vanilla
❯   vue
    react
    preact
    lit
    svelte

选择变体：

? Select a variant: › - Use arrow-keys. Return to submit.
    vue
❯   vue-ts

进入项目目录：
```
cd vite-vue-ts
```
安装依赖：
```
npm install
```
启动开发服务器：
```
npm run dev
```

项目结构

创建的项目结构如下：

vite-vue-ts/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.ts
├── index.html
├── vite.config.ts
├── package.json
└── tsconfig.json

总结

通过以上步骤，你可以快速创建一个 Vite 项目，并启动开发服务器进行开发。Vite 提供了简洁的配置和快速的开发体验，适合各种类型的前端项目。

Vite 创建项目 npm 模板框架 TypeScript 开发服务器

学在每日，进无止境！更多精彩内容请关注微信公众号。

原文出处：内容由AI生成仅供参考，请勿使用于商业用途。如若转载请注明原文及出处。

出处地址：http://www.07sucai.com/tech/884.html

博客站