Dependencies Documentation

Overview

This document details the dependency package management and configuration mechanisms of the VJSP Vue3 framework. The framework adopts modern dependency management strategies to ensure project build stability and development efficiency.

Complete Dependency List

Production Dependencies (dependencies)

Dependency Name	Version	Repository	License	Brief Description
@element-plus/icons-vue	^2.3.2	GitHub	MIT	Element Plus Icon Library
@types/crypto-js	^4.2.2	GitHub	MIT	CryptoJS Type Definitions
@vueuse/core	^12.3.0	GitHub	MIT	Vue Composition API Utilities
@wangeditor/editor-for-vue	^5.1.12	GitHub	MIT	Vue Rich Text Editor
axios	^1.12.0	GitHub	MIT	HTTP Request Library
crypto-js	^4.2.0	GitHub	MIT	Encryption Algorithm Library
dayjs	^1.11.13	GitHub	MIT	Lightweight Date Processing Library
echarts	^5.6.0	GitHub	Apache-2.0	Data Visualization Library
echarts-wordcloud	^2.1.0	GitHub	BSD-3-Clause	ECharts Word Cloud Plugin
element-plus	^2.11.7	GitHub	MIT	Vue 3 UI Component Library
lodash-es	^4.17.21	GitHub	MIT	JavaScript Utility Library
monaco-editor	^0.52.2	GitHub	MIT	Code Editor
nprogress	^0.2.0	GitHub	MIT	Page Loading Progress Bar
path-to-regexp	^8.3.0	GitHub	MIT	Path Matching Library
pinia	^3.0.0	GitHub	MIT	Vue State Management Library
pinia-plugin-persistedstate	^4.2.0	GitHub	MIT	Pinia State Persistence Plugin
qs	^6.13.1	GitHub	BSD-3-Clause	Query String Parsing Library
unplugin-auto-import	^20.1.0	GitHub	MIT	Auto Import Plugin
unplugin-vue-components	^29.0.0	GitHub	MIT	Vue Component Auto Import Plugin
vite-plugin-compression	^0.5.1	GitHub	MIT	Vite Compression Plugin
vite-plugin-html	^3.2.2	GitHub	MIT	Vite HTML Processing Plugin
vue	3.5.13	GitHub	MIT	Vue 3 Core Framework
vue-i18n	11.0.1	GitHub	MIT	Vue Internationalization Solution
vue-router	^4.5.0	GitHub	MIT	Vue Official Router Manager
vue-types	^5.1.3	GitHub	MIT	Vue Component Prop Type Checking

Development Dependencies (devDependencies)

Dependency Name	Version	Repository	License	Brief Description
@intlify/unplugin-vue-i18n	^6.0.3	GitHub	MIT	Vue I18n Build Tools
@types/lodash-es	^4.17.12	GitHub	MIT	Lodash ES Type Definitions
@types/node	^22.10.5	GitHub	MIT	Node.js Type Definitions
@types/nprogress	^0.2.3	GitHub	MIT	NProgress Type Definitions
@types/path-browserify	^1.0.3	GitHub	MIT	Path Browserify Type Definitions
@types/qs	^6.9.17	GitHub	MIT	QS Type Definitions
@typescript-eslint/eslint-plugin	^8.19.1	GitHub	MIT	TypeScript ESLint Plugin
@typescript-eslint/parser	^8.19.1	GitHub	MIT	TypeScript ESLint Parser
@vitejs/plugin-vue	^5.2.1	GitHub	MIT	Vite Vue Plugin
@vitejs/plugin-vue-jsx	^4.1.1	GitHub	MIT	Vite Vue JSX Plugin
@vue/runtime-core	^3.5.21	GitHub	MIT	Vue Runtime Core
@vue/tsconfig	^0.8.1	GitHub	MIT	Vue TypeScript Configuration
autoprefixer	^10.4.21	GitHub	MIT	CSS Auto Prefix Tool
eslint	^9.17.0	GitHub	MIT	JavaScript/TypeScript Code Linting Tool
eslint-config-prettier	^9.1.0	GitHub	MIT	ESLint Prettier Configuration
eslint-define-config	^2.1.0	GitHub	MIT	ESLint Configuration Definition Tool
eslint-plugin-prettier	^5.2.1	GitHub	MIT	ESLint Prettier Plugin
eslint-plugin-vue	^9.32.0	GitHub	MIT	Vue ESLint Plugin
less	^4.2.1	GitHub	Apache-2.0	CSS Preprocessor
postcss	^8.5.6	GitHub	MIT	CSS Processing Tool
prettier	^3.4.2	GitHub	MIT	Code Formatting Tool
rimraf	^6.0.1	GitHub	ISC	File Deletion Tool
rollup	^4.30.1	GitHub	MIT	JavaScript Module Bundler
rollup-plugin-visualizer	^5.14.0	GitHub	MIT	Rollup Bundle Analysis Tool
tailwindcss	^3.4.17	GitHub	MIT	Utility-First CSS Framework
typescript	5.7.3	GitHub	Apache-2.0	TypeScript Compiler
typescript-eslint	^8.19.1	GitHub	MIT	TypeScript ESLint Toolset
vite	6.0.7	GitHub	MIT	Next Generation Frontend Build Tool
vite-plugin-ejs	^1.7.0	GitHub	MIT	Vite EJS Template Plugin
vite-plugin-eslint	^1.8.1	GitHub	MIT	Vite ESLint Plugin
vite-plugin-progress	^0.0.7	GitHub	MIT	Vite Build Progress Plugin
vite-plugin-purge-icons	^0.10.0	GitHub	MIT	Vite Icon Cleanup Plugin
vite-plugin-style-import	2.0.0	GitHub	MIT	Vite Style Import Plugin
vite-plugin-svg-icons	^2.0.1	GitHub	MIT	Vite SVG Icon Plugin
vite-plugin-url-copy	^1.1.4	GitHub	MIT	Vite URL Copy Plugin
vite-plugin-vue-devtools	^8.0.3	GitHub	MIT	Vite Vue DevTools Plugin
vue-tsc	^2.2.0	GitHub	MIT	Vue TypeScript Compiler

Core Dependency Architecture

1. Frontend Framework Layer

• Vue 3.5.13: Core framework providing reactive system and component-based development capabilities
• Vue Router 4.5.0: Official router management supporting dynamic routing and route guards
• Pinia 3.0.0: State management library providing type-safe Store management
• Vue I18n 11.0.1: Internationalization support for multi-language applications

2. UI Component Library

• Element Plus 2.11.7: Enterprise-level UI component library with rich components and theme customization
• Element Plus Icons: Icon library containing 2000+ high-quality icons

3. Build Tool Chain

• Vite 6.0.7: Next-generation frontend build tool providing fast cold start and hot reload
• TypeScript 5.7.3: Type-safe JavaScript superset
• Vue TSC: TypeScript type checking for Vue single-file components

4. Development Tools

• ESLint 9.17.0: Code quality checking tool
• Prettier 3.4.2: Code formatting tool
• Vue DevTools: Vue application debugging tool

Dependency Configuration Mechanism

1. Package Management Configuration

The project uses npm as the package manager, with detailed dependency version ranges defined in package.json:

{
  "engines": {
    "node": ">=18.0.0 <=22.99.99",
    "npm": ">=8.0.0"
  },
  "browserslist": {
    "production": ["> 1%", "last 2 versions", "not dead"],
    "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
  }
}

2. Build Tool Configuration

Vite configuration adopts a plugin-based architecture for modular functionality:

• Auto Import Plugin: Automatically imports commonly used APIs like Vue, Vue Router, Element Plus
• Component Auto Registration: Automatically scans and registers components in the src/components directory
• Internationalization Plugin: Supports automatic configuration and type safety for Vue I18n
• SVG Icons: Automatically processes SVG icons with on-demand loading support

3. Type Checking Configuration

TypeScript configuration uses strict mode to ensure code quality:

{
  "compilerOptions": {
    "target": "ES2022",
    "strict": true,
    "moduleResolution": "Node",
    "paths": { "@/*": ["src/*"] }
  }
}

Dependency Classification Explanation

1. Production Dependencies (dependencies)

Core Framework

• vue, vue-router, pinia: Vue ecosystem core libraries
• element-plus: UI component library
• axios: HTTP request library
• vue-i18n: Internationalization support

Feature Enhancement

• @vueuse/core: Vue Composition API utilities
• lodash-es: Utility function library
• dayjs: Date processing library
• crypto-js: Encryption tool library

Editors and Visualization

• monaco-editor: Code editor
• echarts: Chart visualization library
• @wangeditor/editor-for-vue: Rich text editor

2. Development Dependencies (devDependencies)

Build Tools

• vite and related plugins: Build toolchain
• @vitejs/plugin-vue: Vue single-file component support
• vue-tsc: Vue type checking

Code Quality

• eslint and related plugins: Code linting
• prettier: Code formatting
• typescript: TypeScript compiler

Style Processing

• less: CSS preprocessor
• tailwindcss: Utility-first CSS framework
• autoprefixer: CSS auto prefixing

Product Module Development Example

1. Dependency Import Configuration

In Product module development, dependencies need to be properly configured:

// product/services/productApi.ts
import { axios } from 'axios'
import { ElMessage } from 'element-plus'
import { dayjs } from 'dayjs'

// Product API service encapsulation
export class ProductApiService {
  // API interface definition and implementation
}

2. Component Dependency Management

Product components need to correctly declare dependencies:

<!-- product/components/ProductList.vue -->
<template>
  <el-table :data="productList">
    <el-table-column prop="name" label="Product Name" />
    <el-table-column prop="price" label="Price" />
  </el-table>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElTable, ElTableColumn } from 'element-plus'
import { useProductStore } from '@/stores/product'

const productStore = useProductStore()
const productList = ref([])

onMounted(async () => {
  productList.value = await productStore.fetchProducts()
})
</script>

3. Type Definition Dependencies

Product module type definitions:

// product/types/product.ts
export interface Product {
  id: number
  name: string
  price: number
  description: string
  createdAt: string
}

Dependency Version Management Strategy

1. Version Range Strategy

The framework adopts a balanced version management approach:

• Major versions: Use caret (^) for backward-compatible updates
• Minor versions: Use tilde (~) for bug fixes and minor updates
• Critical dependencies: Use exact versions for stability

2. Security Updates

Regular dependency security scanning and updates:

# Check for security vulnerabilities
npm audit

# Fix security issues
npm audit fix

# Update dependencies
npm update

3. Performance Optimization

Dependency optimization strategies:

• Tree shaking: Remove unused code through build optimization
• Code splitting: Split code into smaller chunks for faster loading
• Lazy loading: Load dependencies on-demand to reduce initial bundle size

Best Practices

1. Dependency Management

• Regularly update dependencies to get security patches and performance improvements
• Use dependency locking (package-lock.json) to ensure consistent installations
• Monitor dependency licenses to ensure compliance

2. Build Optimization

• Configure Vite plugins for optimal build performance
• Use CDN for large dependencies when appropriate
• Implement proper caching strategies for build artifacts

3. Development Workflow

• Use proper import statements to avoid bundle bloat
• Implement proper error boundaries for dependency failures
• Monitor bundle size and performance metrics regularly

This comprehensive dependency management approach ensures the VJSP Vue3 framework remains stable, secure, and performant throughout the development lifecycle.