如何使用Vite构建一个新的Vue 3项目?
时间: 2024-12-18 21:31:16 浏览: 5
使用Vite构建Vue 3项目的步骤如下:
1. **安装依赖**:
打开终端或命令提示符,先确保已经全局安装了Node.js和npm。然后,在项目目录下运行:
```
npm install -g create-vite
```
如果你想创建一个支持Vue的项目,还需要安装`@vitejs/plugin-vue`:
```
npm install @vitejs/plugin-vue
```
2. **初始化项目**:
创建新项目:
```
npx create-vite my-project-name
```
或者如果你想要带Vue支持的项目:
```
npx create-vite my-project-name --template vue
```
3. **进入项目目录**:
```
cd my-project-name
```
4. **配置`vite.config.js`**:
进入`vite.config.js`文件,添加Vue插件配置:
```javascript
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
// 其他Vite配置项...
});
```
5. **启动服务**:
在项目根目录下运行:
```
npm run serve
```
现在你可以通过访问`http://localhost:3000`来查看你的Vue应用是否成功构建。
6. **开始开发**:
使用Vue CLI的组件、路由、状态管理等工具进行开发。Vite会实时热更新,让你看到改动立即生效。
阅读全文