Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 08df4a0

Browse files
committed
Merge branch 'release/1.0.0'
2 parents 6d8c815 + 5936c70 commit 08df4a0

File tree

40 files changed

+1739
-21
lines changed

40 files changed

+1739
-21
lines changed

‎README.md

Lines changed: 84 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,86 @@
11
# vue-cli-plugin-element
22

3-
Quickly build a backend system with vue-cli and element-ui in seconds.
3+
[![Version](https://img.shields.io/npm/v/@codetrial/vue-cli-plugin-element.svg)](https://www.npmjs.com/package/@codetrial/vue-cli-plugin-element)
4+
[![License](https://img.shields.io/npm/l/@codetrial/vue-cli-plugin-element.svg)](https://www.npmjs.com/package/@codetrial/vue-cli-plugin-element)
5+
[![Dependencies](https://img.shields.io/david/codetrial/vue-cli-plugin-element.svg)](https://www.npmjs.com/package/@codetrial/vue-cli-plugin-element)
6+
7+
Quickly build a backend system with vue-cli and element-ui in seconds.
8+
9+
This project is not only a vue-cli plugin but also a vue-cli preset. Have fun!
10+
11+
:us: English | [:cn: 简体中文](README.zh-CN.md)
12+
13+
## Getting Started
14+
15+
### Prerequisites
16+
17+
You must install Vue CLI 3 before you start:
18+
19+
```bash
20+
npm install -g @vue/cli
21+
# OR
22+
yarn global add @vue/cli
23+
```
24+
25+
### Install
26+
27+
You can create your project directly via preset, which already includes configurations such as ESLint and other plugins.
28+
29+
```bash
30+
vue create --preset codetrial/vue-cli-plugin-element your-awesome-project
31+
```
32+
33+
If you don't want to use the preset , you can manually create an empty project via vue-cli.
34+
35+
```bash
36+
# make sure the following features are selected:
37+
# - Babel
38+
# - PWA
39+
# - Router
40+
# - Vuex
41+
# - CSS Pre-processors
42+
# - Linter - Formatter
43+
vue create your-awesome-project
44+
```
45+
46+
Then add the plugin to your project via vue.
47+
48+
```bash
49+
vue add @codetrial/element
50+
```
51+
52+
## Docs
53+
54+
The full documentation: [:book: codetrial.github.io/element-admin](https://codetrial.github.io/element-admin)
55+
56+
## Example
57+
58+
A complete example project: [:zap: @codetrial/element-admin](https://github.com/codetrial/element-admin)
59+
60+
Live Preview: [:telescope: element-admin.now.sh](https://element-admin.now.sh)
61+
62+
## Core Features
63+
64+
- :camera: Minimal dependencies
65+
- :tv: Project Structure
66+
- :telephone_receiver: View Layout
67+
- :pager: Data Processing Layer
68+
- :watch: Authorization
69+
- :radio: Error Pages
70+
- :mag_right: List Example
71+
- :ghost: Form Example
72+
73+
## Contributing
74+
75+
Looking forward to your pull requests.
76+
77+
## Built With
78+
79+
- [Vue.js](https://github.com/vuejs/vue)
80+
- [ElementUI](https://github.com/ElemeFE/element)
81+
82+
## License
83+
84+
[MIT](http://opensource.org/licenses/MIT)
85+
86+
Copyright (c) 2018 - present, Felix Yang

‎README.zh-CN.md

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
# vue-cli-plugin-element
2+
3+
[![Version](https://img.shields.io/npm/v/@codetrial/vue-cli-plugin-element.svg)](https://www.npmjs.com/package/@codetrial/vue-cli-plugin-element)
4+
[![License](https://img.shields.io/npm/l/@codetrial/vue-cli-plugin-element.svg)](https://www.npmjs.com/package/@codetrial/vue-cli-plugin-element)
5+
[![Dependencies](https://img.shields.io/david/codetrial/vue-cli-plugin-element.svg)](https://www.npmjs.com/package/@codetrial/vue-cli-plugin-element)
6+
7+
使用 vue-cli 及 element-ui 闪电般构建一个后台管理系统。
8+
9+
这个项目不仅仅是一个 vue-cli 插件,也是一个 vue-cli preset,希望能够帮到你!
10+
11+
:cn: 简体中文 | [:us: English](README.md)
12+
13+
## 入门指南
14+
15+
### 前置依赖
16+
17+
在开始前,你需要先安装 Vue CLI 3:
18+
19+
```bash
20+
npm install -g @vue/cli
21+
# OR
22+
yarn global add @vue/cli
23+
```
24+
25+
### 安装
26+
27+
你可以通过 preset 的方式直接创建你的项目,它已经包含了 ESLint 等插件的配置。
28+
29+
```bash
30+
vue create --preset codetrial/vue-cli-plugin-element your-awesome-project
31+
```
32+
33+
如果你不想使用 preset 的方式,你也可以先通过 vue-cli 手动创建一个空的项目。
34+
35+
```bash
36+
# 确保你创建的项目选择了以下功能:
37+
# - Babel
38+
# - PWA
39+
# - Router
40+
# - Vuex
41+
# - CSS Pre-processors
42+
# - Linter - Formatter
43+
vue create your-awesome-project
44+
```
45+
46+
然后通过 vue 将插件添加到你的项目中。
47+
48+
```bash
49+
vue add @codetrial/element
50+
```
51+
52+
## 文档
53+
54+
完整的参考文档:[:book: codetrial.github.io/element-admin](https://codetrial.github.io/element-admin)
55+
56+
## 示例
57+
58+
一个使用该插件的完整示例:[:zap: @codetrial/element-admin](https://github.com/codetrial/element-admin)
59+
60+
在线预览:[:telescope: element-admin.now.sh](https://element-admin.now.sh)
61+
62+
## 核心功能
63+
64+
:camera: **最小依赖**:仅依赖 Vue 官方库及 ElementUI 组件库,未额外引入其它第三方库,为你提供自由发挥的空间。
65+
66+
:tv: **目录结构**:根据项目实战经验,设计了合理、清晰的目录结构。
67+
68+
:telephone_receiver: **页面布局**:使用 Vue Router 嵌套路由及 ElementUI 内置组件进行布局。
69+
70+
:pager: **数据处理**:添加独立的 api 及 service 层,将业务逻辑从组件中抽离。
71+
72+
:watch: **权限控制**:为路由添加配置式拦截器,默认支持用户登录鉴权及角色鉴权。
73+
74+
:radio: **列表示例**:一个相对比较完整的列表页示例,包含字段查询(过滤),字段排序,页码跳转,批量操作等等。
75+
76+
:mag_right: **表单示例**:一个相对比较完整的表单页示例,包含表单校验、提交等操作。
77+
78+
:ghost: **错误页面**:内置简单的(其实是偷懒) 403、404 及 500 错误页。
79+
80+
## 贡献
81+
82+
期待你的 `pull requests`。如果你觉得有帮助,还请多多反馈!
83+
84+
## 技术栈
85+
86+
- [Vue.js](https://github.com/vuejs/vue)
87+
- [ElementUI](https://github.com/ElemeFE/element)
88+
89+
## 许可
90+
91+
[MIT](http://opensource.org/licenses/MIT)
92+
93+
Copyright (c) 2018 - present, Felix Yang

‎generator.js

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,49 @@ const fs = require('fs')
33
const removeFiles = (files = []) => {
44
files.forEach(path => {
55
if (fs.existsSync(path)) {
6-
fs.unlinkSync(path);
6+
fs.unlinkSync(path)
77
}
88
})
99
}
1010

11+
const filesToRemove = [
12+
'src/components/HelloWorld.vue',
13+
'src/router.js',
14+
'src/store.js'
15+
]
16+
17+
const importsToRemove = [
18+
`import store from './store'`,
19+
`import router from './router'`
20+
]
21+
1122
module.exports = (api, options, rootOptions) => {
23+
const {
24+
entryFile,
25+
generator: { imports }
26+
} = api
27+
1228
api.extendPackage({
1329
dependencies: {
14-
'element-ui': '^2.4.11'
15-
},
30+
'element-ui': '^2.4.11',
31+
'vuex-router-sync': '^5.0.0'
32+
}
1633
})
1734

18-
api.injectImports(api.entryFile, `import './registerElementUI'`)
35+
// api.injectImports(entryFile, `import './registerElementUI'`)
36+
37+
// Remove the default imports generated by vue-cli
38+
if (imports[entryFile]) {
39+
importsToRemove.forEach(itr => imports[entryFile].delete(itr))
40+
}
1941

42+
// Remove the default files generated by vue-cli
43+
api.render(function(files) {
44+
filesToRemove.forEach(ftr => delete files[ftr])
45+
})
2046
api.render('./template/structure')
2147

2248
api.onCreateComplete(() => {
23-
removeFiles([
24-
api.resolve('src/components/HelloWorld.vue')
25-
])
49+
removeFiles(filesToRemove.map(ftr => api.resolve(ftr)))
2650
})
2751
}

‎package.json

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
{
22
"name": "vue-cli-plugin-element",
3-
"version": "0.1.0",
3+
"version": "1.0.0",
44
"description": "Quickly build a backend system with vue-cli and element-ui in seconds.",
55
"main": "index.js",
66
"scripts": {
7-
"test": "yarn test"
7+
"test": "jest"
88
},
99
"repository": {
1010
"type": "git",
1111
"url": "git+https://github.com/codetrial/vue-cli-plugin-element.git"
1212
},
1313
"keywords": [
1414
"vue",
15-
"cli",
15+
"vue-cli",
16+
"vue-cli-plugin",
17+
"vue-cli-preset",
18+
"preset",
19+
"plugin",
1620
"element",
1721
"layout",
1822
"structure"

‎preset.json

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,8 @@
44
"@vue/cli-plugin-babel": {},
55
"@vue/cli-plugin-pwa": {},
66
"@vue/cli-plugin-eslint": {
7-
"config": "airbnb",
8-
"lintOn": [
9-
"save"
10-
]
7+
"config": "standard",
8+
"lintOn": ["save"]
119
},
1210
"@vue/cli-plugin-unit-jest": {}
1311
},

‎template/structure/src/App.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<div id="app">
3+
<router-view/>
4+
</div>
5+
</template>
6+
7+
<style lang="scss">
8+
</style>
9+
10+
<script>
11+
export default {
12+
name: 'App'
13+
}
14+
</script>

‎template/structure/src/api/index.js

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import { delay, checkCode } from '@/utils/request'
2+
3+
/* start of mocking user */
4+
const users = {
5+
admin: {
6+
id: 100001,
7+
name: 'Administrator',
8+
roles: ['USER', 'ADMIN']
9+
},
10+
codetrial: {
11+
id: 100001,
12+
name: 'Codetrial',
13+
roles: ['USER']
14+
}
15+
}
16+
17+
export async function getUser(username) {
18+
await delay(200)
19+
20+
const user = users[username]
21+
const response = user
22+
? {
23+
status: '1',
24+
data: user
25+
}
26+
: {
27+
status: '1100',
28+
message: 'Wrong user or password'
29+
}
30+
31+
return Promise.resolve(response).then(checkCode)
32+
}
33+
/* end of mocking user */
34+
35+
/* start of mocking example list */
36+
const exampleSource = Array(235)
37+
.fill(1)
38+
.map((element, index) => {
39+
const personal = index % 2 === 0
40+
return {
41+
id: index + 10000,
42+
name: `Example - ${index} - ${personal ? 'felixpy' : 'codetrial'}`,
43+
type: personal ? 1 : 2,
44+
status: index % 5 === 0 ? 0 : 1,
45+
url: personal ? 'https://felixpy.com' : 'https://codetrial.github.io',
46+
createUser: 100001,
47+
createUserName: 'Felix Yang',
48+
updateUser: 100001,
49+
updateUserName: 'Felix Yang',
50+
createTime: '2018年12月22日 11:00:00',
51+
updateTime: '2018年12月22日 11:00:00'
52+
}
53+
})
54+
55+
export async function getExampleList({ filter = {}, page = {} }) {
56+
const { pageNo = 1, pageSize = 20 } = page
57+
const offset = (pageNo - 1) * pageSize
58+
let list = exampleSource
59+
let total = exampleSource.length
60+
61+
// filter
62+
Object.keys(filter).forEach(key => {
63+
const filterValue = filter[key]
64+
if (filterValue != null && filterValue.length) {
65+
list = list.filter(item => {
66+
if (Array.isArray(filterValue)) {
67+
return filterValue.map(String).indexOf(String(item[key])) > -1
68+
}
69+
return String(item[key]) === String(filterValue)
70+
})
71+
}
72+
})
73+
74+
total = list.length
75+
76+
// sort
77+
list = list.sort((a, b) => {
78+
const { order, orderBy } = page
79+
80+
if (!order || !orderBy) {
81+
return
82+
}
83+
84+
const diff = (order === 'descending' ? -1 : 1) * (a[orderBy] - b[orderBy])
85+
return diff > 0 ? 1 : -1
86+
})
87+
88+
// pagination
89+
list = list.slice(offset, offset + pageSize)
90+
91+
await delay(1000)
92+
93+
return Promise.resolve({
94+
status: '1',
95+
data: {
96+
list,
97+
page: {
98+
...page,
99+
total
100+
}
101+
}
102+
}).then(checkCode)
103+
}
104+
/* end of mocking example list */

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /