This issue is recommended one based on Vue3, Vite, TypeScript, Naive UI in the background template – Soybean Admin.

Soybean Admin is a free background template based on Vue3, Vite, TypeScript, Naive UI, it uses the latest front-end technology stack, built-in rich theme configuration, has a high code specification, Dynamic permission routing based on mock implementation, out-of-the-box middle and background front-end solution, can also be used for learning reference.

Features

• Latest technology stack: Based on Vue3, Vite, Naive UI, TypeScript and other latest technology stack development
• Extremely high standard code specification: perfect code specification, clear code structure
• Rich plugins: Common Web side plugins example implementation
• Component encapsulation: Secondary encapsulation of UI components used more frequently to meet more business requirements
• Theme configuration: rich theme configuration and dark theme adaptation
• Authority management: Perfect front-end and back-end authority management scheme

Feature details

stack

Vite2 + Vue3 + TypeScript + NaiveUI + Pinia + WindiCss + Axios + AntV + @vueuse + iconify

Strict code conventions

1, eslint + prettier + eslint-config-airb-base + eslint-plugin-vue + eslint-plugin-import + @
Plugins such as typescrit-ESLint /eslint-plugin provide comprehensive formatting for code, and eslintrc’s import/order rules specify the order in which dependencies are imported.
husky + lint-staged + vuetsc + commitlint + commitizen ensures that the submitted code conforms to eslint rules and TS type checks. The commit specification follows the angular commit specification

3. Apply design patterns to optimize code: The project uses the strategy pattern multiple times to replace if else

4. Use script-setup for all pages and follow a specific order (using documentation)

5. The organization of directory structure follows specific norms, and the writing method of pages strictly follows the module idea, so that the code structure of each page is clear and clear

Permission route

1. The dynamic route data is generated by mock, and the dynamic route is added to the front end

2. Specifies the type of mock route to facilitate quick docking

3, the menu is generated by dynamic routing data, support to hide the specified menu, support multi-level menu, support external link to open

4. Cached pages in multiple tabs keep track of scroll position

5, breadcrumbs data generated from current route and menu data

theme

1. Support various theme colors, dark modes, and various layouts

2. WindiCss introduces various theme colors, and the corresponding colors can be applied directly through the class

3, initialize loading adapt theme color

4, support project logo adaptive theme color

Request function: Wrapping with axios

1. Request instance: Multiple request instances with different baseUrl can be created

2. Unified request results: The error information is unified into a specific format, and the successful request data is returned in a specific format

interface ServiceResult<T> {

data: T | null,

error: ServiceError | null

}

3, error prompt: intelligent prompt error, avoid the same kind of error in the same time period, by specifying the error code does not show the response error

4. token refresh: no sense to refresh token

5, Request parameter conversion: according to different Content-Type conversion data, using qs serialization data, support single file and multiple file upload

6. The wrapped request function supports Promises and hooks, and the Hook request function contains the loading state

Custom component

1. Layout component soybean-admin-layout:

• Divided into header, tab, sider, content, footer five parts, except content, the rest can control the display and hide, and you can customize excessive animation
• supports vertical and horizontal modes, combined with local reality hiding, providing 4 layout modes for the project
• High performance component that focuses on the current few layout patterns without having to worry too much compared to layouts built with UI components

2. Multitab components soybean-admin-tab: ChromeTab and ButtonTab

• Support theme color and dark mode
• ChromeTab looks like a browser’s TAB, but with fresh styling
• Combined with BetterScroll, the left and right mouse sliding of multi-tab components (left and right touch sliding of mobile terminals) is realized, and the active Tab is automatically centered

3. LoadingEmptyWrapper

• Components that support realistic loading state, empty state, and network state
• Support theme color and dark mode
• Image text size via attributes

Screenshot

Install using

pnpm 6.x, Node.js 14.x, and Git

installed locally

Code clone

git clone https://github.com/honghuangdc/soybean-admin.git

Install dependencies

pnpm i

Run

pnpm dev

packing

pnpm build

Supported

—END—

Open source license: MIT