Arco Design Pro for Vue

Arco Design Pro is an enterprise-level application solution built on top of the Arco Design Vue component library. Key features include:

• Core Stack: Built with TypeScript, Vue3, and Pinia.
• Templates: Includes 16+ page templates for common scenarios like tables, lists, forms, dashboards, and data visualization.
• Theming: Supports flexible configuration of page colors and layouts, integration with the DesignLab theme market, and a one-click Dark Theme switch.
• Development Tools: Features a built-in Mock API simulation scheme and an I18n multi-language solution.

To start a new project using Arco Design Pro, you must first install the arco-cli and pnpm globally, then use the arco init command to scaffold your project.

Follow these steps:

1. Install the required CLI tools globally via npm.
2. Run the initialization command with your desired project name.

$ npm i arco-cli@latest pnpm -g

$ arco init my-project

Use queryContentData to retrieve an array of ContentDataRecord objects from the /api/content-data endpoint. This is typically used for rendering charts or data visualizations.

Each ContentDataRecord contains:

• x: A string representing the axis label.
• y: A number representing the value.

The application's routing structure is composed of two main exported arrays of RouteRecordNormalized objects. These are automatically aggregated from module files located in specific directories:

1. appRoutes: Contains the core application routes. These are loaded from TypeScript files located in the ./modules/ directory.
2. appExternalRoutes: Contains external or plugin-based routes. These are loaded from TypeScript files located in the ./externalModules/ directory.

To add new routes to the application, create a new .ts file within either the src/router/routes/modules/ or src/router/routes/externalModules/ directory. The file should export either a single route object or an array of route objects as the default export.

The user.ts module provides standard authentication endpoints for managing user sessions and retrieving user-specific data. These functions use axios to communicate with the backend.

• login(data): Authenticates a user with a username and password. Returns a LoginRes containing a token.
• logout(): Terminates the current user session.
• getUserInfo(): Retrieves the current user's state/profile information (returns UserState).
• getMenuList(): Fetches the dynamic menu routes for the current user (returns RouteRecordNormalized[]).

The permission directive can be installed globally in a Vue application. This allows you to use the v-permission directive on elements to control access based on user permissions.

To install it, import the directive plugin and call its install method with your Vue application instance.