垦荒学园

简体中文

English

简体中文

English

切换主题

Vue.js 工具链和生态 ​

官方工具 ​

1. Vite ​

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

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

特点：

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

2. Vue CLI（维护模式） ​

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

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

3. Vue DevTools ​

浏览器开发者工具扩展。

功能：

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

Chrome 扩展

4. Volar ​

VS Code 的 Vue 语言支持插件。

功能：

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

路由 ​

Vue Router ​

官方路由管理器。

bash
npm install vue-router@4
javascript
import { createRouter, createWebHistory } from 'vue-router'

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

状态管理 ​

Pinia（推荐） ​

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

bash
npm install pinia
javascript
import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)

Vuex ​

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

bash
npm install vuex@next

UI 组件库 ​

Element Plus ​

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

bash
npm install element-plus
javascript
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

app.use(ElementPlus)

Ant Design Vue ​

企业级 UI 组件库。

bash
npm install ant-design-vue@next

Vuetify ​

Material Design 组件库。

bash
npm install vuetify@next

Naive UI ​

Vue 3 组件库，TypeScript 友好。

bash
npm install naive-ui

Quasar ​

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

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

移动端 UI ​

Vant ​

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

bash
npm install vant

Ionic Vue ​

跨平台移动应用框架。

bash
npm install @ionic/vue

工具库 ​

VueUse ​

Vue 组合式 API 工具集。

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

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

Vue I18n ​

国际化插件。

bash
npm install vue-i18n@9
javascript
import { createI18n } from 'vue-i18n'

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

表单处理 ​

VeeValidate ​

表单验证库。

bash
npm install vee-validate

Formkit ​

表单构建框架。

bash
npm install @formkit/vue

动画库 ​

GSAP ​

强大的 JavaScript 动画库。

bash
npm install gsap

Anime.js ​

轻量级动画库。

bash
npm install animejs

图表库 ​

ECharts ​

强大的数据可视化库。

bash
npm install echarts
npm install vue-echarts

Chart.js ​

简单灵活的图表库。

bash
npm install chart.js vue-chartjs

HTTP 客户端 ​

Axios ​

最流行的 HTTP 客户端。

bash
npm install axios
javascript
import axios from 'axios'

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

export default api

Fetch API ​

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

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

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

测试工具 ​

Vitest ​

快速的单元测试框架。

bash
npm install -D vitest @vue/test-utils

Cypress ​

端到端测试框架。

bash
npm install -D cypress

Playwright ​

微软出品的 E2E 测试工具。

bash
npm install -D @playwright/test

代码质量 ​

ESLint ​

代码检查工具。

bash
npm install -D eslint eslint-plugin-vue

Prettier ​

代码格式化工具。

bash
npm install -D prettier

TypeScript ​

类型系统。

bash
npm install -D typescript @vue/tsconfig

SSR 框架 ​

Nuxt.js ​

Vue 的 SSR 框架。

bash
npx nuxi@latest init my-app

特点：

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

静态站点生成 ​

VitePress ​

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

bash
npm install -D vitepress

用途：

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

VuePress ​

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

bash
npm install -D vuepress@next

桌面应用 ​

Electron ​

构建跨平台桌面应用。

bash
npm install -D electron

Tauri ​

轻量级桌面应用框架。

bash
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 Mastery
  • Vue School
  • Bilibili 上的中文教程

社区 ​

博客和文章 ​

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

项目模板 ​

Vite 官方模板 ​

bash
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 ​

自动导入组件。

bash
npm install -D unplugin-vue-components

unplugin-auto-import ​

自动导入 API。

bash
npm install -D unplugin-auto-import

vite-plugin-pages ​

文件系统路由。

bash
npm install -D vite-plugin-pages

部署平台 ​

Vercel ​

bash
npm i -g vercel
vercel

Netlify ​

bash
npm run build
# 上传 dist 目录

GitHub Pages ​

bash
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 应用。