+[](https://codesandbox.io/s/github/PanJiaChen/vue-element-admin/tree/CodeSandbox) + +
Plantilla de Dashboard de administración hecha con Vue, React y Angular.
@@ -76,25 +79,28 @@ Se un patrocinante y pon tu logo en nuestro README on GitHub con un enlace direc ``` - 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 @@ -105,7 +111,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 @@ -134,7 +140,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 @@ -207,7 +213,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 7b1232bc..28ed674c 100644
--- a/README.ja.md
+++ b/README.ja.md
@@ -30,7 +30,7 @@
## 概要
-[vue-element-admin](https://panjiachen.github.io/vue-element-admin) は管理画面のフロントエンドのインタフェース，[vue](https://github.com/vuejs/vue) と [element-ui](https://github.com/ElemeFE/element)を使っています。i18nの多言語対応、可変ルート、権限、典型的なビジネスアプリテンプレートであり、豊富なコンポーネントを提供しています、素早くビジネス用の管理画面の現型を構築に役立ちます。
+[vue-element-admin](https://panjiachen.github.io/vue-element-admin) は管理画面のフロントエンドのインタフェースで、[vue](https://github.com/vuejs/vue) と [element-ui](https://github.com/ElemeFE/element)を使っています。i18nの多言語対応、可変ルート、権限、典型的なビジネスアプリテンプレートであり、豊富なコンポーネントを提供しています。素早くビジネス用の管理画面の現型を構築に役立ちます。
- [デモページ](https://panjiachen.github.io/vue-element-admin)
@@ -44,21 +44,24 @@
- おすすめシンプルテンプレート: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
- デスクトップバージョン: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
-- Typescriptバージョン: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour))
+- Typescriptバージョン: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (感謝: [@Armour](https://github.com/Armour))
+- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
-**After the `v4.1.0+` version, the default master branch will not support i18n. Please use [i18n Branch](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), it will keep up with the master update**
+**バージョン`v4.1.0+`以降について、デフォルトのmasterブランチではi18nをサポートしていません。masterブランチと共にアップデートされる[i18n Branch](https://github.com/PanJiaChen/vue-element-admin/tree/i18n)を使用してください。 **
-**現在のバージョン `v4.0+` は `vue-cli` で構築，バグ報告は[issue](https://github.com/PanJiaChen/vue-element-admin/issues/new)のissueでお願いします。旧バージョン[tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0)もあります。`vue-cli`に依存しないです。**
+**現在のバージョン `v4.0+` は `vue-cli` で構築していて、バグ報告は[issue](https://github.com/PanJiaChen/vue-element-admin/issues/new)のissueでお願いします。旧バージョン[tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0)もあります。こちらは`vue-cli`に依存しないです。**
**低いバージョンのブラウザはサーポートしないです(例えば ie)，必要があれば polyfill を追加してください。 [詳細はこちら](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
## 前準備
-ローカル環境に [node](http://nodejs.org/) と [git](https://git-scm.com/)をインストールが必要です。[ES2015+](http://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) 和 [element-ui](https://github.com/ElemeFE/element)で開発しています。Requestは[Mock.js](https://github.com/nuysoft/Mock)のモックデータを使っています。
+ローカル環境に [node](http://nodejs.org/) と [git](https://git-scm.com/)のインストールが必要です。[ES2015+](http://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) と [element-ui](https://github.com/ElemeFE/element)で開発しています。Requestは[Mock.js](https://github.com/nuysoft/Mock)のモックデータを使っています。
**バグ修正や新規機能追加のissue と pull requestは大歓迎です。**
- +[](https://codesandbox.io/s/github/PanJiaChen/vue-element-admin/tree/CodeSandbox) + +
](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 3a2b6191..5067b8d3 100644
--- a/README.md
+++ b/README.md
@@ -30,9 +30,9 @@ English | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [Spa
## Introduction
-[vue-element-admin](https://panjiachen.github.io/vue-element-admin) is a production-ready front-end solution for admin interfaces. It based on [vue](https://github.com/vuejs/vue) and use the UI Toolkit [element-ui](https://github.com/ElemeFE/element).
+[vue-element-admin](https://panjiachen.github.io/vue-element-admin) is a production-ready front-end solution for admin interfaces. It is based on [vue](https://github.com/vuejs/vue) and uses the UI Toolkit [element-ui](https://github.com/ElemeFE/element).
-It is a magical vue admin based on the newest development stack of vue, built-in i18n solution, typical templates for enterprise applications, lots of awesome features. It helps you build a large complex Single-Page Applications. I believe whatever your needs are, this project will help you.
+[vue-element-admin](https://panjiachen.github.io/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](https://panjiachen.github.io/vue-element-admin)
@@ -49,6 +49,7 @@ It is a magical vue admin based on the newest development stack of vue, built-in
- Base template recommends using: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
- Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
- Typescript: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour))
+- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
**After the `v4.1.0+` version, the default master branch will not support i18n. Please use [i18n Branch](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), it will keep up with the master update**
@@ -61,7 +62,9 @@ It is a magical vue admin based on the newest development stack of vue, built-in
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) + +
](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 82b8908c..d429b91e 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -49,6 +49,7 @@
- 基础模板建议使用: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)
- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
- Typescript 版: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour))
+- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)
**`v4.1.0+`版本之后默认 master 分支将不支持国际化，有需要的请使用[i18n](https://github.com/PanJiaChen/vue-element-admin/tree/i18n)分支，它会和 master 保持同步更新**
@@ -76,7 +77,9 @@
**如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr**
- +[](https://codesandbox.io/s/github/PanJiaChen/vue-element-admin/tree/CodeSandbox) + +
](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/jsconfig.json b/jsconfig.json
new file mode 100644
index 00000000..958df046
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,9 @@
+{
+ "compilerOptions": {
+ "baseUrl": "./",
+ "paths": {
+ "@/*": ["src/*"]
+ }
+ },
+ "exclude": ["node_modules", "dist"]
+}
\ No newline at end of file
diff --git a/mock/article.js b/mock/article.js
index bc236eb9..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
@@ -18,7 +18,7 @@ for (let i = 0; i < count; i++) {
forecast: '@float(0, 100, 2, 2)',
importance: '@integer(1, 3)',
'type|1': ['CN', 'US', 'JP', 'EU'],
- 'status|1': ['published', 'draft', 'deleted'],
+ 'status|1': ['published', 'draft'],
display_time: '@datetime',
comment_disabled: true,
pageviews: '@integer(300, 5000)',
@@ -27,9 +27,9 @@ for (let i = 0; i < count; i++) {
}))
}
-export default [
+module.exports = [
{
- url: '/article/list',
+ url: '/vue-element-admin/article/list',
type: 'get',
response: config => {
const { importance, type, title, page = 1, limit = 20, sort } = config.query
@@ -58,7 +58,7 @@ export default [
},
{
- url: '/article/detail',
+ url: '/vue-element-admin/article/detail',
type: 'get',
response: config => {
const { id } = config.query
@@ -74,7 +74,7 @@ export default [
},
{
- url: '/article/pv',
+ url: '/vue-element-admin/article/pv',
type: 'get',
response: _ => {
return {
@@ -92,7 +92,7 @@ export default [
},
{
- url: '/article/create',
+ url: '/vue-element-admin/article/create',
type: 'post',
response: _ => {
return {
@@ -103,7 +103,7 @@ export default [
},
{
- url: '/article/update',
+ url: '/vue-element-admin/article/update',
type: 'post',
response: _ => {
return {
diff --git a/mock/index.js b/mock/index.js
index 6907e861..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,17 +54,7 @@ export function mockXHR() {
}
}
-// for mock server
-const responseFake = (url, type, respond) => {
- return {
- url: new RegExp(`/mock${url}`),
- type: type || 'get',
- response(req, res) {
- res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
- }
- }
+module.exports = {
+ mocks,
+ mockXHR
}
-
-export default mocks.map(route => {
- return responseFake(route.url, route.type, route.response)
-})
diff --git a/mock/mock-server.js b/mock/mock-server.js
index 4c4cb2af..8941ec0f 100644
--- a/mock/mock-server.js
+++ b/mock/mock-server.js
@@ -2,17 +2,21 @@ const chokidar = require('chokidar')
const bodyParser = require('body-parser')
const chalk = require('chalk')
const path = require('path')
+const Mock = require('mockjs')
const mockDir = path.join(process.cwd(), 'mock')
function registerRoutes(app) {
let mockLastIndex
- const { default: mocks } = require('./index.js')
- for (const mock of mocks) {
+ const { mocks } = require('./index.js')
+ const mocksForServer = mocks.map(route => {
+ return responseFake(route.url, route.type, route.response)
+ })
+ for (const mock of mocksForServer) {
app[mock.type](mock.url, mock.response)
mockLastIndex = app._router.stack.length
}
- const mockRoutesLength = Object.keys(mocks).length
+ const mockRoutesLength = Object.keys(mocksForServer).length
return {
mockRoutesLength: mockRoutesLength,
mockStartIndex: mockLastIndex - mockRoutesLength
@@ -27,10 +31,19 @@ function unregisterRoutes() {
})
}
-module.exports = app => {
- // es6 polyfill
- require('@babel/register')
+// for mock server
+const responseFake = (url, type, respond) => {
+ return {
+ url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
+ type: type || 'get',
+ response(req, res) {
+ console.log('request invoke:' + req.path)
+ res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
+ }
+ }
+}
+module.exports = app => {
// 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 bb33c2f4..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,10 +10,10 @@ for (let i = 0; i < count; i++) {
}
NameList.push({ name: 'mock-Pan' })
-export default [
+module.exports = [
// username search
{
- url: '/search/user',
+ url: '/vue-element-admin/search/user',
type: 'get',
response: config => {
const { name } = config.query
@@ -30,7 +30,7 @@ export default [
// transaction list
{
- url: '/transaction/list',
+ url: '/vue-element-admin/transaction/list',
type: 'get',
response: _ => {
return {
diff --git a/mock/role/index.js b/mock/role/index.js
index 39148076..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,10 +35,10 @@ const roles = [
}
]
-export default [
+module.exports = [
// mock get all routes form server
{
- url: '/routes',
+ url: '/vue-element-admin/routes',
type: 'get',
response: _ => {
return {
@@ -50,7 +50,7 @@ export default [
// mock get all roles form server
{
- url: '/roles',
+ url: '/vue-element-admin/roles',
type: 'get',
response: _ => {
return {
@@ -62,7 +62,7 @@ export default [
// add role
{
- url: '/role',
+ url: '/vue-element-admin/role',
type: 'post',
response: {
code: 20000,
@@ -74,7 +74,7 @@ export default [
// update role
{
- url: '/role/[A-Za-z0-9]',
+ url: '/vue-element-admin/role/[A-Za-z0-9]',
type: 'put',
response: {
code: 20000,
@@ -86,7 +86,7 @@ export default [
// delete role
{
- url: '/role/[A-Za-z0-9]',
+ url: '/vue-element-admin/role/[A-Za-z0-9]',
type: 'delete',
response: {
code: 20000,
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 43f93a04..d82e079d 100644
--- a/mock/user.js
+++ b/mock/user.js
@@ -23,10 +23,10 @@ const users = {
}
}
-export default [
+module.exports = [
// user login
{
- url: '/user/login',
+ url: '/vue-element-admin/user/login',
type: 'post',
response: config => {
const { username } = config.body
@@ -49,7 +49,7 @@ export default [
// get user info
{
- url: '/user/info\.*',
+ url: '/vue-element-admin/user/info\.*',
type: 'get',
response: config => {
const { token } = config.query
@@ -72,7 +72,7 @@ export default [
// user logout
{
- url: '/user/logout',
+ url: '/vue-element-admin/user/logout',
type: 'post',
response: _ => {
return {
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 9942fbac..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