{"id":12817,"library":"arco-design-pro-vue","title":"Arco Design Pro for Vue","description":"Arco Design Pro for Vue is an opinionated, out-of-the-box frontend solution for building mid/back-office management systems, built upon the Arco Design Vue component library. It targets modern web development with Vue 3, Pinia for state management, and full TypeScript support. The project provides over 16 page templates covering common scenarios like tables, lists, forms, and dashboards, alongside features such as extensive theming options (including dark mode), built-in internationalization, and a robust mock API solution for development. The current stable version is 2.7.3. As a \"Pro\" template, it typically sees regular updates and maintenance to keep pace with its underlying dependencies and introduce new features. Its key differentiators include its deep integration with the Arco Design ecosystem, a comprehensive set of pre-built templates, and a focus on enterprise-grade features and developer experience.","status":"active","version":"2.7.3","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install arco-design-pro-vue","lang":"bash","label":"npm"},{"cmd":"yarn add arco-design-pro-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add arco-design-pro-vue","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This package (`arco-design-pro-vue`) is a project template and is not imported directly into an application. Its primary usage pattern involves globally installing `arco-cli` to scaffold a new project based on this template.","wrong":"npm i arco-design-pro-vue -g","symbol":"arco-cli","correct":"npm i arco-cli@latest yarn -g"},{"note":"After scaffolding a project with `arco-cli`, the generated project structure will typically include a root `App.vue` component. This import is a common pattern within the *generated project* for defining the main application entry, not an import from the `arco-design-pro-vue` package itself.","wrong":"import { App } from 'arco-design-pro-vue'","symbol":"App.vue (root component)","correct":"import App from './App.vue'"},{"note":"The generated Arco Design Pro project heavily utilizes components from `@arco-design/web-vue`. This is an example of a common import *within the scaffolded application* for a core UI component, demonstrating how such components are used after project initialization.","wrong":"import { Message } from 'arco-design-pro-vue'","symbol":"Message (from Arco Design Vue)","correct":"import { Message } from '@arco-design/web-vue'"}],"quickstart":{"code":"npm i arco-cli@latest yarn -g\n\narco init my-arco-pro-project\n\ncd my-arco-pro-project\n\nyarn install\n\nyarn dev","lang":"bash","description":"Demonstrates the typical workflow to initialize a new Arco Design Pro Vue project, install its dependencies, and start the development server."},"warnings":[{"fix":"For existing Vue 2 projects, it is recommended to start a new project with `arco init` and migrate components manually, rather than attempting an in-place upgrade.","message":"Major architectural shift from Vue 2 to Vue 3 with the release of v2.0.0. Projects initialized with older versions cannot be directly upgraded to v2.0.0 or newer without significant refactoring.","severity":"breaking","affected_versions":"<2.0.0"},{"fix":"Always review the changelog for `arco-design-pro-vue` and the official Vite migration guides when upgrading to ensure compatibility with your project's build setup. Test thoroughly after upgrades.","message":"Updates to underlying build tools like Vite (e.g., from v2 to v3 in Arco Design Pro Vue v2.2.0, and v3 to v4 in v2.6.0) can introduce breaking changes to `vite.config.ts` or plugin configurations.","severity":"breaking","affected_versions":">=2.2.0"},{"fix":"Run `npm i arco-cli@latest yarn -g` to ensure the command-line interface tool is available in your system's PATH.","message":"Ensuring `arco-cli` is globally installed is crucial for scaffolding. Without it, the `arco init` command will not be found.","severity":"gotcha","affected_versions":"All"},{"fix":"For components not parsed by auto-import plugins, ensure you manually import their CSS: `import '@arco-design/web-vue/es/message/style/css.js'`.","message":"Manual component style imports are sometimes required when using on-demand loading, particularly for programmatic components like `Message` or `Notification`.","severity":"gotcha","affected_versions":">=2.11.0 of @arco-design/web-vue (used by template)"},{"fix":"Check the `engines` field in the generated project's `package.json` or the official Arco Design Pro documentation for recommended Node.js versions. Tools like `nvm` or `mise` can help manage Node.js versions.","message":"Node.js version compatibility can be an issue. Newer versions of Arco Design Pro might require specific Node.js environments.","severity":"gotcha","affected_versions":"All"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npm i arco-cli@latest yarn -g` to install the Arco CLI globally.","cause":"`arco-cli` is not installed globally or not in system PATH.","error":"command not found: arco"},{"fix":"Navigate into your project directory (`cd my-arco-pro-project`) and run `yarn install` or `npm install`.","cause":"Dependencies for the scaffolded project were not installed or installation failed.","error":"Error: Cannot find module '@arco-design/web-vue'"},{"fix":"Either stop the process using the port or configure your `vite.config.ts` to use a different port (e.g., `server: { port: 3001 }`).","cause":"Another process is occupying the default development server port.","error":"Port 3000 (or other) is already in use."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null}