#Vue.js tool chain and ecosystem

##Official tools

#1. Vite

Modern front-end construction tool, officially recommended by Vue 3.

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

Features:

• Extremely fast development server startup
• Instant hot module updates (HMR)
• Optimized production build
• Rich plug-in ecosystem

#2. Vue CLI (maintenance mode)

A scaffolding tool from the Vue 2 era, now in maintenance mode.

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

#3. Vue DevTools

Browser developer tools extension.

Function:

• Component tree view
• status check
• Event tracking
• Performance analysis
• Routing information

Chrome Extension

#4. Volar

Vue language support plugin for VS Code.

Function:

• Syntax highlighting
• Smart tips
• type checking
• Code formatting
• Refactoring support

#Routing

#Vue Router

Official routing manager.

npm install vue-router@4

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

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

#Status management

#Pinia (recommended)

Vue 3 officially recommended state management library.

npm install pinia

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

#Vuex

A state management library in the Vue 2 era that still supports Vue 3.

npm install vuex@next

#UI component library

#Element Plus

Desktop component library based on Vue 3.

npm install element-plus

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

app.use(ElementPlus)

#Ant Design Vue

Enterprise-level UI component library.

npm install ant-design-vue@next

#Vuetify

Material Design component library.

npm install vuetify@next

#Naive UI

Vue 3 component library, TypeScript friendly.

npm install naive-ui

#Quasar

Full platform framework (Web, mobile, desktop).

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

#Mobile UI

#Vant

Lightweight and reliable mobile component library.

npm install vant

#Ionic Vue

Cross-platform mobile application framework.

npm install @ionic/vue

#Tool Library

#VueUse

Vue composition API toolset.

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

Internationalization plug-in.

npm install vue-i18n@9

import { createI18n } from 'vue-i18n'

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

#Form processing

#VeeValidate

Form validation library.

npm install vee-validate

#Formkit

Form building framework.

npm install @formkit/vue

#Animation library

#GSAP

Powerful JavaScript animation library.

npm install gsap

#Anime.js

Lightweight animation library.

npm install animejs

#Chart library

#ECharts

Powerful data visualization library.

npm install echarts
npm install vue-echarts

#Chart.js

Simple and flexible charting library.

npm install chart.js vue-chartjs

#HTTP client

#Axios

The most popular HTTP client.

npm install axios

import axios from 'axios'

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

export default api

#Fetch API

Browser native API, used with VueUse.

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

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

#Test tools

#Vitest

A fast unit testing framework.

npm install -D vitest @vue/test-utils

#Cypress

End-to-end testing framework.

npm install -D cypress

#Playwright

E2E testing tool from Microsoft.

npm install -D @playwright/test

#Code quality

#ESLint

Code inspection tool.

npm install -D eslint eslint-plugin-vue

#Prettier

Code formatting tool.

npm install -D prettier

#TypeScript

Type system.

npm install -D typescript @vue/tsconfig

#SSR Framework

#Nuxt.js

SSR framework for Vue.

npx nuxi@latest init my-app

Features:

• Automatic routing
• Server-side rendering
• Static site generation
• File system routing
• Automatic import

#Static site generation

#VitePress

Vite-based static site generator.

npm install -D vitepress

Use:

• Documentation website
• Blog
• Technical documentation

#VuePress

Vue powered static site generator.

npm install -D vuepress@next

#Desktop application

#Electron

Build cross-platform desktop applications.

npm install -D electron

#Tauri

Lightweight desktop application framework.

npm install -D @tauri-apps/cli

#Development tools

#VS Code extension

• Volar: Vue language support
• Vue VSCode Snippets: code snippets
• ESLint: code inspection
• Prettier: code formatting
• Auto Rename Tag: Automatically rename tags

#Chrome extension

• Vue DevTools: Vue development tools
• React DevTools: for comparative learning

#Learning resources

#Official Documentation

• Vue.js official documentation
• Vue Router Documentation
• Pinia Documentation
• Vite Documentation

#Video tutorial

• Vue Mastery
• Vue School
• Chinese tutorials on Bilibili

#Community

• Vue.js official forum
• GitHub Discussions
• Discord Community
• Chinese communities such as Nuggets and Sifou

#Blogs and Articles

• Vue.js official blog
• You Yuxi's blog
• Vue columns for major technology platforms

#Project template

#Vite official template

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

#Community Template

• Vitesse: lightweight Vue 3 template
• Vue Naive Admin: background management template
• Soybean Admin: Fresh and elegant backend template

#Utilities

#unplugin-vue-components

Automatically import components.

npm install -D unplugin-vue-components

#unplugin-auto-import

Automatically import APIs.

npm install -D unplugin-auto-import

#vite-plugin-pages

File system routing.

npm install -D vite-plugin-pages

#Deployment platform

#Vercel

npm i -g vercel
vercel

#Netlify

npm run build
# 上传 dist 目录

#GitHub Pages

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

#Cloud server

• Alibaba Cloud
• Tencent Cloud
• AWS
• Azure

#Recommended technology stack

#Small projects

• Vite + Vue 3 + Vue Router
• Composable API
• Native CSS or Tailwind CSS

#Medium-sized projects

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

#Large projects

• Nuxt.js
• TypeScript
• Pinia
• UI component library
• Micro front-end architecture
• Complete test coverage

#Mobile project

• Vite + Vue 3
• Vant / Ionic
• VueUse
• Responsive design

#Summarize

The Vue ecosystem is very rich, including:

• Build Tools: Vite, Vue CLI
• Routing: Vue Router
• State Management: Pinia, Vuex
• UI libraries: Element Plus, Ant Design Vue, Vuetify
• Tool Library: VueUse, Vue I18n
• Test: Vitest, Cypress, Playwright
• SSR：Nuxt.js
• Development Tools: Volar, Vue DevTools

Choosing the right tools and libraries can greatly improve development efficiency.

#Next step

Next, learn Project Deployment to learn how to deploy Vue applications.