# Introducción

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

Es un administrador vue mágico basado en el nuevo conjunto de desarrollo de vue, solución i18n incorporada, plantillas típicas para aplicaciones empresariales, muchas características increíbles. Te ayuda a construir grandes aplicaciones complejas de una sola página. Creo que sean cuales sean tus necesidades, este proyecto te ayudará.

TIP

Este proyecto integra muchas características que no puedes usar, causará mucha redundancia de código. Si tu proyecto no presta atención a este problema, también puedes desarrollarlo directamente basándote en él. De lo contrario, puedes usar vue-admin-template.

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

# Características

- 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 en 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
  - Visualización de Excel
  - Exportar zip

- Tabla
  - Tabla dinámica
  - 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
  - Dropzone
  - Sticky
  - CountTo

- Ejemplo avanzado
- Registro de errores
- Tablero
- Guía de la página
- ECharts
- 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 y element-ui, todos los datos de solicitud se simulan utilizando Mock.js. Comprender y aprender este conocimiento de antemano te será de gran ayuda para el uso de este proyecto.

Al mismo tiempo, apoyando una serie de artículos tutoriales, cómo construir un proyecto de fondo completo desde cero, te sugerimos que leas estos artículos y luego vengas a practicar este proyecto. Pero todavía no hay una versión en inglés.

TIP

Este proyecto no es compatible con navegadores de bajo nivel (como IE). Si lo necesitas, agrega polyfills tu mismo.

# Estructura del proyecto

Este proyecto ha incorporado las siguientes plantillas, y han construido un andamiaje basado en Vue, que debería ayudarte a crear prototipos de interfaces de administración listas para producción. Cubre casi todo lo que necesitas.

├── 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                  # almacén
│   ├── 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 dependencias
npm install

# develop
npm run dev

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

Si ves la siguiente página, entonces has tenido éxito.

Tenemos modelos integrados, componentes estándar, datos simulados, recarga módulos hot, administración de estado, i18n, enrutador global, etc. Puedes continuar explorando otros documentos para obtener más detalles sobre esos 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 un desarrollo secundario sobre la base de vue-admin-template, si necesitas alguna característica adicional, la puedes copiar desde vue-element-admin.

# Contribución

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

Puede haber algunos errores ortográficos o de traducción al escribir este documento. Eres bienvenido a señalar por issue o por pr.

vue-element-admin también continúa iterando, resumiendo y resumiendo más funciones, y resume las mejores prácticas de los escenarios de productos templates/components/business de negocio en el medio y de back office. Este proyecto también espera tu participación y comentarios.

# Donar

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

# Soporte de navegadores

Navegadores modernos e Internet Explorer 10+.

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

# Ecosistema Vue

En primer lugar, comprender las cosas en estos ecosistemas vue te ayudará a comenzar con este proyecto.

Vue Router Vue Router es el enrutador oficial de Vue.js. Se integra profundamente con el núcleo de Vue.js para facilitar la creación de Aplicaciones de una sola página con Vue.js.
Vuex Vuex es un patrón de gestión de estado + biblioteca para aplicaciones Vue.js. Sirve como un almacén centralizado para todos los componentes de una aplicación, con reglas que aseguran que el estado solo pueda mutarse de manera predecible.
Vue Loader Vue-loader es un cargador para webpack que permite crear componentes de Vue en un formato llamado Componentes de un solo archivo (SFCs). La combinación de webpack y vue-loader brinda un flujo de trabajo front-end moderno, flexible y extremadamente potente para la creación de aplicaciones Vue.js.
Vue Server Renderer Vue-server-renderer facilita la creación de aplicaciones JavaScript isomorfas o universales que se ejecutan tanto en el lado del servidor como del cliente, donde la mayoría del código de la aplicación se comparte y se reutiliza.
Vue Test Utils Vue Test Utils es la biblioteca de utilidad de prueba de unidad oficial para Vue.js.
Vue Dev-Tools Extensión de navegador devtools para depurar aplicaciones Vue.js.
Vue CLI Vue CLI es un sistema completo para el rápido desarrollo de Vue.js. Su objetivo es ser la línea base de herramientas estándar para el ecosistema Vue. Asegura que las diversas herramientas de compilación funcionen sin problemas junto con valores predeterminados razonables para que pueda concentrarse en escribir tu aplicación en lugar de pasar días discutiendo con las configuraciones.
Vetur Herramientas Vue para VS Code. Escribe vue essential plugins en VS Code.