vue3 vite创建项目（保姆级教程）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代前端开发领域，Vue 3 和 Vite 的组合正逐渐成为开发者构建高效、轻量级项目的首选方案。Vue 3 作为 Vue.js 的重大升级版本，带来了 Composition API、响应式系统优化等新特性；而 Vite 则凭借其基于原生 ES 模块的闪电级构建速度，重新定义了开发体验。对于编程初学者和中级开发者而言，掌握这一组合不仅能提升开发效率，还能为后续学习更复杂的框架或工具打下坚实基础。本文将从零开始，分步骤讲解如何使用 Vue 3 和 Vite 创建项目，并通过实际案例深入解析关键知识点。

一、环境准备：搭建开发基础

1.1 安装 Node.js 和 npm

所有 Vue 3 项目均依赖于 Node.js 环境。请先访问 Node.js 官网 下载 LTS 版本，并按照提示完成安装。安装完成后，通过终端执行以下命令验证版本：

node -v  
npm -v  

确保 Node.js 版本不低于 16.13.0，npm 版本不低于 8.1.0。

1.2 理解 Vite 的核心优势

Vite 的核心设计理念是“无需打包即可开发”。传统构建工具（如 Webpack）在开发阶段需要将代码打包为浏览器可识别的格式，这一过程可能耗时数秒甚至数十秒。而 Vite 利用浏览器原生支持的 ES 模块（ESM）技术，直接通过开发服务器将代码“代理”到浏览器中，从而实现毫秒级的启动和热更新速度。这一特性类似于快递员直接将包裹送到门口，而非先送到中央仓库分拣，极大提升了开发效率。

二、从零开始创建 Vue 3 项目

2.1 使用 Vite CLI 初始化项目

打开终端，运行以下命令：

npm create vite@latest  

根据交互式提示，选择以下配置：

• Project name: 输入项目名称（如 vue3-vite-demo）
• Select a framework: 选择 vue
• Select a variant: 选择 vue3

完成初始化后，进入项目目录并安装依赖：

cd vue3-vite-demo  
npm install  

2.2 启动开发服务器

执行以下命令启动开发环境：

npm run dev  

此时，Vite 会自动打开浏览器并展示默认的 Vue 3 示例页面。开发者无需等待打包过程，代码修改后页面会实时更新。

三、项目结构解析与核心配置

3.1 基础项目结构

一个典型的 Vite + Vue 3 项目包含以下核心文件：

3.2 配置 Vite 的关键选项

在 vite.config.js 中，开发者可通过 export default defineConfig({ ... }) 定义配置。以下是一个基础配置示例：

import { defineConfig } from 'vite';  
import vue from '@vitejs/plugin-vue';  

export default defineConfig({  
  plugins: [vue()],  
  server: {  
    port: 3000, // 指定开发服务器端口  
    open: true, // 自动打开浏览器  
  },  
  build: {  
    outDir: 'dist', // 输出目录  
    minify: 'esbuild', // 选择代码压缩工具  
  },  
});  

关键概念解释：

• plugins: 插件系统是 Vite 的扩展核心，此处通过 @vitejs/plugin-vue 启用 Vue 3 支持。
• server.port: 类似于调整路由器的默认端口，确保开发环境与其他服务不冲突。

四、Vue 3 核心特性实战

4.1 响应式系统：让数据自动更新

Vue 3 的响应式系统通过 reactive 和 ref 实现。以下代码演示了如何创建响应式数据：

import { ref, reactive } from 'vue';  

// 使用 ref 创建基本类型响应式变量  
const count = ref(0);  

// 使用 reactive 创建对象型响应式数据  
const state = reactive({  
  name: 'Vue 3',  
  version: 3  
});  

当 count.value 或 state.name 发生变化时，视图会自动更新，如同“智能镜子”实时反映数据变化。

4.2 Composition API：代码复用的新范式

Vue 3 的 Composition API 通过 setup() 函数将逻辑集中管理。以下示例展示了如何实现计数器功能：

<template>  
  <button @click="increment">Count is: {{ count }}</button>  
</template>  

<script setup>  
import { ref } from 'vue';  

const count = ref(0);  

const increment = () => {  
  count.value++;  
};  
</script>  

与 Options API 相比，Composition API 通过函数式编程思想，使逻辑复用如同“乐高积木”般灵活。

五、Vite 高阶技巧与优化

5.1 开发阶段性能优化

通过以下配置可进一步提升开发体验：

// vite.config.js  
export default defineConfig({  
  server: {  
    hmr: {  
      overlay: false // 关闭错误全屏提示  
    },  
  },  
  optimizeDeps: {  
    include: ['vue', 'axios'] // 预构建常用依赖  
  },  
});  

5.2 生产环境构建与部署

执行以下命令生成生产环境代码：

npm run build  

生成的 dist 目录包含压缩后的静态资源，可直接部署到任意 Web 服务器。例如，使用 Nginx 配置静态托管：

server {  
    listen 80;  
    server_name your-domain.com;  
    root /path/to/dist;  
    index index.html;  
    try_files $uri $uri/ /index.html; // 解决单页应用路由问题  
}  

六、实战案例：创建天气查询应用

6.1 功能需求

• 用户输入城市名称，点击按钮查询天气
• 展示温度、湿度、天气图标等信息

6.2 实现步骤

步骤 1：安装第三方 API 工具

npm install axios  

步骤 2：创建天气组件

在 src/components/Weather.vue 中编写代码：

<template>  
  <div>  
    <input v-model="city" placeholder="输入城市名称" />  
    <button @click="fetchWeather">查询</button>  
    <div v-if="weather">  
      <h3>{{ city }} 的天气</h3>  
      <p>温度: {{ weather.main.temp }}°C</p>  
      <p>湿度: {{ weather.main.humidity }}%</p>  
    </div>  
  </div>  
</template>  

<script setup>  
import { ref } from 'vue';  
import axios from 'axios';  

const city = ref('');  
const weather = ref(null);  

const fetchWeather = async () => {  
  const API_KEY = 'YOUR_API_KEY'; // 替换为你的 OpenWeatherMap API Key  
  const response = await axios.get(  
    `https://api.openweathermap.org/data/2.5/weather?q=${city.value}&appid=${API_KEY}&units=metric`  
  );  
  weather.value = response.data;  
};  
</script>  

步骤 3：在 App.vue 中集成组件

<template>  
  <div id="app">  
    <Weather />  
  </div>  
</template>  

<script setup>  
import Weather from './components/Weather.vue';  
</script>  

七、常见问题与解决方案

7.1 开发服务器无法启动

现象：终端显示 Error: Command failed with exit code 1
解决：检查端口是否被占用（如 lsof -i :3000），或在 vite.config.js 中修改 server.port。

7.2 生产环境代码体积过大

解决方案：

• 在 vite.config.js 中启用 Tree Shaking：

  build: {  
    rollupOptions: {  
      treeshake: true,  
    }  
  }  
  

• 使用 import() 动态导入非关键模块

八、结论与展望

通过本文，读者已掌握了从环境搭建到项目部署的完整流程，并通过实战案例巩固了 Vue 3 和 Vite 的核心能力。随着前端技术的快速演进，开发者需持续关注以下趋势：

1. Vite 插件生态：探索如 vite-plugin-mock 等工具提升开发效率；
2. Vue 3 新特性：如 Teleport、Suspense 组件的深度应用；
3. TypeScript 集成：在 vite.config.js 中启用 @vitejs/plugin-vue-jsx 实现类型安全开发。

掌握这些技能后，开发者可进一步构建复杂应用，并在实际项目中体验 Vue 3 + Vite 带来的高效与便捷。

本文通过结构化知识讲解和实战案例，帮助读者从零开始掌握 "vue3 vite创建项目" 的全流程，同时融入 SEO 优化的关键词布局，确保内容兼具实用性和可搜索性。