Quick Start
This document will help you start the project from scratch.
Environment Preparation
Make sure your environment meets the following requirements:
- git: You need git to clone and manage project versions. Install Tutorial
- NodeJS: >=18.12.0, recommended 18.19.0 or higher. Install Tutorial
- pnpm: >= 8.7.0, recommended latest version.
Mock
Our project uses the cloud mock function of Apifox to implement mock requests, API documentation：soybean-admin-mock
VSCode Plugins
This project recommends using VSCode for development, and the project has built-in VSCode configurations, including recommended plugins and settings.
The following are the recommended plugins:
- Auto Close Tag - Automatically add HTML/XML closing tags
- Auto Complete Tag - Add closing tags and automatically rename paired tags for HTML/XML
- Auto Rename Tag - Automatically rename paired HTML/XML tags
- Color Highlight - Color highlighting plugin
- DotENV - Highlight .env files
- EditorConfig for VS Code - Unify some configurations of different editors
- ESLint - Code check
- Git Graph - Git graphical operation tool
- GitLens — Git supercharged - Display git information for specific lines of code
- Icônes - Plugin for searching iconify icons
- Iconify IntelliSense - Plugin for real-time display of Iconify icons
- i18n Ally - i18n internationalization plugin
- javascript console utils - Provides shortcut ctrl+l to directly input console.log()
- Material Icon Theme - Icon theme, display various icons for files and folders
- One Dark Pro - Theme
- Prettier - Code formatter - Code formatting plugin
- UnoCSS - unocss writing hint plugin
- Vue - Official - Vue service plugin
- Vue VSCode Snippets - Vue2, Vue3 writing hint plugin
Getting the Code
Get the Code from GitHub
bash
# Clone the code
git clone https://github.com/soybeanjs/soybean-admin.gitGet code from Gitee
bash
# Clone the code
git clone https://gitee.com/honghuangdc/soybean-admin.gitNote
The latest version of the code is based on github.
Install dependencies
Install project dependencies
bash
pnpm iPlugin configuration
Install Vue - Official, disable Vetur
- Vue - Official - Vue service plugin
npm scripts
json
{
// Build package (prod environment)
"build": "vite build --mode prod",
// Build package (test environment)
"build:test": "vite build --mode test",
// Delete node_modules, dist, pnpm-lock.yaml of the main project and sub-projects
"cleanup": "sa cleanup",
// Commit code (generate commit information that meets Conventional Commits standard)
"commit": "sa git-commit",
// Local run (dev environment)
"dev": "vite --mode test",
// Local run (prod environment)
"dev:prod": "vite --mode prod",
// Generate routes
"gen-route": "sa gen-route",
// eslint check and auto fix
"lint": "eslint . --fix",
// Initialize simple-git-hooks
"prepare": "simple-git-hooks",
// Preview the built dist in local environment
"preview": "vite preview",
// Release
"release": "sa release",
// ts check for vue files
"typecheck": "vue-tsc --noEmit --skipLibCheck",
// Update dependency packages
"update-pkg": "sa update-pkg"
}Directory Structure
soybean-admin
├── .vscode // vscode plugins and settings
│ ├── extensions.json // recommended vscode plugins
│ ├── launch.json // debug configuration file (debug Vue and TS)
│ └── settings.json // vscode configuration (effective in this project, can be copied to user configuration file)
├── build // vite build related configuration and plugins
│ ├── config // build and packaging configuration
│ │ └── proxy.ts // network request proxy
│ └── plugins // build plugins
│ ├── index.ts // plugin summary
│ ├── router.ts // elegant-router plugin
│ ├── unocss.ts // unocss plugin
│ └── unplugin.ts // auto import UI components, auto parse iconify icons, auto parse local svg as icons
├── packages // sub-projects
│ ├── axios // network request encapsulation
│ ├── color-palette // color palette
│ ├── hooks // compositional function hooks
│ ├── materials // component materials
│ ├── ofetch // network request encapsulation
│ ├── scripts // scripts
│ ├── uno-preset // uno-preset configuration
│ └── utils // utility functions
├── public // public directory (resources in the folder will be in the root directory after packaging)
│ └── favicon.svg // website tab icon
├── src
│ ├── assets // static resources
│ │ ├── imgs // images
│ │ └── svg-icon // local svg icons
│ ├── components // global components
│ │ ├── advanced // advanced components
│ │ ├── common // common components
│ │ └── custom // custom components
│ ├── constants // constants
│ │ ├── app.ts // app constants
│ │ ├── business.ts // business constants
│ │ ├── common.ts // general constants
│ │ └── reg.ts // regular expression constants
│ ├── enums // enums
│ ├── hooks // compositional function hooks
│ │ ├── business // business hooks
│ │ │ ├── auth // user authorization
│ │ │ └── captcha // captcha
│ │ └── common // common hooks
│ │ ├── echarts //echarts
│ │ ├── form // form
│ │ ├── icon // icon
│ │ ├── router // router
│ │ └── table // table
│ ├── layouts // Layout components
│ │ ├── base-layout // Basic layout (includes global header, multi-tabs, sidebar, footer and other common parts)
│ │ ├── blank-layout // Blank layout component (single page)
│ │ ├── context // Layout component context state
│ │ ├── hooks // Hooks for layout components
│ │ └── modules // Layout component modules
│ │ ├── global-breadcrumb // Global breadcrumb
│ │ ├── global-content // Global main content
│ │ ├── global-footer // Global footer
│ │ ├── global-header // Global header
│ │ ├── global-logo // Global Logo
│ │ ├── global-menu // Global menu
│ │ ├── global-search // Global search
│ │ ├── global-sider // Global sidebar
│ │ ├── global-tab // Global tabs
│ │ └── theme-drawer // Theme drawer
│ ├── locales // Internationalization configuration
│ │ ├── langs // Language files
│ │ ├── dayjs.ts // Internationalization configuration for dayjs
│ │ ├── locale.ts // Collection of language files
│ │ └── naive.ts // Internationalization configuration for NaiveUI
│ ├── plugins // Plugins
│ │ ├── assets.ts // Import of various static resources dependencies (css, scss, etc.)
│ │ ├── dayjs.ts // dayjs plugin
│ │ ├── iconify.ts // iconify plugin
│ │ ├── loading.ts // Loading plugin during global initialization
│ │ └── nprogress.ts // Top loading bar nprogress plugin
│ ├── router // vue router
│ │ ├── elegant // Route declaration, import and conversion files generated by elegant-router plugin
│ │ ├── guard // Route guards
│ │ ├── routes // Route declaration entry
│ │ │ ├── builtin // System built-in routes, root routes and not found routes
│ │ │ └── index // Entry for creating front-end static routes
│ │ └── index.ts // Router entry
│ ├── service // Network requests
│ │ ├── api // API interfaces
│ │ └── request // Encapsulated request functions
│ ├── store // pinia state management
│ │ ├── modules // Modules for state management
│ │ │ ├── app // app state (page reload, menu collapse, project configuration drawer)
│ │ │ ├── auth // auth state (user information, user rights)
│ │ │ ├── route // route state (dynamic routes, menus, route cache)
│ │ │ ├── tab // tab state (multi-tabs, cached page scroll position)
│ │ │ └── theme // theme state (project theme configuration)
│ │ └── plugins // State management plugins
│ ├── styles // Global styles
│ │ ├── css // css
│ │ └── scss // scss
│ ├── theme // Theme configuration
│ │ ├── settings.ts // Default theme configuration and override configuration
│ │ └── vars.ts // CSS variables corresponding to theme tokens
│ ├── typings // TS type declaration files (*.d.ts)
│ │ ├── api.d.ts // Type declaration for the data returned by the request interface
│ │ ├── app.d.ts // Type declarations related to the application
│ │ ├── common.d.ts // Common type declarations
│ │ ├── components.d.ts // Type declarations for automatically imported components
│ │ ├── elegant-router.d.ts// Route declarations generated by the elegant-router plugin
│ │ ├── env.d.ts // Type declarations related to vue route description and request environment
│ │ ├── global.d.ts // Global common types
│ │ ├── naive-ui.d.ts // NaiveUI types
│ │ ├── router.d.ts // Type declarations for Vue's route description
│ │ ├── storage.d.ts // Local storage data types
│ │ └── union-key.d.ts // Union types
│ ├── utils // Global utility functions (pure functions, no state)
│ │ ├── common // Common utility functions
│ │ ├── icon // Icon related utility functions
│ │ ├── service // Utility functions related to request service configuration
│ │ └── storage // Storage related utility functions
│ ├── views // Pages
│ │ ├── _builtin // System built-in pages: login, exception pages, etc.
│ │ ├── about // About
│ │ ├── function // Function
│ │ ├── home // Home
│ │ ├── manage // System management
│ │ ├── multi-menu // Multi-level menu
│ │ └── user-center // User center
│ ├── App.vue // Vue file entry
│ └── main.ts // Project entry ts file
├── .editorconfig // Unified editor configuration
├── .env // Environment file
├── .env.prod // Environment file for production environment
├── .env.test // Environment file for test environment
├── .gitattributes // git attribute configuration
├── .gitignore // Configuration file to ignore git commit
├── .npmrc // npm configuration
├── CHANGELOG.md // Changelog
├── env-config.ts // Configuration file for request environment
├── eslint.config.js // eslint flat configuration file
├── index.html // html file
├── package.json // npm dependency description file
├── pnpm-lock.yaml // Dependency lock file for npm package manager pnpm
├── README.md // Project introduction document
├── README.zh-CN.md // Project introduction document (Chinese)
├── tsconfig.json // TS configuration
├── uno.config.ts // Configuration for atomic css framework unocss
└── vite.config.ts // vite configuration