首页
/ 正文

vue3 脚手架（手把手讲解）

更新时间: 2025-03-17 22:06:39

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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.js 作为最受欢迎的 JavaScript 框架之一，持续为开发者提供高效且灵活的开发体验。随着 Vue3 的正式发布，其带来的 Composition API、响应式系统优化等特性，进一步推动了前端工程化的发展。而 vue3 脚手架作为快速搭建 Vue3 项目的工具链，是开发者从零开始构建应用的重要起点。本文将从基础概念、核心配置、实际案例等角度，系统讲解如何利用 vue3 脚手架高效开发应用，并帮助读者理解其底层原理与最佳实践。

一、什么是 Vue3 脚手架？

Vue3 脚手架通常指通过命令行工具（如 @vue/cli 或 vite）快速生成项目模板的流程。它类似于房屋建造中的“脚手架”，为开发者提供标准化的框架、依赖库和开发配置，从而避免从头编写基础代码。

核心功能对比

功能类别	Vue CLI 4+（Webpack）	Vite（Vue3 推荐）
构建速度	热更新较慢，适合复杂项目	零配置冷启动，热更新极快
开发依赖	需预编译，打包过程较长	基于原生 ES 模块，无需编译
生产环境优化	支持多配置，适合企业级项目	侧重轻量级，适合快速迭代

比喻说明：
可以将 Vue CLI 比作“传统建筑工地”，需要时间搭建框架但适合复杂结构；而 Vite 则像“预制装配式建筑”，快速组装且适应敏捷开发需求。

二、快速上手：创建 Vue3 项目

1. 安装 Node.js 环境

在开始之前，需确保已安装 Node.js（建议版本 ≥ 16.0.0）。通过命令行输入以下指令验证版本：

node -v  
npm -v

2. 选择脚手架工具

方案一：Vue CLI

npm install -g @vue/cli  
vue create my-vue3-project --default

此命令会根据默认配置生成 Vue3 项目模板，包含基础组件、路由、状态管理等依赖。

方案二：Vite

npm create vite@latest

Vite 的优势在于启动速度极快，适合追求高效开发的开发者。

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

1. 基础目录结构

以 Vite 创建的 Vue3 项目为例，典型目录如下：

my-vue3-project/  
├── public/          # 静态资源（如 logo.png）  
├── src/             # 源代码目录  
│   ├── assets/      # 项目资源（如图片、字体）  
│   ├── components/  # 可复用的 Vue 组件  
│   ├── App.vue      # 根组件  
│   └── main.js      # 入口文件  
├── index.html       # 入口 HTML 文件  
├── package.json     # 依赖与脚本配置  
└── vite.config.js   # 构建配置文件

2. 核心配置文件详解

`vite.config.js` 示例

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

export default defineConfig({  
  plugins: [vue()],  
  server: {  
    port: 3000,          // 开发服务器端口  
    open: true,          // 启动时自动打开浏览器  
  },  
  build: {  
    outDir: 'dist',      // 输出目录名称  
  },  
});

关键点说明：

插件机制：通过 plugins 字段扩展功能（如 @vitejs/plugin-vue 处理 Vue 文件）。
开发服务器配置：调整端口、代理 API 请求等。

四、Vue3 脚手架的核心特性

1. 响应式系统与 Composition API

Vue3 的响应式系统通过 reactive 或 ref 实现，相比 Vue2 的 data() 函数，其语法更简洁且支持更细粒度的响应控制。

示例代码：

import { ref, reactive } from 'vue';  

// ref 用于基本类型  
const count = ref(0);  

// reactive 用于对象/数组  
const state = reactive({  
  name: 'Vue3',  
  skills: ['Composition API', 'Teleport']  
});

比喻：
响应式系统如同“自动更新的镜子”，当数据变化时，视图会像镜子映射般自动刷新。

2. 组件化开发实践

组件通信方式对比

场景	推荐方案
父子组件通信	Props + Events
跨层级通信	Provide/Inject 或状态管理库
全局状态管理	Pinia 或 Vuex

示例：父子组件通信

<!-- 父组件 Parent.vue -->  
<template>  
  <ChildComponent :message="parentMessage" @update-message="handleUpdate" />  
</template>  

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

const parentMessage = ref('Hello from Parent');  
const handleUpdate = (newMsg) => {  
  parentMessage.value = newMsg;  
};  
</script>  

<!-- 子组件 ChildComponent.vue -->  
<template>  
  <button @click="$emit('update-message', 'Hello from Child')">  
    修改父级消息  
  </button>  
</template>

五、进阶功能与实战案例

1. 环境变量配置

在项目根目录创建 .env.development 和 .env.production 文件，可区分开发与生产环境配置：

VITE_API_URL=http://localhost:3000/api

在代码中通过 import.meta.env.VITE_API_URL 引用。

2. 路由与状态管理

案例：Todo List 应用

npm install vue-router@next pinia

路由配置（`router/index.js`）：

import { createRouter, createWebHistory } from 'vue-router';  
import Home from '../views/Home.vue';  
import About from '../views/About.vue';  

const router = createRouter({  
  history: createWebHistory(),  
  routes: [  
    { path: '/', component: Home },  
    { path: '/about', component: About },  
  ]  
});  

export default router;

状态管理（Pinia）：

// stores/todoStore.js  
import { defineStore } from 'pinia';  

export const useTodoStore = defineStore('todos', {  
  state: () => ({  
    list: []  
  }),  
  actions: {  
    addTodo(text) {  
      this.list.push({ id: Date.now(), text });  
    }  
  }  
});

六、性能优化与常见问题

1. 开发环境优化技巧

代码分割：通过动态导入 import() 实现按需加载。
Tree-shaking：确保代码中无副作用，方便打包工具删除未引用的代码。

2. 常见问题解决

问题：Vite 启动时提示“Failed to resolve import”
原因：路径写法错误或未安装依赖。
解决：

检查导入路径是否正确（相对路径需以 ./ 或 ../ 开头）。
确认依赖包已通过 npm install 安装。

七、结论

通过本文的学习，读者应能掌握 vue3 脚手架的核心功能、配置方法及实战技巧。无论是使用 Vue CLI 的传统构建模式，还是 Vite 的极速开发体验，开发者都能快速搭建出功能完善的 Vue3 应用。未来，随着 Vue3 生态的不断完善，脚手架工具将进一步降低开发门槛，助力开发者聚焦业务逻辑创新。

推荐阅读：

官方文档：Vue3 官方指南
进阶实践：探索 TypeScript 与 Vue3 的结合，或尝试使用 @vue/compiler-sfc 自定义组件编译规则。

通过持续实践与探索，相信你能在 Vue3 的开发道路上走得更远！

vue3 脚手架（手把手讲解）

一、什么是 Vue3 脚手架？

核心功能对比

二、快速上手：创建 Vue3 项目

1. 安装 Node.js 环境

2. 选择脚手架工具

方案一：Vue CLI

方案二：Vite

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

1. 基础目录结构

2. 核心配置文件详解

`vite.config.js` 示例

四、Vue3 脚手架的核心特性

1. 响应式系统与 Composition API

示例代码：

2. 组件化开发实践

组件通信方式对比

示例：父子组件通信

五、进阶功能与实战案例

1. 环境变量配置

2. 路由与状态管理

案例：Todo List 应用

路由配置（`router/index.js`）：

状态管理（Pinia）：

六、性能优化与常见问题

1. 开发环境优化技巧

2. 常见问题解决

七、结论

最新发布

Vue3 app.runWithContext() 函数（建议收藏）

Vue3 app.version 属性（一文讲透）

Vue3 app.config 属性（手把手讲解）

Vue3 app.config.errorHandler 属性（保姆级教程）

Vue3 app.config.warnHandler 属性（长文讲解）

Vue3 app.config.performance 属性（超详细）

Vue3 app.config.compilerOptions 属性（千字长文）

Vue3 app.config.globalProperties 属性（保姆级教程）

Vue3 app.config.optionMergeStrategies 属性（千字长文）

Vue3 app.config.idPrefix 属性（保姆级教程）

vue3 脚手架（手把手讲解）

一、什么是 Vue3 脚手架？

核心功能对比

二、快速上手：创建 Vue3 项目

1. 安装 Node.js 环境

2. 选择脚手架工具

方案一：Vue CLI

方案二：Vite

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

1. 基础目录结构

2. 核心配置文件详解

vite.config.js 示例

四、Vue3 脚手架的核心特性

1. 响应式系统与 Composition API

示例代码：

2. 组件化开发实践

组件通信方式对比

示例：父子组件通信

五、进阶功能与实战案例

1. 环境变量配置

2. 路由与状态管理

案例：Todo List 应用

路由配置（router/index.js）：

状态管理（Pinia）：

六、性能优化与常见问题

1. 开发环境优化技巧

2. 常见问题解决

七、结论

最新发布

Vue3 app.runWithContext() 函数（建议收藏）

Vue3 app.version 属性（一文讲透）

Vue3 app.config 属性（手把手讲解）

Vue3 app.config.errorHandler 属性（保姆级教程）

Vue3 app.config.warnHandler 属性（长文讲解）

Vue3 app.config.performance 属性（超详细）

Vue3 app.config.compilerOptions 属性（千字长文）

Vue3 app.config.globalProperties 属性（保姆级教程）

Vue3 app.config.optionMergeStrategies 属性（千字长文）

Vue3 app.config.idPrefix 属性（保姆级教程）

`vite.config.js` 示例

路由配置（`router/index.js`）：