异常教程

vite vue3（建议收藏）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习 ，欢迎点击围观

在现代前端开发领域，构建工具与框架的搭配选择直接影响着开发效率和项目性能。本文聚焦于 Vite 与 Vue 3 的结合使用，旨在为编程初学者和中级开发者提供一套系统化的学习路径。通过深入浅出的讲解、形象的比喻以及实战案例，读者将掌握如何利用这对组合快速搭建高性能应用，并理解其底层原理。

一、Vite 与 Vue 3 的核心优势

1.1 Vite：新一代前端构建工具的革新

Vite 是由 Vue 作者尤雨溪主导开发的前端构建工具，其核心思想是“零配置快速启动”。与传统构建工具（如 Webpack）相比，Vite 的优势体现在以下方面：

  • 开发服务器极速启动：通过原生 ES 模块（ESM）加载代码，无需打包即可实时运行，冷启动时间可缩短至 1 秒以内。
  • 热更新（HMR）超快：代码修改后仅更新变更部分，避免页面刷新，提升开发体验。
  • 轻量且灵活：内置插件生态丰富，支持 TypeScript、CSS 预处理器等主流技术。

形象比喻：Vite 像一位高效的快递员，它不进行复杂的包装处理（无需打包），而是直接将代码“送货上门”（浏览器原生加载），从而节省时间。

1.2 Vue 3：渐进式框架的全面升级

Vue 3 是 Vue.js 的重大版本迭代，其核心改进包括：

  • Composition API：通过 setup() 函数和 ref/reactive 等 API，提升代码复用性和逻辑组织能力。
  • 响应式系统优化：Proxy 替代 Object.defineProperty，性能提升显著。
  • TypeScript 支持深度集成：开箱即用的类型推断和类型检查。

形象比喻：Vue 3 像是一套更智能的积木系统，通过 Composition API 可以像搭积木一样灵活组合功能模块，而响应式系统如同“自动更新看板”，数据变化时自动刷新界面。

二、环境搭建与基础配置

2.1 快速创建 Vite + Vue 3 项目

通过以下命令，可在 30 秒内初始化一个项目：

npm create vite@latest my-vue-app -- --template vue3  
cd my-vue-app  
npm install  
npm run dev

运行后，浏览器会自动打开 http://localhost:3000，展示默认的 Vue 3 欢迎页面。

2.2 项目结构解析

典型项目目录如下：

my-vue-app/  
├── node_modules/  
├── public/          # 静态资源目录  
├── src/             # 源代码目录  
│   ├── assets/      # 图标、图片等资源  
│   ├── components/  # 可复用的 Vue 组件  
│   ├── App.vue      # 根组件  
│   └── main.js      # 入口文件  
├── index.html       # HTML 模板  
├── package.json     # 依赖管理  
└── vite.config.js   # Vite 配置文件

2.3 配置 Vite 的关键选项

通过修改 vite.config.js 可实现自定义配置：

export default defineConfig({  
  plugins: [vue()], // 使用 Vue 插件  
  server: {  
    port: 8080,     // 修改开发服务器端口  
    open: true      // 自动打开浏览器  
  },  
  build: {  
    outDir: 'dist', // 构建输出目录  
    minify: 'esbuild' // 使用 esbuild 压缩  
  }  
});

三、Vue 3 核心特性实战

3.1 响应式数据的实现原理

Vue 3 的响应式系统基于 Proxy 对象，通过拦截数据访问和修改操作实现自动更新。以下是一个简单示例：

<template>  
  <div>  
    <p>Count: {{ count }}</p>  
    <button @click="increment">+1</button>  
  </div>  
</template>  

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

const count = ref(0);  

function increment() {  
  count.value++; // 通过 .value 修改响应式数据  
}  
</script>

关键点：

  • ref() 返回一个带有 .value 属性的响应式对象。
  • 当 count.value 被修改时，Vue 自动触发视图更新。

3.2 Composition API 的灵活使用

Composition API 通过函数形式组织逻辑，解决 Vue 2 中 Options API 的“逻辑分散”问题。以下是一个综合案例：

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

const name = ref('');  
const greeting = computed(() => `Hello, ${name.value}!`);  

watch(name, (newVal, oldVal) => {  
  console.log(`Name changed from ${oldVal} to ${newVal}`);  
});  

function submitForm() {  
  alert(greeting.value);  
}  
</script>  

<template>  
  <input v-model="name" placeholder="Enter your name">  
  <p>{{ greeting }}</p>  
  <button @click="submitForm">Submit</button>  
</template>

核心 API 说明：

  • computed()：创建计算属性，依赖响应式数据自动更新。
  • watch()：监听数据变化并执行副作用函数。
  • ref()：创建基础响应式变量。

四、Vite 的高级功能与性能优化

4.1 开发环境性能优化技巧

  • 代码分割与懒加载：
    使用 import() 动态导入组件，实现按需加载： 
    <script setup>  
const LazyComponent = defineAsyncComponent(() => import('./LazyComponent.vue'));  
</script>  

<template>  
  <LazyComponent v-if="showLazy" />  
</template>
  • 预加载关键资源：在 index.html 中添加： 
    <link rel="preload" href="/assets/main.css" as="style">

4.2 生产环境构建优化

通过配置 vite.config.js 实现以下优化：

export default defineConfig({  
  build: {  
    rollupOptions: {  
      output: {  
        manualChunks: {  
          'vendor': ['vue'] // 将 Vue 包单独打包为 vendor.js  
        }  
      }  
    },  
    assetsInlineLimit: 4096 // 小于 4KB 的资源转为 Base64 嵌入  
  }  
});

五、实战案例：电商商品列表页

5.1 组件化开发

创建 ProductList.vue 组件，展示商品列表：

<template>  
  <div class="product-list">  
    <ProductCard  
      v-for="product in filteredProducts"  
      :key="product.id"  
      :product="product"  
    />  
  </div>  
</template>  

<script setup>  
import { ref, computed } from 'vue';  
import ProductCard from './ProductCard.vue';  

const products = ref([  
  { id: 1, name: 'Phone', price: 999 },  
  { id: 2, name: 'Laptop', price: 1999 }  
]);  

const searchQuery = ref('');  

const filteredProducts = computed(() => {  
  return products.value.filter(p =>  
    p.name.toLowerCase().includes(searchQuery.value.toLowerCase())  
  );  
});  
</script>

5.2 API 数据请求

通过 Vite 的内置插件 @vitejs/plugin-legacy 或 axios 实现数据加载：

// main.js  
import { createApp } from 'vue';  
import App from './App.vue';  
import axios from 'axios';  

const app = createApp(App);  

app.config.globalProperties.$http = axios; // 挂载全局 API  

app.mount('#app');

在组件中使用：

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

onMounted(() => {  
  $http.get('/api/products').then(response => {  
    products.value = response.data;  
  });  
});  
</script>

六、常见问题与解决方案

6.1 开发时遇到 HMR 不生效

原因：可能未正确配置 Vite 插件或组件未导出。
解决方法：

  1. 确保 vite.config.js 中已引入 vue() 插件。
  2. 检查组件是否导出：export default defineComponent({ ... });。

6.2 生产环境打包体积过大

优化建议：

  • 使用 vite-plugin-purgecss 删除未使用的 CSS。
  • 启用代码压缩：build.minify = 'esbuild'。

结论

通过本文，读者应已掌握 Vite + Vue 3 的核心概念、配置方法和实战技巧。这对组合凭借其高速开发体验和现代化框架特性，已成为前端开发的首选方案。无论是快速搭建原型还是开发复杂应用，Vite 的灵活性与 Vue 3 的响应式能力都能显著提升开发效率。未来，随着生态工具的不断完善，这一组合的优势将进一步凸显。

关键词布局示例：

  • Vite 与 Vue 3 的结合在现代前端开发中备受关注
  • 开发者可借助 Vite 的极速构建和 Vue 3 的响应式系统实现高效开发
  • 通过本文的实战案例，读者可快速掌握 Vite Vue3 的核心功能

最新发布

查看更多文章