Javascript Vue

A simple Admin Interfaces, based on Vite + Vue3 + ElementPlus + Typescript3 min read

A frontend SIMPLE Admin Interfaces, based on Vite + Vue3 + ElementPlus + Typescript.







English | 简体中文

This is element-plus version of vue-clownfish-admin, if you prefer antd as UI toolkit, checokut here.

🐬 Intro

vue-clownfish-admin is a frontend SIMPLE Admin Interfaces. It is based on vue3 and uses element-plus as UI toolkit. The main tech stacks are
ES2015+typescriptvue3piniavue-routerviteelement-plus. Understanding and Learning them will help you quickly use this project. Due to this project based on vite and vue3, it only support modern browsers, legacy browsers such as ie can be supported by add polyfill manually(detail see https://vitejs.dev/guide/build.html).

preview online

This project is a pure project and does not integrate any case examples that is not related to this project. There are only a few codes that you may not use, which are only functional examples of this project for reference. Standing on the shoulders of giants, if you are familiar with vue-element-admin, then you can get started with this project faster. The architecture implementation of vue-clownfish-admin is inspired by it.

🦑 Advantage

Tech: Use the latest tech stacks of vue3.
Pure: No mockjs, case examples integrated, you can configure freely.
Layout: Layout components are decoupled, easy to use and replace it.
Lightweight:Less codes, easy to learn and get started quickly.

🐳 Features

Automatically generate sidebar menus based on routing configuration (supports multi-level nesting and external links)
Dynamically generate breadcrumbs based on current routing information
Navigation tabs (right-click pop-up menu, support page refresh, close)
Sidebar menus, breadcrumbs, and tabs all support icons (element-plus icons and svg)
Dynamically cache pages based on routing configuration
Routing permissions
Svg Sprite Icon
Automatically register global components (element-plus components and components/*.vue)
Support native CSS variables and CSSWG draft regulations for development, and write CSS that conforms to future standards
Automatically add prefixes to CSS codes to adapt styles to different browsers
Supports development with JSX/TSX

🐋 Directory

.
|– public
| `– favicon.ico
|– src
| |– assets
| | `– logo.png
| |– components // Component directory, all vue components in this directory will be automatically registered as global components, no need to import
| | |– MenuPanel.vue
| | |– Scrollbar.vue
| | |– SvgIcon.vue
| | `– components.expose.d.ts
| |– composables // Composable functions directory
| |– layout // Layout directory
| | |– BreadCrumb.vue
| | |– HeadBar.vue
| | |– SideBar.vue
| | |– TabsBar.vue
| | |– index.vue
| | `– layout.d.ts
| |– router // Router directory
| | `– index.ts
| |– stores // pinia store directory
| | |– stores.d.ts
| | `– user.ts
| |– styles // global styles directory
| | |– _elem.postcss
| | |– _transition.postcss
| | |– _variables.postcss
| | `– index.postcss
| |– svgs // Svg icon directory, all svg icon names in this directory can be directly referenced by the component SvgIcon
| | |– dashboard.svg
| | `– nested.svg
| |– utils // Utils directory
| | `– index.ts
| |– views // Views directory
| |– 404.vue
| |– dashboard.vue
| |– login.vue
| |– redirect.vue
| |– App.vue
| |– appConfig.ts
| |– env.d.ts
| |– main.ts
| `– permission.ts // router guards
|– index.html
|– package.json
|– components.d.ts
|– tsconfig.json
|– tsconfig.node.json
|– vite.config.ts
`– yarn.lock
|– LICENSE
|– README.md

🦀 Ready

# clone project
git clone https://github.com/1esse/vue-clownfish-admin-elem.git

# enter the project directory
cd vue-clownfish-admin-elem

# install dependency
npm install # use npm
yarn # use yarn

# start
npm run dev # use npm
yarn dev # use yarn

🐠 Scripts

dev:start development
build:build project
preview:preview the built project

🦐 Preview

preview online

🐡 Others

If you encounter any problems with the project, please submit an issue.

🐙 License

MIT License

Copyright © 2022-present ZhaoJieXin

GitHub

View Github

Leave a Reply

Your email address will not be published.

Pin It on Pinterest