Skip to content

Commit 08df4a0

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

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>
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)