Larke Admin Frontend Laravel Package

Getting Started

This is a standalone Vue 2 + Element UI SPA, not a Composer package you require in a Laravel app. It is the decoupled frontend that talks to a larke-admin backend over HTTP, so treat it as a companion repo rather than a library.

Minimal setup:

1. Clone the repo (or fork it if you plan to customize): git clone https://github.com/deatil/larke-admin-frontend. Note the package name in the prompt (lake/larke-admin-frontend) is off — the actual repo is deatil/larke-admin-frontend.
2. Install dependencies with the Node version the lockfile expects. For Vue 2 / vue-cli / webpack 4-era tooling, prefer Node 14–16; newer Node (18+/20+) frequently breaks node-sass or openssl in webpack 4.
3. Point the API at your backend. Look first in .env* files and src/config/ (base URL / request prefix), plus the axios instance under src/utils/request.js or src/api/. Set the base URL to your working larke-admin backend (which itself is a Laravel app with the API plugin running).
4. Run it: npm run serve (or yarn serve). Log in with the super-admin credentials created on the backend side.
5. Build for production: npm run build and serve dist/ — either from Laravel's public/ dir or via nginx.

First use case: get the login screen talking to your backend and land on the dashboard. That single flow validates CORS, the API prefix, token handling, and menu/permission hydration in one go — everything else in the app hangs off those four pieces.

Where to look first, in order: .env/src/config → src/utils/request.js (axios interceptors) → src/router/ (routes and guards) → src/store/ (auth/user state) → src/views/ (actual pages).

Implementation Patterns

Cloning as your own admin base. Because it's a template, the common pattern is: fork the repo, keep src/api/ and src/utils/request.js as the sole network layer, and add your own view modules under src/views/<module>/ with a matching src/api/<module>.js. Avoid scattering axios calls through components.

Token + interceptor flow. Auth is typically a token stored in localStorage and Vuex, injected by an axios request interceptor. The response interceptor catches the backend's auth/401 envelope and redirects to login. When integrating against a customized larke-admin, this interceptor is the first place to adapt — the backend's error envelope (code/message/data) may differ from what the frontend expects.

Menu and route generation. Admin frameworks in this family usually drive sidebar menus and even route permissions from data returned by the backend, not purely from static route files. So a new page needs three aligned things: a frontend route/component, an API endpoint, and a backend menu/permission entry. Missing any one yields a page that 404s, an empty menu, or a button that silently hides.

Permission directives. Button- and column-level control is usually done with a v-permission-style directive checked against the current user's permission codes. Pattern: derive codes from the logged-in user, register the directive globally, and keep the code strings identical to the backend menu permission keys.

Reusable CRUD scaffolding. The dominant day-to-day pattern is list + search form + dialog form CRUD. Copy an existing module (e.g. users/roles) as the template, then swap the API module and columns. This is faster and safer than building a page from scratch and keeps Element UI table/pagination/form conventions consistent.

Deployment integration. Build with npm run build, then either drop dist/ into the Laravel public/ subdirectory or serve it via nginx with a try_files ... /index.html fallback for history-mode routing. Set the vue-cli publicPath to match where you mount it (subpath vs. root) so asset URLs resolve.

Gotchas and Tips

• Vue 2 and Element UI are EOL. No Vue 3, no Element Plus, no Vite. Plan upgrades as migrations, not version bumps. Budget for it if you expect long-term maintenance.
• Node/OpenSSL breakage. webpack 4 + node-sass fails on newer Node with ERR_OSSL_EVP_UNSUPPORTED or binding errors. Fix by pinning Node 14/16, or NODE_OPTIONS=--openssl-legacy-provider, or swapping to sass (dart-sass).
• Env var prefix. With vue-cli only VUE_APP_* variables reach the app. Renaming a VITE_/API_ var won't work — this trips people coming from other toolchains.
• CORS before anything else. If login hangs or requests fail with opaque errors, it's almost always the API base URL or backend CORS/APP_URL mismatch, not the frontend code. Test the login endpoint with curl first.
• Permission drift is silent. Backend permission codes and frontend v-permission strings are not type-checked; a typo just hides a button. Keep a single authoritative list of codes and grep both sides when something "disappears."
• Menu vs. route mismatch. A page exists but isn't in the menu (or vice versa) because menus are data-driven from the backend. Clear the backend menu cache / re-seed permissions after adding modules.
• Token expiry UX. Confirm the interceptor handles expiry gracefully (redirect once, no infinite 401 loops from concurrent requests). A per-request retry/refresh strategy is a common custom addition.
• Docs and comments are largely Chinese. Expect to read source for extension conventions. This package's low star count and near-zero dependents mean minimal community answers — treat the repo as a starting template, not a supported framework.
• Fork, don't track upstream blindly. With an inactive/low-traction repo, pin to a known commit, keep upstream merges rare, and own your patches. Apache-2.0 means you can fork freely — do so.
• Extension point to lean on: the axios layer and the async route/menu builder. Centralizing those two gives you a clean seam to adapt the frontend to backend changes without touching every view.