Introducción

vue-element-admin es una solución de front-end lista para producción para interfaces de administración. Basado en vue y utilizar el kit de herramientas de interfaz de usuario element-ui.

Es un administrador de vue mágico basado en la nueva pila de desarrollo de vue, la solución i18n incorporada, las plantillas típicas para aplicaciones empresariales, muchas características increíbles. Le ayuda a construir un gran complejo de aplicaciones de una sola página. Cualquiera que sean las necesidades, este proyecto te ayudará.

TIP

Este proyecto integra una gran cantidad de características que no puede utilizar, causará una gran cantidad de redundancia de código. Si su proyecto no presta atención a este problema, también puede desarrollarlo directamente en función de él. De lo contrario, puede utilizar vue-admin-template.

Solución integrada: vue-element-admin
Plantilla Básica: vue-admin-template
Desktop: electron-vue-admin
Typescript: vue-typescript-admin-template (Credits: @Armour)
Others: awesome-project

Caracteristicas

- Iniciar sesión / Cerrar sesión

- Autenticación de Permisos
  - Permiso de la página
  - Permiso directivo
  - Página de configuración de permisos
  - Inicio de sesión de dos pasos

- Construcción multi-ambiente
  - dev sit stage prod

- Características Globales
  - I18n
  - Múltiples temas dinámicos
  - Barra lateral dinámica (admite enrutamiento multinivel)
  - Breadcrumb dinámicos
  - Etiquetas-vista (Página de pestaña Soporte de operación del clic derecho)
  - Svg Sprite
  - Datos simulados
  - Pantalla completa
  - Barra lateral responsiva

- Editor
  - Editor de texto enriquecido
  - Editor de Markdown
  - Editor de JSON

- Excel
  - Exportar Excel
  - Subir Excel
  - Visualization de Excel
  - Exportar zip

- Tabla
  - Tabla dinamica
  - Arrastrar y soltar tabla
  - Tabla de edición en línea

- Página de error
  - 401
  - 404

- Componentes
  - Subir Avatar
  - Volver arriba
  - Arrastrar diálogo
  - Arrastrar Seleccionar
  - Drag Kanban
  - Arrastrar lista
  - panel dividido
  - Zona de descenso
  - Sticky
  - Contar hasta

- Ejemplo avanzado
- Registro de errores
- Tablero
- Guía de la página
- Gráficos E
- Portapapeles
- Markdown a html

Preparación

Necesitas instalar node y git locamente. El proyecto se basa en ES2015+, vue, vuex, vue-router, vue-cli , axios and element-ui, todos los datos de solicitud se simulan utilizando Mock.js. La comprensión y el aprendizaje de este conocimiento de antemano le ayudará en gran medida el uso de este proyecto.

Al mismo tiempo que respalda una serie de artículos tutoriales, cómo construir un proyecto de fondo completo desde cero, le sugerimos que lea estos artículos y luego practique este proyecto. Pero todavía no hay una versión en español.

TIP

Este proyecto no admite navegadores de bajo nivel (como IE, por ejemplo,). Si lo necesita, por favor agregue polyfills usted mismo.

Estructura del Proyecto

Este proyecto ha incorporado las siguientes plantillas, y han construido un andamiaje basado en Vue, que debe ayudar a la creación de prototipos interfaces de administración listos para la producción. Cubre casi todo lo que necesita.

├── build                      # construir archivos de configuración
├── mock                       # datos simulados
├── plop-templates             # plantilla básica
├── public                     # activos estáticos puros (directamente copiados)
│   │── favicon.ico            # favicon
│   └── index.html             # plantilla index.html
├── src                        # código fuente principal
│   ├── api                    # servicio de api
│   ├── assets                 # Activos del módulo como fuentes, imágenes (procesadas por webpack).
│   ├── components             # componentes globales
│   ├── directive              # directiva global
│   ├── filters                # filtro global
│   ├── icons                  # iconos svg
│   ├── lang                   # idioma i18n
│   ├── layout                 # diseño global
│   ├── router                 # enrutador
│   ├── store                  # almacenar
│   ├── styles                 # css global
│   ├── utils                  # utiles globales
│   ├── vendor                 # vendor
│   ├── views                  # vistas
│   ├── App.vue                # componente principal de la aplicación
│   ├── main.js                # archivo de entrada de la aplicación
│   └── permission.js          # autenticación de permisos
├── tests                      # pruebas
├── .env.xxx                   # configuración de variables env
├── .eslintrc.js               # configuración eslint
├── .babelrc                   # configuración babel
├── .travis.yml                # configuración automatizada de CI
├── vue.config.js              # configuración vue-cli
├── postcss.config.js          # configuración postcss
└── package.json               # package.json

Empezando

# clonar el proyecto
git clone https://github.com/PanJiaChen/vue-element-admin.git

# entrar en el directorio del proyecto
cd vue-element-admin

# instalar la dependencias
npm install

# develop
npm run dev

Esto se abrirá automáticamente http://localhost:9527.

Si ve la siguiente página, entonces ha tenido éxito.

Tenemos modelos integrados, componentes estándar, datos simulados, recarga módulo de administración de estado, caliente, i18n, el router mundial, etc. Puede seguir explorando otros documentos para más detalles sobre estos temas.

TIP

Sugerencia: Puedes usar vue-element-admin como una caja de herramientas o como un repositorio de solución de integración, se recomienda hacer el desarrollo de secundaria sobre la base de vue-admin-template, Si necesita alguna característica adicional, puede copiar desde vue-element-admin.

Contribución

El repositorio de documentación es vue-element-admin-site basada en vuepress desarrollo.

Es posible que haya algunos errores de ortografía o traducción en el curso de la redacción de este documento. Es bienvenido señalar por tema o pr. Después de todo, el español no es mi lengua materna.

vue-element-admin También continúa para repetir, resumir y sintetizar más características, y resumir las mejores prácticas de los productos plantillas / componentes / escenarios de negocio en el medio y de back office.. Este proyecto también espera su participación y comentarios.

Donate

Si crees que este proyecto es útil, puedes comprar un vaso de jugo para el autor ❤️ Donar

Browsers Support

Los navegadores modernos e Internet Explorer 10+.

IE / Edge	Firefox	Chrome	Safari
IE10, IE11, Edge	últimas 2 versiones	últimas 2 versiones	últimas 2 versiones

# Introducción

# Caracteristicas

# Preparación

# Estructura del Proyecto

# Empezando

# Contribución

# Donate

# Browsers Support