首页
/ 正文

vite vue（保姆级教程）

更新时间: 2025-03-17 13:10:58

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

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

新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;

《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

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

在现代前端开发领域，开发工具与框架的高效结合往往能显著提升开发体验与项目性能。Vite Vue 的组合正成为开发者构建现代化 Web 应用的热门选择。本文将从零开始，深入浅出地讲解 Vite 与 Vue 3 的协同工作原理，结合实战案例与代码示例，帮助读者理解这一技术栈的核心优势与应用场景。无论是编程新手还是有一定经验的开发者，都能从中获得实用的知识与灵感。

一、Vite 是什么？它的核心优势在哪里？

1.1 Vite 的诞生背景与核心理念

Vite（法语中意为“迅速”）是由 Evan You（Vue.js 的创始人）主导开发的下一代前端构建工具。它打破了传统构建工具（如 Webpack、Rollup）的模式，采用 原生 ESM（ECMAScript 模块化） 技术，实现了 零配置快速启动 和 极低的冷启动时间。

比喻：
可以将传统构建工具比作“老式胶片相机”，需要繁琐的配置与预处理才能生成最终产物；而 Vite 则像“数码相机”，直接利用现代浏览器的原生能力，让开发过程更加轻盈高效。

1.2 Vite 的核心优势

优势	说明
快速冷启动	无需等待打包，几秒内即可启动开发服务器。
开箱即用的热更新	代码更改后几乎无延迟刷新，开发者无需等待。
支持现代 JavaScript 特性	直接使用 ES 模块语法，无需额外配置 Babel 转译。
插件生态丰富	提供插件系统扩展功能，如 TypeScript、CSS 预处理器支持等。

二、Vue 3 的关键特性与升级亮点

2.1 Vue 3 的核心升级方向

Vue 3 是 Vue.js 的重大版本迭代，其核心目标是提升性能、优化 API 设计并增强开发体验。以下是几个关键特性：

2.1.1 Composition API

Vue 3 引入了 组合式 API（Composition API），允许开发者通过函数式编程的方式组织代码逻辑。相比 Vue 2 的选项式 API（如 data, methods），Composition API 更适合大型项目的复杂逻辑管理。

代码示例：

// Vue 2 的选项式 API
export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

// Vue 3 的 Composition API
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    
    return { count, increment };
  }
};

2.1.2 Proxy 与响应式系统优化

Vue 3 使用 Proxy 替代 Vue 2 的 Object.defineProperty，解决了嵌套对象响应式更新的局限性，并显著提升了性能。

比喻：
Proxy 好比一个“智能管家”，能够监控所有对象属性的访问与修改，而无需逐个属性地设置监听器，从而减少内存开销。

三、从零开始搭建 Vite Vue 项目

3.1 项目初始化步骤

使用 Vite 创建 Vue 3 项目的命令如下：

npm create vite@latest

在交互式提示中选择以下选项：

Project name: my-vue-app
Framework: Vue 3
Variant: Vue 3 + TypeScript（可选，根据需求选择）

3.2 项目结构解析

典型的 Vite Vue 项目结构如下：

my-vue-app/
├── node_modules/  
├── public/  
├── src/  
│   ├── assets/          # 存放静态资源（如图片、字体）  
│   ├── components/      # 存放 Vue 组件  
│   ├── router/          # 路由配置（如使用 Vue Router）  
│   ├── App.vue          # 根组件  
│   └── main.ts          # 入口文件  
├── index.html           # 主 HTML 文件  
├── package.json         # 项目依赖与脚本配置  
└── vite.config.js       # Vite 配置文件

3.3 开发服务器启动与热更新体验

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

npm run dev

此时，浏览器会自动打开 http://localhost:3000，并实时响应代码修改。例如，修改 src/App.vue 中的文本，页面会立即刷新，无需手动刷新浏览器。

四、Vite Vue 的性能优化实践

4.1 按需加载与代码分割

Vite 支持 动态导入（Dynamic Imports），结合 Vue Router 的 lazy-load 特性，可实现路由级别的代码分割，减少初始加载体积。

代码示例：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/about',
    component: () => import('@/views/About.vue'), // 动态导入
    name: 'About'
  }
];

export default createRouter({ ... });

4.2 图片与资源优化

Vite 内置对 img 标签的智能处理：

小于 4KB 的图片自动转为 Base64 编码，减少 HTTP 请求数。
大图则直接引用文件路径，保持原始格式。

代码示例：

<template>
  <img src="./assets/logo.png" alt="Vue Logo" /> <!-- 自动优化 -->
</template>

4.3 生产环境构建与压缩

通过以下命令生成生产版本：

npm run build

Vite 默认启用以下优化：

使用 terser 压缩 JavaScript
压缩图片资源
生成 Source Map（可配置开关）

五、实战案例：构建一个 Todo List 应用

5.1 功能需求

实现一个基础的 Todo List 应用，包含以下功能：

新增待办事项
标记完成状态
清除已完成项

5.2 代码实现步骤

5.2.1 创建组件 `TodoItem.vue`

<template>
  <li :class="{ completed: item.completed }">
    <input type="checkbox" v-model="item.completed" />
    <span>{{ item.text }}</span>
    <button @click="$emit('remove')">删除</button>
  </li>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  }
};
</script>

5.2.2 主组件 `App.vue`

<template>
  <div class="todo-app">
    <h1>Todo List</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入待办事项..." />
    <ul>
      <TodoItem
        v-for="(todo, index) in filteredTodos"
        :key="index"
        :item="todo"
        @remove="removeTodo(index)"
      />
    </ul>
    <button @click="clearCompleted">清除已完成</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import TodoItem from './components/TodoItem.vue';

export default {
  components: { TodoItem },
  setup() {
    const newTodo = ref('');
    const todos = ref([]);

    const addTodo = () => {
      if (newTodo.value.trim()) {
        todos.value.push({ text: newTodo.value, completed: false });
        newTodo.value = '';
      }
    };

    const removeTodo = (index) => {
      todos.value.splice(index, 1);
    };

    const clearCompleted = () => {
      todos.value = todos.value.filter((todo) => !todo.completed);
    };

    const filteredTodos = computed(() => todos.value);

    return {
      newTodo,
      todos,
      addTodo,
      removeTodo,
      clearCompleted,
      filteredTodos
    };
  }
};
</script>

5.3 运行与测试

启动开发服务器后，即可在浏览器中看到 Todo List 应用。输入内容并回车添加新任务，勾选复选框标记完成，点击“删除”按钮移除特定项，或点击“清除已完成”按钮批量删除。

六、Vite 插件与生态扩展

6.1 TypeScript 支持

在项目初始化时选择 Vue 3 + TypeScript，或手动添加以下依赖：

npm install typescript @typescript-eslint/eslint-plugin --save-dev

6.1.1 配置 `tsconfig.json`

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "rootDir": "./src",
    "noEmit": true
  },
  "include": ["src"]
}

6.2 CSS 预处理器（如 Sass）

安装 sass 并直接在组件中使用：

npm install sass --save-dev

在 .vue 文件中：

<template>
  <div class="container"></div>
</template>

<style scoped lang="scss">
.container {
  background-color: #f0f0f0;
  padding: 20px;
  
  &:hover {
    background-color: #e0e0e0;
  }
}
</style>

七、常见问题与解决方案

7.1 开发服务器无法启动

问题描述： 运行 npm run dev 后出现端口占用错误。
解决方案：

检查 vite.config.js 中的 server.port 配置，修改端口号。
或直接运行 npm run dev -- --port 3001 强制更换端口。

7.2 生产环境构建体积过大

问题原因： 可能因未启用代码分割或未移除开发环境依赖。
解决方案：

在 vite.config.js 中配置 build.rollupOptions.output.manualChunks。
移除 devDependencies 中的调试工具（如 @vitejs/plugin-debug）。

结论

通过本文的讲解，读者已经掌握了 Vite Vue 技术栈的核心概念、开发流程与优化技巧。无论是快速原型开发，还是构建大型企业级应用，这一组合都能提供高效的开发体验与卓越的性能表现。未来，随着 Vite 的持续演进与 Vue 生态的不断完善，Vite Vue 必将为前端开发带来更多的可能性。

建议读者通过实际项目进一步巩固所学知识，并关注官方文档与社区动态，以便及时掌握最新功能与最佳实践。

vite vue（保姆级教程）

一、Vite 是什么？它的核心优势在哪里？

1.1 Vite 的诞生背景与核心理念

1.2 Vite 的核心优势

二、Vue 3 的关键特性与升级亮点

2.1 Vue 3 的核心升级方向

2.1.1 Composition API

2.1.2 Proxy 与响应式系统优化

三、从零开始搭建 Vite Vue 项目

3.1 项目初始化步骤

3.2 项目结构解析

3.3 开发服务器启动与热更新体验

四、Vite Vue 的性能优化实践

4.1 按需加载与代码分割

4.2 图片与资源优化

4.3 生产环境构建与压缩

五、实战案例：构建一个 Todo List 应用

5.1 功能需求

5.2 代码实现步骤

5.2.1 创建组件 TodoItem.vue

5.2.2 主组件 App.vue

5.3 运行与测试

六、Vite 插件与生态扩展

6.1 TypeScript 支持

6.1.1 配置 tsconfig.json

6.2 CSS 预处理器（如 Sass）

七、常见问题与解决方案

7.1 开发服务器无法启动

7.2 生产环境构建体积过大

结论

最新发布

IDEA 2025.1.2 最新激活码，破解版安装教程（至2099年~）

Webstorm 2025.1.2 最新激活码，破解版安装教程（至2099年~）

PhpStorm 2025.1.2 最新激活码，破解版安装教程（亲测有效~）

DataGrip 2025.1.3 最新激活码，破解版安装教程（至2099年~）

GoLand 2025.1.2 最新激活码，破解版安装教程（至2099年~）

Clion 2025.1.2 最新激活码，破解版安装教程（至2099年~）

RubyMine 2025.1.2 最新激活码，破解版安装教程（亲测有效~）

Pycharm 2025.1.2 最新激活码，破解版安装教程（至2099年~）

Rider 2025.1.3 最新破解版安装教程（附激活码~）

Webstorm 2025.1.1 最新激活码，破解版安装教程（至2099年~）

5.2.1 创建组件 `TodoItem.vue`

5.2.2 主组件 `App.vue`

6.1.1 配置 `tsconfig.json`