TSK Admin CLI

🚀 A powerful CLI tool for rapidly scaffolding modern admin dashboard applications with Vue.js and React.js

TSK Admin CLI is a comprehensive command-line interface that enables developers to quickly generate production-ready admin dashboard applications. It supports multiple frontend frameworks (Vue.js & React.js) with TypeScript/JavaScript variants, integrated with modern build tools and UI component libraries.

✨ Features

• 🎯 Multi-Framework Support: Vue.js 3 & React.js with TypeScript/JavaScript
• 🎨 UI Component Libraries: Element Plus for Vue, Ant Design for React
• ⚡ Modern Build Tools: Vite for lightning-fast development
• 🎨 Utility-First CSS: TailwindCSS for rapid UI development
• 🔧 Smart Package Manager Detection: Automatic npm/pnpm detection
• 📦 Template Management: Easy template listing and selection
• 🛡️ Robust Error Handling: Comprehensive validation and user guidance
• 🌐 Internationalization Ready: Built-in i18n support

📦 Installation

npm install -g tsk-admin-cli

🚀 Quick Start

Create a New Project

tsk create my-admin-dashboard

Interactive Setup

1. Select Framework: Choose between Vue.js or React.js
2. Choose Language: Select TypeScript or JavaScript
3. UI Library: Pick Element Plus (Vue) or Ant Design (React)
4. Project Setup: Automatic dependency installation

Start Development

cd my-admin-dashboard
npm run dev
# or
pnpm dev

Visit http://localhost:5173 to see your application.

📋 Available Templates

| Template | Framework | Language | UI Library | Build Tool | CSS Framework | |----------|-----------|----------|------------|------------|---------------| | vue-ts | Vue.js 3 | TypeScript | Element Plus | Vite | TailwindCSS | | vue-js | Vue.js 3 | JavaScript | Element Plus | Vite | TailwindCSS | | react-ts | React.js | TypeScript | Ant Design | Vite | TailwindCSS | | react-js | React.js | JavaScript | Ant Design | Vite | TailwindCSS |

🛠️ Commands

Project Creation

# Create a new project
tsk create <project-name>

# Force overwrite existing directory
tsk create <project-name> --force

Utility Commands

# List all available templates
tsk list

# Show version information
tsk --version

# Display help information
tsk --help

# Configuration management
tsk config --help

🏗️ Project Structure

my-admin-dashboard/
├── src/
│   ├── components/          # Reusable components
│   ├── views/               # Page components
│   ├── router/              # Route configuration
│   ├── store/               # State management
│   ├── assets/              # Static assets
│   ├── apis/                # API services
│   ├── utils/               # Utility functions
│   ├── locales/             # Internationalization
│   └── styles/              # Global styles
├── public/                  # Public assets
├── tailwind.config.js       # TailwindCSS configuration
├── vite.config.js          # Vite configuration
├── package.json            # Dependencies and scripts
└── README.md              # Project documentation

🛠️ Technology Stack

Vue.js Templates

• Framework: Vue.js 3 - Progressive JavaScript framework
• UI Library: Element Plus - Vue 3 component library
• Routing: Vue Router - Official Vue.js router
• State Management: Pinia - Vue store library
• Internationalization: Vue I18n - Vue internationalization

React.js Templates

• Framework: React.js - JavaScript library for building UIs
• UI Library: Ant Design - React UI library
• Routing: React Router - React routing library
• State Management: Redux Toolkit - React state management

Common Technologies

• Build Tool: Vite - Next generation frontend tooling
• CSS Framework: TailwindCSS - Utility-first CSS framework
• HTTP Client: Axios - Promise-based HTTP client
• Icons: IconPark - ByteDance icon library

🔧 Configuration

Environment Requirements

• Node.js: >= 14.0.0
• Package Manager: npm, pnpm, or yarn

Template Prerequisites

Before using the CLI, ensure your GitHub repository contains the following branches:

• vue-ts: Vue.js 3 + TypeScript template
• vue-js: Vue.js 3 + JavaScript template
• react-ts: React.js + TypeScript template
• react-js: React.js + JavaScript template

Each branch should contain:

• Complete project structure
• Proper dependency configuration
• Runnable source code
• Development and build scripts

📚 Usage Examples

Vue.js Project with TypeScript

tsk create vue-admin-app
# Select: Vue + TypeScript
# Select: Element Plus

React.js Project with JavaScript

tsk create react-dashboard
# Select: React + JavaScript
# Select: Ant Design

Force Overwrite Existing Project

tsk create existing-project --force

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

# Clone the repository
git clone https://github.com/tangtts/VUE-background-management-system.git

# Install dependencies
npm install

# Link globally for testing
npm link

# Test the CLI
tsk --version

📄 License

This project is licensed under the ISC License - see the LICENSE file for details.

🙏 Acknowledgments

• Vue.js - Progressive JavaScript framework
• React.js - JavaScript library for building UIs
• Vite - Next generation frontend tooling
• TailwindCSS - Utility-first CSS framework
• Element Plus - Vue 3 component library
• Ant Design - React UI library

📞 Support

• Issues: GitHub Issues
• Documentation: Project Homepage
• Email: [email protected]