Skip to content

Commit c1985f9

Browse files
felixpyfelixpy
committed
docs: update README.md
1 parent 2050178 commit c1985f9

File tree

4 files changed

+188
-3
lines changed

4 files changed

+188
-3
lines changed

‎README.md‎

Lines changed: 82 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,84 @@
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+
## Core Features
61+
62+
- :camera: Minimal dependencies
63+
- :tv: Project Structure
64+
- :telephone_receiver: View Layout
65+
- :pager: Data Processing Layer
66+
- :watch: Authorization
67+
- :radio: Error Pages
68+
- :mag_right: List Example
69+
- :ghost: Form Example
70+
71+
## Contributing
72+
73+
Looking forward to your pull requests.
74+
75+
## Built With
76+
77+
- [Vue.js](https://github.com/vuejs/vue)
78+
- [ElementUI](https://github.com/ElemeFE/element)
79+
80+
## License
81+
82+
[MIT](http://opensource.org/licenses/MIT)
83+
84+
Copyright (c) 2018 - present, Felix Yang

‎README.zh-CN.md‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
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+
## 核心功能
61+
62+
:camera: **最小依赖**：仅依赖 Vue 官方库及 ElementUI 组件库，未额外引入其它第三方库，为你提供自由发挥的空间。
63+
64+
:tv: **目录结构**：根据项目实战经验，设计了合理、清晰的目录结构。
65+
66+
:telephone_receiver: **页面布局**：使用 Vue Router 嵌套路由及 ElementUI 内置组件进行布局。
67+
68+
:pager: **数据处理**：添加独立的 api 及 service 层，将业务逻辑从组件中抽离。
69+
70+
:watch: **权限控制**：为路由添加配置式拦截器，默认支持用户登录鉴权及角色鉴权。
71+
72+
:radio: **列表示例**：一个相对比较完整的列表页示例，包含字段查询（过滤），字段排序，页码跳转，批量操作等等。
73+
74+
:mag_right: **表单示例**：一个相对比较完整的表单页示例，包含表单校验、提交等操作。
75+
76+
:ghost: **错误页面**：内置简单的（其实是偷懒） 403、404 及 500 错误页。
77+
78+
## 贡献
79+
80+
期待你的 `pull requests`。如果你觉得有帮助，还请多多反馈！
81+
82+
## 技术栈
83+
84+
- [Vue.js](https://github.com/vuejs/vue)
85+
- [ElementUI](https://github.com/ElemeFE/element)
86+
87+
## 许可
88+
89+
[MIT](http://opensource.org/licenses/MIT)
90+
91+
Copyright (c) 2018 - present, Felix Yang

‎package.json‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
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": {
@@ -12,7 +12,11 @@
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"

‎template/structure/tests/unit/example.spec.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { shallowMount } from '@vue/test-utils'
2+
import AppFooter from '@/components/layout/AppFooter.vue'
3+
4+
describe('AppFooter.vue', () => {
5+
it('render app footer', () => {
6+
const wrapper = shallowMount(AppFooter, {})
7+
expect(wrapper.text()).toMatch('Copyright')
8+
})
9+
})

0 commit comments

Comments
 (0)