基于nodejs的2款面板登录程序：antd-admin 和 vue-admin-template

 http://antd-admin.zuiidea.com/

AntD-Admin

An excellent front-end solution for enterprise applications.

      

• Preview - https://antd-admin.zuiidea.com
• Documentation - https://doc.antd-admin.zuiidea.com
• FAQ - https://doc.antd-admin.zuiidea.com/#/faq
• ChangeLog - https://doc.antd-admin.zuiidea.com/#/change-log

English | 简体中文

Features

• Internationalization, extracting translation fields from source code, loading language packs on demand
• Dynamic permissions, different permissions for different menus
• Elegant and beautiful, Ant Design system
• Mock data, local data debugging

Usage

1. Clone project code.

git clone https://github.com/zuiidea/antd-admin.git my-project
cd my-project

2. Installation dependence.

yarn install

Or

npm install

3. Start local server.

npm run start

4. After the startup is complete, open a browser and visit http://localhost:7000, If you need to change the startup port, you can configure it in the .env file.

More instructions at documentation。

from https://github.com/zuiidea/antd-admin 

----

a vue2.0 minimal admin template。

vue-admin-template

English | 简体中文

A minimal vue admin template with Element UI & axios & iconfont & permission control & lint

Live demo: http://panjiachen.github.io/vue-admin-template

The current version is v4.0+ build on vue-cli. If you want to use the old version , you can switch branch to tag/3.11.0, it does not rely on vue-cli

Build Setup

# clone the project
git clone https://github.com/PanJiaChen/vue-admin-template.git

# enter the project directory
cd vue-admin-template

# install dependency
npm install

# develop
npm run dev

This will automatically open http://localhost:9528

Build

# build for test environment
npm run build:stage

# build for production environment
npm run build:prod

Advanced

# preview the release environment effect
npm run preview

# preview the release environment effect + static resource analysis
npm run preview -- --report

# code format check
npm run lint

# code format check and auto fix
npm run lint -- --fix

Refer to Documentation for more information

Demo

Extra

If you want router permission && generate menu by user roles , you can use this branch permission-control

For typescript version, you can use vue-typescript-admin-template (Credits: @Armour)

Related Project

• vue-element-admin

• electron-vue-admin

• vue-typescript-admin-template

• awesome-project

from https://github.com/PanJiaChen/vue-admin-template

----

learn

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

from  https://github.com/avrilko-go/vue-admin

-------

admin template based on vuejs2 and element.

demo: https://taylorchen709.github.io/vue-admin/

To start

This is a project template for vue-cli

# install dependencies
npm install

# serve with hot reload at localhost:8081
npm run dev

# build for production with minification
npm run build

Folder structure

• build - webpack config files
• config - webpack config files
• dist - build
• src -your app
  • api
  • assets
  • common
  • components - your vue components
  • mock
  • styles
  • views - your pages
  • vuex
  • App.vue
  • main.js - main file
  • routes.js
• static - static assets

Theme

You can change theme by

1. Generate theme packages by https://elementui.github.io/theme-preview/#/
2. Put theme packages in src/assets/theme/
3. Edit src/main.js

   import 'element-ui/lib/theme-default/index.css'
   to
   import './assets/theme/your-theme/index.css'

4. Edit src/styles/vars.scss

 

Browser support

Modern browsers and IE 10+.

from https://github.com/taylorchen709/vue-admin 

------------------------------

通用 React 后台管理模板

React + Mobx + Hooks + reactstrap

from https://github.com/QiYuOr2/react-admin-template

--------------------------------------------

 A magical vue admin https://panjiachen.github.io/vue-element-admin

      

English | 简体中文 | 日本語 | Spanish

Introduction

vue-element-admin is a production-ready front-end solution for admin interfaces. It is based on vue and uses the UI Toolkit element-ui.

vue-element-admin is based on the newest development stack of vue and it has a built-in i18n solution, typical templates for enterprise applications, and lots of awesome features. It helps you build large and complex Single-Page Applications. I believe whatever your needs are, this project will help you.

• Preview

• Documentation

• Gitter

• Donate

• Wiki

• Gitee 国内用户可访问该地址在线预览

• Base template recommends using: vue-admin-template

• Desktop: electron-vue-admin

• Typescript: vue-typescript-admin-template (Credits: @Armour)

• awesome-project

After the v4.1.0+ version, the default master branch will not support i18n. Please use i18n Branch, it will keep up with the master update

The current version is v4.0+ build on vue-cli. If you find a problem, please put issue. If you want to use the old version , you can switch branch to tag/3.11.0, it does not rely on vue-cli

This project does not support low version browsers (e.g. IE). Please add polyfill by yourself.

Preparation

You need to install node and git locally. The project is based on ES2015+, vue, vuex, vue-router, vue-cli , axios and element-ui, all request data is simulated using Mock.js. Understanding and learning this knowledge in advance will greatly help the use of this project.

Flatlogic

Admin Dashboard Templates made with Vue, React and Angular.

Features

- Login / Logout

- Permission Authentication
  - Page permission
  - Directive permission
  - Permission configuration page
  - Two-step login

- Multi-environment build
  - Develop (dev)
  - sit
  - Stage Test (stage)
  - Production (prod)

- Global Features
  - I18n
  - Multiple dynamic themes
  - Dynamic sidebar (supports multi-level routing)
  - Dynamic breadcrumb
  - Tags-view (Tab page Support right-click operation)
  - Svg Sprite
  - Mock data
  - Screenfull
  - Responsive Sidebar

- Editor
  - Rich Text Editor
  - Markdown Editor
  - JSON Editor

- Excel
  - Export Excel
  - Upload Excel
  - Visualization Excel
  - Export zip

- Table
  - Dynamic Table
  - Drag And Drop Table
  - Inline Edit Table

- Error Page
  - 401
  - 404

- Components
  - Avatar Upload
  - Back To Top
  - Drag Dialog
  - Drag Select
  - Drag Kanban
  - Drag List
  - SplitPane
  - Dropzone
  - Sticky
  - CountTo

- Advanced Example
- Error Log
- Dashboard
- Guide Page
- ECharts
- Clipboard
- Markdown to html

Getting started

# clone the project
git clone https://github.com/PanJiaChen/vue-element-admin.git

# enter the project directory
cd vue-element-admin

# install dependency
npm install

# develop
npm run dev

This will automatically open http://localhost:9527

Build

# build for test environment
npm run build:stage

# build for production environment
npm run build:prod

Advanced

# preview the release environment effect
npm run preview

# preview the release environment effect + static resource analysis
npm run preview -- --report

# code format check
npm run lint

# code format check and auto fix
npm run lint -- --fix

Refer to Documentation for more information

Changelog

Detailed changes for each release are documented in the release notes.

Online Demo

Preview

from PanJiaChen/vue-element-admin: :tada: A magical vue admin https://panjiachen.github.io/vue-element-admin

 --------------------------------------------------

vue-element-admin-template

(from giscafer/vue-element-admin-template: 用于开发简单的后台管理系统)

用于开发简单的后台管理系统.

设计说明

框架设计文档

截图

开发

# 克隆项目
git clone https://github.com/giscafer/vue-admin-template.git

# 进入项目目录
cd vue-admin-template

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 启动服务
npm run dev

浏览器访问 http://localhost:9527

发布

# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod

其它

# 预览发布环境效果
npm run preview

# 预览发布环境效果 + 静态资源分析
npm run preview -- --report

# 代码格式检查
npm run lint

# 代码格式检查并自动修复
npm run lint -- --fix