TeraBox CLI

TeraBox Frontend Project Scaffolding Tool - Unified and Standardized Development

✨ Features

• 🚀 Quick Creation: One-click TeraBox frontend project creation
• 🎯 Multi-Template Support: Web and mobile project templates
• 🔒 Secure Access: Password protection for secure tool usage
• 🔐 Private Repository: Templates stored in private Git repositories, source code fully protected
• 🏗️ Smart Configuration: Auto-update project names, descriptions, and related configs
• 📱 Mobile Optimization: Built-in responsive layout and mobile adaptation
• 🌐 Internationalization: Auto-configure translation identifiers and language files
• 📊 Analytics Integration: Auto-configure data tracking prefixes
• 🎨 TeraBox UI: Built-in TeraBox component library
• 🔍 Code Standards: Integrated ESLint code checking and Husky Git hooks
• 🔄 Auto Update: Support for npm auto-update checking

📦 Installation

# Global installation
npm install -g terabox-cli

# Or using yarn
yarn global add terabox-cli

⚙️ Configuration

⚠️ Required: Private Repository Setup

IMPORTANT: The CLI downloads project templates from a private Git repository. You MUST obtain the access token from the administrator and configure the repository URL before using it, otherwise the tool will not work.

Step 1: Obtain Access Token from Administrator

Contact the administrator to get the access token for the private template repository.

Step 2: Configure Environment Variable

# Set environment variable (REQUIRED - tool will not work without this)
export TERABOX_TEMPLATE_REPO="direct:https://[email protected]/17713679014/terabox-vue3-template.git"

# Or add to ~/.zshrc or ~/.bashrc for permanent use
echo 'export TERABOX_TEMPLATE_REPO="direct:https://[email protected]/17713679014/terabox-vue3-template.git"' >> ~/.zshrc

# Reload shell configuration
source ~/.zshrc  # or source ~/.bashrc

Method 2: Modify Source Code (Not Recommended)

⚠️ Note: This method is not recommended as it requires modifying the installed package files.

Edit bin/init.js and update the PRIVATE_TEMPLATE_REPO constant:

const PRIVATE_TEMPLATE_REPO = 'direct:https://[email protected]/17713679014/terabox-vue3-template.git'

Repository URL Formats

• GitHub with Admin Token: direct:https://[email protected]/17713679014/terabox-vue3-template.git
• GitHub with Credentials: direct:https://username:[email protected]/username/repo.git
• GitLab: direct:https://[email protected]/username/repo.git
• Specific Branch: Add #branch-name at the end, e.g., direct:https://[email protected]/username/repo.git#main

How to Get Access Token

Contact the administrator to obtain the access token for the private template repository.

The administrator will provide you with:

1. The GitHub access token
2. The repository URL format
3. Any additional setup instructions

🚀 Usage

⚠️ Prerequisites

Before using the CLI, make sure you have:

1. Installed the CLI: npm install -g terabox-cli
2. Obtained access token from administrator: Contact admin for the private repository token
3. Configured environment variable: export TERABOX_TEMPLATE_REPO="direct:https://[email protected]/17713679014/terabox-vue3-template.git"
4. Valid access token: Provided by the administrator

Create New Project

terabox-cli create <project-name>

Interactive Configuration

1. Enter Access Password: *****
2. Select Project Template:
   • web - TeraBox Web Vue3 + Vite Project Template
   • wap - TeraBox Mobile Vue3 + Vite Project Template
3. Enter Project Description: Custom project description

Project Startup

# Enter project directory
cd <project-name>

# Install dependencies
npm install
# or
yarn

# Start development server
npm run dev
# or
yarn dev

# Code linting
npm run lint
# or
yarn lint

# Code formatting
npm run lint:fix
# or
yarn lint:fix

🎨 Template Features

Web Template (web)

• Tech Stack: Vue3 + Vite + TypeScript
• UI Framework: TeraBox component library
• Build Tool: Vite fast building
• Development Experience: Hot reload, TypeScript support
• Code Standards: ESLint code checking, Husky Git hooks

Mobile Template (wap)

• Tech Stack: Vue3 + Vite + TypeScript
• UI Framework: TeraBox component library
• Responsive Design: Based on 375px viewport width
• Unit Conversion: Auto px to vw conversion
• Mobile Optimization:
  • Support landscape and portrait
  • Touch-friendly interactions
  • Mobile performance optimization
• CSS Features:
  • postcss-px-to-viewport: Auto px to vw conversion
  • postcss-rtl: Support right-to-left layout
  • autoprefixer: Auto CSS prefix addition
• Code Standards: ESLint code checking, Husky Git hooks

🔧 Auto Configuration Updates

When creating projects, CLI automatically updates the following configurations:

Basic Configuration

• package.json: Project name, description
• README.md: Project description
• vite.config.mts: Build path, project name

Translation Configuration

• mock/translationHmrDataNoCDNLinks.json: Translation module keys
• vite.config/hmrConfig.ts: Hot reload configuration
• src/lang/**/*.ts: Translation identifiers

Analytics Configuration

• src/base/utils/analyze.ts: Data tracking prefixes

📁 Project Structure

<project-name>/
├── src/                    # Source code
│   ├── base/              # Base utilities
│   │   └── utils/         # Utility functions
│   │       └── analyze.ts # Analytics tracking
│   ├── lang/              # Internationalization files
│   │   ├── zh/            # Chinese
│   │   ├── en/            # English
│   │   └── i18n.ts        # i18n configuration
│   └── ...                # Other source code
├── mock/                  # Mock data
│   └── translationHmrDataNoCDNLinks.json
├── vite.config/           # Vite configuration
│   └── hmrConfig.ts       # Hot reload configuration
├── package.json           # Project configuration
├── vite.config.mts        # Vite main configuration
├── postcss.config.js      # PostCSS configuration
├── .eslintrc.js           # ESLint configuration
├── .husky/                # Husky Git hooks
│   ├── pre-commit         # Pre-commit check
│   └── commit-msg         # Commit message check
└── README.md              # Project documentation

🛠️ Development Guide

Local Development

# Clone project
git clone <repository-url>
cd terabox-cli

# Install dependencies
npm install

# Local testing
node bin/cli.js create test-project

Project Structure

terabox-cli/
├── bin/                   # Executable files
│   ├── cli.js            # Main entry
│   ├── create.js         # Create command
│   └── init.js           # Initialization logic
├── terabox-vue3-template/ # Project template
├── package.json           # Package configuration
└── README.md              # Documentation

Code Standards

The project integrates a complete code standards toolchain:

ESLint Configuration

• Code Checking: Auto-detect code quality and potential issues
• Rule Configuration: Based on Vue3 + TypeScript best practices
• Auto Fix: Support auto-fixing some code issues

Husky Git Hooks

• pre-commit: Auto-run ESLint check before commit
• commit-msg: Validate commit message format
• Code Quality: Ensure committed code meets standards

Usage

# Manual code checking
npm run lint

# Auto-fix code issues
npm run lint:fix

# Auto-run check when committing
git commit -m "feat: add new feature"

Auto Update

The project integrates npm auto-update checking functionality:

Update Checking

• Auto Detection: Auto-check for new versions on startup
• Version Notification: Show update notification when new version found
• Update Suggestion: Provide specific update commands

Usage

# Check for updates
npm outdated -g terabox-cli

# Update to latest version
npm update -g terabox-cli

# Or reinstall latest version
npm install -g terabox-cli@latest

Update Notification

When a new version is available, CLI will show a notification like:

⚠️  New version v1.3.0 found, current version v1.2.0
📦 Run the following command to update:
   npm update -g terabox-cli

🔒 Security Features

• Password Protection: Requires access password before use
• Access Control: Prevents unauthorized usage
• Secure Exit: Auto-exit on incorrect password
• Private Repository: Template source code stored in private Git repositories, fully protected from public access
• Token Authentication: Support Git token authentication for secure template downloads
• No Local Template: npm package doesn't include template source code, preventing reverse engineering

🤝 Contributing

Welcome to submit Issues and Pull Requests!

📄 License

ISC License

If this tool helps you, please give it a ⭐️!