#Vue.js 工具链和生态

#官方工具

#1. Vite

现代化的前端构建工具，Vue 3 官方推荐。

npm create vite@latest my-vue-app -- --template vue

特点：

• 极速的开发服务器启动
• 即时的模块热更新（HMR）
• 优化的生产构建
• 丰富的插件生态

#2. Vue CLI（维护模式）

Vue 2 时代的脚手架工具，现已进入维护模式。

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

#3. Vue DevTools

浏览器开发者工具扩展。

功能：

• 组件树查看
• 状态检查
• 事件追踪
• 性能分析
• 路由信息

Chrome 扩展

#4. Volar

VS Code 的 Vue 语言支持插件。

功能：

• 语法高亮
• 智能提示
• 类型检查
• 代码格式化
• 重构支持

#路由

#Vue Router

官方路由管理器。

npm install vue-router@4

import { createRouter, createWebHistory } from 'vue-router'

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

#状态管理

#Pinia（推荐）

Vue 3 官方推荐的状态管理库。

npm install pinia

import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)

#Vuex

Vue 2 时代的状态管理库，仍然支持 Vue 3。

npm install vuex@next

#UI 组件库

#Element Plus

基于 Vue 3 的桌面端组件库。

npm install element-plus

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)

#Ant Design Vue

企业级 UI 组件库。

npm install ant-design-vue@next

#Vuetify

Material Design 组件库。

npm install vuetify@next

#Naive UI

Vue 3 组件库，TypeScript 友好。

npm install naive-ui

#Quasar

全平台框架（Web、移动端、桌面端）。

npm install -g @quasar/cli
quasar create my-app

#移动端 UI

#Vant

轻量、可靠的移动端组件库。

npm install vant

#Ionic Vue

跨平台移动应用框架。

npm install @ionic/vue

#工具库

#VueUse

Vue 组合式 API 工具集。

npm install @vueuse/core

<script setup>
import { useMouse, useLocalStorage } from '@vueuse/core'

const { x, y } = useMouse()
const state = useLocalStorage('my-state', { count: 0 })
</script>

#Vue I18n

国际化插件。

npm install vue-i18n@9

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'zh-CN',
  messages: {
    'zh-CN': {
      hello: '你好'
    },
    'en-US': {
      hello: 'Hello'
    }
  }
})

#表单处理

#VeeValidate

表单验证库。

npm install vee-validate

#Formkit

表单构建框架。

npm install @formkit/vue

#动画库

#GSAP

强大的 JavaScript 动画库。

npm install gsap

#Anime.js

轻量级动画库。

npm install animejs

#图表库

#ECharts

强大的数据可视化库。

npm install echarts
npm install vue-echarts

#Chart.js

简单灵活的图表库。

npm install chart.js vue-chartjs

#HTTP 客户端

#Axios

最流行的 HTTP 客户端。

npm install axios

import axios from 'axios'

const api = axios.create({
  baseURL: 'https://api.example.com'
})

export default api

#Fetch API

浏览器原生 API，配合 VueUse 使用。

<script setup>
import { useFetch } from '@vueuse/core'

const { data, error, isFetching } = useFetch('/api/users').json()
</script>

#测试工具

#Vitest

快速的单元测试框架。

npm install -D vitest @vue/test-utils

#Cypress

端到端测试框架。

npm install -D cypress

#Playwright

微软出品的 E2E 测试工具。

npm install -D @playwright/test

#代码质量

#ESLint

代码检查工具。

npm install -D eslint eslint-plugin-vue

#Prettier

代码格式化工具。

npm install -D prettier

#TypeScript

类型系统。

npm install -D typescript @vue/tsconfig

#SSR 框架

#Nuxt.js

Vue 的 SSR 框架。

npx nuxi@latest init my-app

特点：

• 自动路由
• 服务端渲染
• 静态站点生成
• 文件系统路由
• 自动导入

#静态站点生成

#VitePress

基于 Vite 的静态站点生成器。

npm install -D vitepress

用途：

• 文档网站
• 博客
• 技术文档

#VuePress

Vue 驱动的静态站点生成器。

npm install -D vuepress@next

#桌面应用

#Electron

构建跨平台桌面应用。

npm install -D electron

#Tauri

轻量级桌面应用框架。

npm install -D @tauri-apps/cli

#开发工具

#VS Code 扩展

• Volar：Vue 语言支持
• Vue VSCode Snippets：代码片段
• ESLint：代码检查
• Prettier：代码格式化
• Auto Rename Tag：自动重命名标签

#Chrome 扩展

• Vue DevTools：Vue 开发工具
• React DevTools：用于对比学习

#学习资源

#官方文档

• Vue.js 官方文档
• Vue Router 文档
• Pinia 文档
• Vite 文档

#视频教程

• Vue Mastery
• Vue School
• Bilibili 上的中文教程

#社区

• Vue.js 官方论坛
• GitHub Discussions
• Discord 社区
• 掘金、思否等中文社区

#博客和文章

• Vue.js 官方博客
• 尤雨溪的博客
• 各大技术平台的 Vue 专栏

#项目模板

#Vite 官方模板

npm create vite@latest my-app -- --template vue
npm create vite@latest my-app -- --template vue-ts

#社区模板

• Vitesse：轻量级 Vue 3 模板
• Vue Naive Admin：后台管理模板
• Soybean Admin：清新优雅的后台模板

#实用工具

#unplugin-vue-components

自动导入组件。

npm install -D unplugin-vue-components

#unplugin-auto-import

自动导入 API。

npm install -D unplugin-auto-import

#vite-plugin-pages

文件系统路由。

npm install -D vite-plugin-pages

#部署平台

#Vercel

npm i -g vercel
vercel

#Netlify

npm run build
# 上传 dist 目录

#GitHub Pages

npm run build
# 推送到 gh-pages 分支

#云服务器

• 阿里云
• 腾讯云
• AWS
• Azure

#推荐技术栈

#小型项目

• Vite + Vue 3 + Vue Router
• 组合式 API
• 原生 CSS 或 Tailwind CSS

#中型项目

• Vite + Vue 3 + Vue Router + Pinia
• TypeScript
• Element Plus / Ant Design Vue
• Axios
• VueUse

#大型项目

• Nuxt.js
• TypeScript
• Pinia
• UI 组件库
• 微前端架构
• 完整的测试覆盖

#移动端项目

• Vite + Vue 3
• Vant / Ionic
• VueUse
• 响应式设计

#总结

Vue 生态系统非常丰富，包括：

• 构建工具：Vite、Vue CLI
• 路由：Vue Router
• 状态管理：Pinia、Vuex
• UI 库：Element Plus、Ant Design Vue、Vuetify
• 工具库：VueUse、Vue I18n
• 测试：Vitest、Cypress、Playwright
• SSR：Nuxt.js
• 开发工具：Volar、Vue DevTools

选择合适的工具和库可以大大提升开发效率。

#下一步

接下来学习 项目部署，了解如何部署 Vue 应用。