How jiaxiliang/vue-naive-admin works
Vue 3 administrative dashboard: a user enters through login or navigates to dashboard and management screens; route guards and shared identity/permission state support access control, while screens use API modules for server-backed operations. The app also provides configurable layouts, tabs, themes, and reusable CRUD/form/modal utilities. The tree and sampled files establish startup, routing, HTTP, and CRUD behavior; several screen and guard internals are unsampled, so their detailed wiring is not expanded.
Main entry points: router/index.js Router · http/index.js HTTP Client · App.vue Root App · main.js App Bootstrap
Components 29
App and Navigation
- App Bootstrap
src/main.js - Root App
src/App.vue - Router
src/router/index.js - Route Guards
src/router/guards/index.js - Layouts
src/layouts
Identity and Access
- Login Screen
src/views/login/index.vue - Login API
src/views/login/api.js - Auth State
src/store/modules/auth.js - Permission State
src/store/modules/permission.js - User State
src/store/modules/user.js
Admin Features
- Home Screen
src/views/home/index.vue - User Management
src/views/pms/user/index.vue - User API
src/views/pms/user/api.js - Role Management
src/views/pms/role/index.vue - Role API
src/views/pms/role/api.js - Resource Management
src/views/pms/resource/index.vue - Resource API
src/views/pms/resource/api.js - Profile Screen
src/views/profile/index.vue - Profile API
src/views/profile/api.js
Shared Platform
- CRUD Composable
src/composables/useCrud.js - Modal Component
src/components/me/modal/index.vue - Form Composable
src/composables/useForm.js - HTTP Client
src/utils/http/index.js - Shared API
src/api/index.js - App Preferences
src/store/modules/app.js - Tab State
src/store/modules/tab.js - Session Storage
Other components
- Administrator
- Backend Service
Connections 31
- Administrator → Root App: uses
- App Bootstrap → Root App: mounts
- App Bootstrap → Router: initializes
- App Bootstrap → Auth State: installs state
- Root App → Router: renders routes
- Router → Route Guards: registers guards
- Router → Login Screen: routes to
- Router → Home Screen: routes to
- Router → User Management: routes to
- Router → Role Management: routes to
- Router → Resource Management: routes to
- Router → Profile Screen: routes to
- Root App → Layouts: selects layout
- Login Screen → Login API: uses
- Login API → HTTP Client: sends requests
- User Management → User API: uses
- Role Management → Role API: uses
- Resource Management → Resource API: uses
- Profile Screen → Profile API: uses
- User API → HTTP Client: sends requests
- Role API → HTTP Client: sends requests
- Resource API → HTTP Client: sends requests
- Profile API → HTTP Client: sends requests
- Shared API → HTTP Client: sends requests
- HTTP Client → Backend Service: HTTP calls
- CRUD Composable → Form Composable: uses
- CRUD Composable → Modal Component: opens
- Root App → App Preferences: reads preferences
- Root App → Tab State: reads tabs
- App Preferences → Session Storage: persists settings
- Route Guards → Permission State: checks access