Best Practices

This guide provides best practices and enterprise-level development experience for developing mobile applications with Vant.

🏗️ Project Architecture

Directory Structure Standards

Recommended project directory structure:

src/
├── components/          # Shared components
│   ├── common/         # Common components
│   └── business/       # Business components
├── views/              # Page components
├── router/             # Router configuration
├── store/              # State management
├── utils/              # Utility functions
├── api/                # API interfaces
├── assets/             # Static assets
└── styles/             # Style files

Component Design Principles

Single Responsibility Principle

Each component should be responsible for only one function, keeping components simple and maintainable.

✅ Good Practice

// UserProfile.vue - Only responsible for user info display
<template>
  <van-card :title="user.name" :desc="user.email" />
</template>

❌ Bad Practice

// UserDashboard.vue - Too many responsibilities
<template>
  <div>
    <!-- User info -->
    <!-- Order list -->
    <!-- Notifications -->
    <!-- Settings panel -->
  </div>
</template>

Component Reusability

📱 Mobile Adaptation

Responsive Design

Viewport Configuration

Properly set viewport meta tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Rem Adaptation

Use rem units for proportional scaling

postcss-pxtorem + flexible.js

Performance Optimization Strategies

On-demand Loading

Import only used components to reduce bundle size

Image Lazy Loading

Use v-lazy directive to delay image loading

Route Lazy Loading

Use dynamic import for code splitting

Caching Strategy

Properly use keep-alive for component caching

🎨 Style Management

CSS Variables Customization

:root {
  /* Theme colors */
  --van-primary-color: #1989fa;
  --van-success-color: #07c160;
  --van-danger-color: #ee0a24;
  
  /* Text colors */
  --van-text-color: #323233;
  --van-text-color-2: #646566;
  --van-text-color-3: #969799;
  
  /* Background colors */
  --van-background-color: #f7f8fa;
  --van-background-color-light: #fafafa;
}

Style Organization

📁 File Structure

• variables.scss - Variable definitions
• mixins.scss - Mixin functions
• base.scss - Base styles
• components.scss - Component styles

🎯 Naming Convention

• BEM methodology
• Semantic class names
• Avoid style conflicts
• Maintain consistency

🔧 Development Tools

Recommended Toolchain

⚡

Vite

Fast build tool

📝

TypeScript

Type safety

🎨

ESLint

Code standards

💅

Prettier

Code formatting

🧪

Vitest

Unit testing

📦

Pinia

State management

🚀 Deployment Optimization

Build Optimization

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router'],
          vant: ['vant']
        }
      }
    }
  }
})

CDN Acceleration

Static Asset CDN

Deploy images, fonts and other static assets to CDN

Code Splitting

Split code by routes for on-demand loading

Gzip Compression

Enable server-side Gzip compression

Caching Strategy

Set appropriate cache headers

🧪 Testing Strategy

Test Pyramid

Unit Tests (70%)

Test individual components and functions

Integration Tests (20%)

Test component interactions and API calls

End-to-End Tests (10%)

Test complete user workflows

📊 Monitoring & Analytics

Performance Monitoring

First Screen Load Time

Monitor FCP, LCP and other core metrics

User Interaction

Monitor FID, CLS and other interaction metrics

Error Monitoring

Capture and report JavaScript errors

User Behavior

Analyze user operation paths and habits

🔒 Security Best Practices

Frontend Security

🛡️ XSS Protection

• Input validation and filtering
• Output encoding
• CSP policies

🔐 Data Security

• HTTPS transmission
• Sensitive data encryption
• Secure token storage

📚 Learning Resources