+[](https://codesandbox.io/s/github/PanJiaChen/vue-element-admin/tree/CodeSandbox) + +
Plantilla de Dashboard de administración hecha con Vue, React y Angular.
+### GitAds + +> vue-element-admin is being sponsored by the following tool; please help to support us by taking a look and signing up to a free trial + +[
](https://tracking.gitads.io/?repo=vue-element-admin)
+
## Características
```
- Iniciar / Cerrar Sesión
-- Permisos de Authentication
+- Permisos de Autenticación
- Página de Permisos
- Directivas de permisos
- Página de configuración de permisos
- Autenticación por dos pasos
- Construcción Multi-entorno
- - dev sit stage producción
+ - Desarrollo (dev)
+ - sit
+ - Escenario de pruebas (stage),
+ - Producción (prod)
- Características Globales
- I18n
- Temas dinámicos
- - Dynamic sidebar (soporte a rutas multi-nivel)
+ - Menu lateral dinámico (soporte a rutas multi-nivel)
- Barra de rutas dinámica
- - Tags-view (Tab page Support right-click operation)
+ - Tags-view (Pestañas de página, Soporta operación de clic derecho)
- Svg Sprite
- Datos de simulación con Mock
- Pantalla completa
- - Responsive Sidebar
+ - Menu lateral responsivo
- Editor
- Editor de Texto Enriquecido
@@ -106,7 +117,7 @@ Se un patrocinante y pon tu logo en nuestro README on GitHub con un enlace direc
- Exportación a Excel
- Carga de Excel
- Visualización de Excel
- - Exportación como zip
+ - Exportación como ZIP
- Tabla
- Tabla Dinámica
@@ -135,7 +146,7 @@ Se un patrocinante y pon tu logo en nuestro README on GitHub con un enlace direc
- Página de Guías
- ECharts (Gráficos)
- Portapapeles
-- Convertidor de Markdown a html
+- Convertidor de Markdown a HTML
```
## Iniciando
@@ -208,7 +219,7 @@ Navegadores modernos e Internet Explorer 10+.
| [
](https://godban.github.io/browsers-support-badges/)IE / Edge | [
](https://godban.github.io/browsers-support-badges/)Firefox | [
](https://godban.github.io/browsers-support-badges/)Chrome | [
](https://godban.github.io/browsers-support-badges/)Safari |
| --------- | --------- | --------- | --------- |
-| IE10, IE11, Edge| últimas 2 versiones| últimas 2 versiones| últimas 2 versiones
+| IE10, IE11, Edge | últimas 2 versiones | últimas 2 versiones | últimas 2 versiones |
## Licencia
diff --git a/README.ja.md b/README.ja.md
index 0c49685b..30dfaf7a 100644
--- a/README.ja.md
+++ b/README.ja.md
@@ -59,7 +59,9 @@
**バグ修正や新規機能追加のissue と pull requestは大歓迎です。**
- +[](https://codesandbox.io/s/github/PanJiaChen/vue-element-admin/tree/CodeSandbox) + +
Admin Dashboard Templates made with Vue, React and Angular.
+### GitAds + +> vue-element-admin is being sponsored by the following tool; please help to support us by taking a look and signing up to a free trial + +[](https://tracking.gitads.io/?repo=vue-element-admin)
+
## 機能一覧
```
@@ -81,7 +89,10 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
- 外部IDでログイン
- 複数環境デプロイ
- - dev sit stage prod
+ - dev
+ - sit
+ - stage
+ - prod
- 共通機能
- 多言語切替
@@ -204,7 +215,7 @@ Modern browsers and Internet Explorer 10+.
| [](https://godban.github.io/browsers-support-badges/)IE / Edge | [](https://godban.github.io/browsers-support-badges/)Firefox | [](https://godban.github.io/browsers-support-badges/)Chrome | [](https://godban.github.io/browsers-support-badges/)Safari |
| --------- | --------- | --------- | --------- |
-| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
+| IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions |
## License
diff --git a/README.md b/README.md
index a6a10447..a22c3a42 100644
--- a/README.md
+++ b/README.md
@@ -62,7 +62,9 @@ English | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [Spa
You need to install [node](https://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](https://es6.ruanyifeng.com/), [vue](https://cn.vuejs.org/index.html), [vuex](https://vuex.vuejs.org/zh-cn/), [vue-router](https://router.vuejs.org/zh-cn/), [vue-cli](https://github.com/vuejs/vue-cli) , [axios](https://github.com/axios/axios) and [element-ui](https://github.com/ElemeFE/element), all request data is simulated using [Mock.js](https://github.com/nuysoft/Mock).
Understanding and learning this knowledge in advance will greatly help the use of this project.
- +[](https://codesandbox.io/s/github/PanJiaChen/vue-element-admin/tree/CodeSandbox) + +
Admin Dashboard Templates made with Vue, React and Angular.
+### GitAds + +> vue-element-admin is being sponsored by the following tool; please help to support us by taking a look and signing up to a free trial + +[](https://tracking.gitads.io/?repo=vue-element-admin)
+
## Features
```
@@ -84,7 +92,10 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
- Two-step login
- Multi-environment build
- - dev sit stage prod
+ - Develop (dev)
+ - sit
+ - Stage Test (stage)
+ - Production (prod)
- Global Features
- I18n
@@ -208,7 +219,7 @@ Modern browsers and Internet Explorer 10+.
| [](https://godban.github.io/browsers-support-badges/)IE / Edge | [](https://godban.github.io/browsers-support-badges/)Firefox | [](https://godban.github.io/browsers-support-badges/)Chrome | [](https://godban.github.io/browsers-support-badges/)Safari |
| --------- | --------- | --------- | --------- |
-| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
+| IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions |
## License
diff --git a/README.zh-CN.md b/README.zh-CN.md
index bbb94a48..9628f4cc 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -77,7 +77,9 @@
**如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**
- +[](https://codesandbox.io/s/github/PanJiaChen/vue-element-admin/tree/CodeSandbox) + +
Admin Dashboard Templates made with Vue, React and Angular.
+### GitAds + +> vue-element-admin is being sponsored by the following tool; please help to support us by taking a look and signing up to a free trial + +[](https://tracking.gitads.io/?repo=vue-element-admin)
+
## 功能
```
@@ -99,7 +107,10 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
- 二步登录
- 多环境发布
- - dev sit stage prod
+ - dev
+ - sit
+ - stage
+ - prod
- 全局功能
- 国际化多语言
@@ -221,13 +232,17 @@ Detailed changes for each release are documented in the [release notes](https://
[Buy me a coffee](https://www.buymeacoffee.com/Pan)
+## 购买贴纸
+
+你也可以通过 购买[官方授权的贴纸](https://smallsticker.com/product/vue-element-admin) 的方式来支持 vue-element-admin - 每售出一张贴纸，本项目将获得 2 元的捐赠。
+
## Browsers support
Modern browsers and Internet Explorer 10+.
| [](https://godban.github.io/browsers-support-badges/)IE / Edge | [](https://godban.github.io/browsers-support-badges/)Firefox | [](https://godban.github.io/browsers-support-badges/)Chrome | [](https://godban.github.io/browsers-support-badges/)Safari |
| --------- | --------- | --------- | --------- |
-| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
+| IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions |
## License
diff --git a/babel.config.js b/babel.config.js
index ba179669..fb82b271 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,14 @@
module.exports = {
presets: [
- '@vue/app'
- ]
+ // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
+ '@vue/cli-plugin-babel/preset'
+ ],
+ 'env': {
+ 'development': {
+ // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
+ // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
+ // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
+ 'plugins': ['dynamic-import-node']
+ }
+ }
}
diff --git a/mock/article.js b/mock/article.js
index 50218ae4..23d8ba51 100644
--- a/mock/article.js
+++ b/mock/article.js
@@ -1,4 +1,4 @@
-import Mock from 'mockjs'
+const Mock = require('mockjs')
const List = []
const count = 100
@@ -27,7 +27,7 @@ for (let i = 0; i < count; i++) {
}))
}
-export default [
+module.exports = [
{
url: '/vue-element-admin/article/list',
type: 'get',
diff --git a/mock/index.js b/mock/index.js
index 196e2927..2eed65db 100644
--- a/mock/index.js
+++ b/mock/index.js
@@ -1,10 +1,10 @@
-import Mock from 'mockjs'
-import { param2Obj } from '../src/utils'
+const Mock = require('mockjs')
+const { param2Obj } = require('./utils')
-import user from './user'
-import role from './role'
-import article from './article'
-import search from './remote-search'
+const user = require('./user')
+const role = require('./role')
+const article = require('./article')
+const search = require('./remote-search')
const mocks = [
...user,
@@ -16,7 +16,7 @@ const mocks = [
// for front mock
// please use it cautiously, it will redefine XMLHttpRequest,
// which will cause many of your third-party libraries to be invalidated(like progress event).
-export function mockXHR() {
+function mockXHR() {
// mock patch
// https://github.com/nuysoft/Mock/issues/300
Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
@@ -54,4 +54,7 @@ export function mockXHR() {
}
}
-export default mocks
+module.exports = {
+ mocks,
+ mockXHR
+}
diff --git a/mock/mock-server.js b/mock/mock-server.js
index 806fdacc..8941ec0f 100644
--- a/mock/mock-server.js
+++ b/mock/mock-server.js
@@ -8,7 +8,7 @@ const mockDir = path.join(process.cwd(), 'mock')
function registerRoutes(app) {
let mockLastIndex
- const { default: mocks } = require('./index.js')
+ const { mocks } = require('./index.js')
const mocksForServer = mocks.map(route => {
return responseFake(route.url, route.type, route.response)
})
@@ -44,9 +44,6 @@ const responseFake = (url, type, respond) => {
}
module.exports = app => {
- // es6 polyfill
- require('@babel/register')
-
// parse app.body
// https://expressjs.com/en/4x/api.html#req.body
app.use(bodyParser.json())
diff --git a/mock/remote-search.js b/mock/remote-search.js
index 60809cb8..8fc49267 100644
--- a/mock/remote-search.js
+++ b/mock/remote-search.js
@@ -1,4 +1,4 @@
-import Mock from 'mockjs'
+const Mock = require('mockjs')
const NameList = []
const count = 100
@@ -10,7 +10,7 @@ for (let i = 0; i < count; i++) {
}
NameList.push({ name: 'mock-Pan' })
-export default [
+module.exports = [
// username search
{
url: '/vue-element-admin/search/user',
diff --git a/mock/role/index.js b/mock/role/index.js
index d957493b..4643f006 100644
--- a/mock/role/index.js
+++ b/mock/role/index.js
@@ -1,6 +1,6 @@
-import Mock from 'mockjs'
-import { deepClone } from '../../src/utils/index.js'
-import { asyncRoutes, constantRoutes } from './routes.js'
+const Mock = require('mockjs')
+const { deepClone } = require('../utils')
+const { asyncRoutes, constantRoutes } = require('./routes.js')
const routes = deepClone([...constantRoutes, ...asyncRoutes])
@@ -35,7 +35,7 @@ const roles = [
}
]
-export default [
+module.exports = [
// mock get all routes form server
{
url: '/vue-element-admin/routes',
diff --git a/mock/role/routes.js b/mock/role/routes.js
index d718919c..d33f1624 100644
--- a/mock/role/routes.js
+++ b/mock/role/routes.js
@@ -1,6 +1,6 @@
// Just a mock data
-export const constantRoutes = [
+const constantRoutes = [
{
path: '/redirect',
component: 'layout/Layout',
@@ -72,7 +72,7 @@ export const constantRoutes = [
}
]
-export const asyncRoutes = [
+const asyncRoutes = [
{
path: '/permission',
component: 'layout/Layout',
@@ -523,3 +523,8 @@ export const asyncRoutes = [
{ path: '*', redirect: '/404', hidden: true }
]
+
+module.exports = {
+ constantRoutes,
+ asyncRoutes
+}
diff --git a/mock/user.js b/mock/user.js
index 859bd6f3..d82e079d 100644
--- a/mock/user.js
+++ b/mock/user.js
@@ -23,7 +23,7 @@ const users = {
}
}
-export default [
+module.exports = [
// user login
{
url: '/vue-element-admin/user/login',
diff --git a/mock/utils.js b/mock/utils.js
new file mode 100644
index 00000000..f909a293
--- /dev/null
+++ b/mock/utils.js
@@ -0,0 +1,48 @@
+/**
+ * @param {string} url
+ * @returns {Object}
+ */
+function param2Obj(url) {
+ const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
+ if (!search) {
+ return {}
+ }
+ const obj = {}
+ const searchArr = search.split('&')
+ searchArr.forEach(v => {
+ const index = v.indexOf('=')
+ if (index !== -1) {
+ const name = v.substring(0, index)
+ const val = v.substring(index + 1, v.length)
+ obj[name] = val
+ }
+ })
+ return obj
+}
+
+/**
+ * This is just a simple version of deep copy
+ * Has a lot of edge cases bug
+ * If you want to use a perfect deep copy, use lodash's _.cloneDeep
+ * @param {Object} source
+ * @returns {Object}
+ */
+function deepClone(source) {
+ if (!source && typeof source !== 'object') {
+ throw new Error('error arguments', 'deepClone')
+ }
+ const targetObj = source.constructor === Array ? [] : {}
+ Object.keys(source).forEach(keys => {
+ if (source[keys] && typeof source[keys] === 'object') {
+ targetObj[keys] = deepClone(source[keys])
+ } else {
+ targetObj[keys] = source[keys]
+ }
+ })
+ return targetObj
+}
+
+module.exports = {
+ param2Obj,
+ deepClone
+}
diff --git a/package.json b/package.json
index fb1e8d55..02f68e23 100644
--- a/package.json
+++ b/package.json
@@ -1,55 +1,28 @@
{
"name": "vue-element-admin",
- "version": "4.2.1",
+ "version": "4.4.0",
"description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features",
"author": "Pan