team/znc-admin
2
0
Fork 0
Code Issues Pull Requests Actions 4 Packages Projects Releases Wiki Activity
Files
3d66688e9393ece8a01844fda1da7a8e1bd941f9
znc-admin/docs/src/en/guide/in-depth/ui-framework.md
liangzai 3d66688e93
Some checks failed
CI / Test (ubuntu-latest) (push) Has been cancelled
Details
CI / Test (windows-latest) (push) Has been cancelled
Details
CI / Lint (ubuntu-latest) (push) Has been cancelled
Details
CI / Lint (windows-latest) (push) Has been cancelled
Details
CI / Check (ubuntu-latest) (push) Has been cancelled
Details
CI / Check (windows-latest) (push) Has been cancelled
Details
CodeQL / Analyze (javascript-typescript) (push) Has been cancelled
Details
Deploy Website on push / Deploy Push Playground Ftp (push) Has been cancelled
Details
Deploy Website on push / Deploy Push Docs Ftp (push) Has been cancelled
Details
Deploy Website on push / Deploy Push Antd Ftp (push) Has been cancelled
Details
Deploy Website on push / Deploy Push Element Ftp (push) Has been cancelled
Details
Deploy Website on push / Deploy Push Naive Ftp (push) Has been cancelled
Details
Release Drafter / update_release_draft (push) Has been cancelled
Details
CI / CI OK (push) Has been cancelled
Details
Deploy Website on push / Rerun on failure (push) Has been cancelled
Details
Lock Threads / action (push) Has been cancelled
Details
Issue Close Require / close-issues (push) Has been cancelled
Details
Close stale issues / stale (push) Has been cancelled
Details
f
2026-01-12 14:04:40 +08:00

1018 B
Raw Blame History

UI Framework Switching

Vue Admin supports your freedom to choose the UI framework. The default UI framework for the demo site is Ant Design Vue, consistent with the older version. The framework also has built-in versions for Element Plus and Naive UI, allowing you to choose according to your preference.

Adding a New UI Framework

If you want to use a different UI framework, you only need to follow these steps:

  1. Create a new folder inside apps, for example, apps/web-xxx.
  2. Change the name field in apps/web-xxx/package.json to web-xxx.
  3. Remove dependencies and code from other UI frameworks and replace them with your chosen UI framework's logic, which requires minimal changes.
  4. Adjust the language files within locales.
  5. Adjust the components in app.vue.
  6. Adapt the theme of the UI framework to match Vben Admin.
  7. Adjust the application name in .env.
  8. Add a dev:xxx script in the root directory of the repository.
  9. Run pnpm install to install dependencies.