Skip to content

Commit 43b6361

Browse files
buqiyuanbuqiyuan
committed
feat: add animate components
1 parent 9f77b49 commit 43b6361

File tree

30 files changed

+1205
-355
lines changed

30 files changed

+1205
-355
lines changed

‎README.zh-CN.md ‎README.EN.md

+48-54
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,45 @@
1-
# 基于 Vite2.x + Vue3.x + TypeScript H5 低代码平台
1+
# base on Vite2.x + Vue3.x + TypeScript H5 Low code platform
22

33
[![license](https://img.shields.io/github/license/buqiyuan/vite-vue3-lowcode.svg)](LICENSE)
44

5-
**中文** | [English](./README.md)
5+
**English** | [中文](./README.md)
66

7-
## 克隆主分支，忽略 git-pages 等无关分支
7+
## Clone the main branch and ignore irrelevant branches such as git-pages
88

99
```shell
1010
git clone --single-branch https://github.com/buqiyuan/vite-vue3-lowcode.git
1111
# or
1212
git clone --single-branch https://gitee.com/buqiyuan/vite-vue3-lowcode.git
1313
```
1414

15-
## 技术栈
16-
17-
- 编程语言：[TypeScript 4.x](https://www.typescriptlang.org/zh/) + [JavaScript](https://www.javascript.com/)
18-
- 构建工具：[Vite 2.x](https://cn.vitejs.dev/)
19-
- 前端框架：[Vue 3.x](https://v3.cn.vuejs.org/)
20-
- 路由工具：[Vue Router 4.x](https://next.router.vuejs.org/zh/index.html)
21-
- 状态管理：[Vuex 4.x](https://next.vuex.vuejs.org/)
22-
- PC 端 UI 框架：[Element Plus](https://element-plus.org/#/zh-CN)
23-
- H5 端 UI 框架：[vant](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/)
24-
- CSS 预编译：[Stylus](https://stylus-lang.com/) / [Sass](https://sass.bootcss.com/documentation) / [Less](http://lesscss.cn/)
25-
- HTTP 工具：[Axios](https://axios-http.com/)
15+
## technology stack
16+
17+
- Programming Language：[TypeScript 4.x](https://www.typescriptlang.org/zh/) + [JavaScript](https://www.javascript.com/)
18+
- Build Tools：[Vite 2.x](https://cn.vitejs.dev/)
19+
- Front End Frame：[Vue 3.x](https://v3.cn.vuejs.org/)
20+
- Subnet Calculator：[Vue Router 4.x](https://next.router.vuejs.org/zh/index.html)
21+
- State Management：[Vuex 4.x](https://next.vuex.vuejs.org/)
22+
- PC UI Frame：[Element Plus](https://element-plus.org/#/zh-CN)
23+
- H5 UI Frame：[vant](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/)
24+
- CSS Pre：[Stylus](https://stylus-lang.com/) / [Sass](https://sass.bootcss.com/documentation) / [Less](http://lesscss.cn/)
25+
- HTTP Tool：[Axios](https://axios-http.com/)
2626
- Git Hook 工具：[husky](https://typicode.github.io/husky/#/) + [lint-staged](https://github.com/okonet/lint-staged)
27-
- 代码规范：[EditorConfig](http://editorconfig.org) + [Prettier](https://prettier.io/) + [ESLint](https://eslint.org/) + [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#translation)
28-
- 提交规范：[Commitizen](http://commitizen.github.io/cz-cli/) + [Commitlint](https://commitlint.js.org/#/)
29-
- 单元测试：[vue-test-utils](https://next.vue-test-utils.vuejs.org/) + [jest](https://jestjs.io/) + [vue-jest](https://github.com/vuejs/vue-jest) + [ts-jest](https://kulshekhar.github.io/ts-jest/)
30-
- 自动部署：[GitHub Actions](https://docs.github.com/cn/actions/learn-github-actions)
27+
- Coding Standards：[EditorConfig](http://editorconfig.org) + [Prettier](https://prettier.io/) + [ESLint](https://eslint.org/) + [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#translation)
28+
- Submit Specifications：[Commitizen](http://commitizen.github.io/cz-cli/) + [Commitlint](https://commitlint.js.org/#/)
29+
- Unit Testing：[vue-test-utils](https://next.vue-test-utils.vuejs.org/) + [jest](https://jestjs.io/) + [vue-jest](https://github.com/vuejs/vue-jest) + [ts-jest](https://kulshekhar.github.io/ts-jest/)
30+
- Auto Deploy：[GitHub Actions](https://docs.github.com/cn/actions/learn-github-actions)
3131

32-
### 功能清单
32+
### Function List
3333

34-
- [x] 动态添加页面
35-
- [x] 拖拽式生成组件
36-
- [ ] service worker + indexeddb 实现无服务端的前端交互
37-
- [ ] 数据源管理
38-
- [ ] 提供预置函数
39-
- [ ] 更多组件的封装
40-
- [ ] 其他...
34+
- [x] Add pages dynamically
35+
- [x] Drag and drop components
36+
- [ ] service worker + indexeddb Implement server-free front-end interaction
37+
- [ ] DataSource Admin Console
38+
- [ ] Provide preset functions
39+
- [ ] More component encapsulation
40+
- [ ] Others...
4141

42-
### 简易说明
43-
44-
目前在使用表单时，需要把相关的`表单控件`放到`表单容器`内部，并且需要将`按钮`放到`表单容器`内，
45-
然后再讲`按钮的type`设置为`表单提交按钮`这时候点击提交按钮才会自动收集表单容器内部的所有字段和值
46-
47-
### 快速生成组件属性
42+
### Generate component properties quickly
4843

4944
```javascript
5045
// 在vant文档中 chrome控制台输入以下代码，快速生成组件属性
@@ -65,50 +60,49 @@ $$('#props + table tr').reduce((prev, curr) => {
6560
}, {})
6661
```
6762
68-
## 浏览器支持
63+
## Browser support
6964
70-
本地开发推荐使用`Chrome 80+` 浏览器
65+
The `Chrome 80+` browser is recommended for local development
7166
72-
支持现代浏览器, 不支持 IE
67+
Support modern browsers, not IE
7368
7469
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
7570
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
7671
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
7772
78-
### 提交规范
73+
### Git Contribution submission specification
7974
80-
- `feat` 增加新功能
81-
- `fix` 修复问题/BUG
82-
- `style` 代码风格相关无影响运行结果的
83-
- `perf` 优化/性能提升
84-
- `refactor` 重构
85-
- `revert` 撤销修改
86-
- `test` 测试相关
87-
- `docs` 文档/注释
88-
- `build` 对构建系统或者外部依赖项进行了修改
89-
- `chore` 依赖更新/脚手架配置修改等
90-
- `workflow` 工作流改进
91-
- `ci` 持续集成
92-
- `types` 类型定义文件更改
93-
- `wip` 开发中
75+
- `feat` Add new features
76+
- `fix` Fix the problem/BUG
77+
- `style` The code style is related and does not affect the running result
78+
- `perf` Optimization/performance improvement
79+
- `refactor` Refactor
80+
- `revert` Undo edit
81+
- `test` Test related
82+
- `docs` Documentation/notes
83+
- `chore` Dependency update/scaffolding configuration modification etc.
84+
- `workflow` Workflow improvements
85+
- `ci` Continuous integration
86+
- `types` Type definition file changes
87+
- `wip` In development
9488
95-
## 快速开始
89+
## QUICK START
9690
97-
### 安装依赖
91+
### Install and use
9892
9993
```sh
10094
npm install
10195
# or
10296
yarn add
10397
```
10498
105-
### 启动项目
99+
### run
106100
107101
```sh
108102
npm run dev
109103
```
110104
111-
### 项目打包
105+
### build
112106
113107
```sh
114108
npm run build

‎README.md

+54-48
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,50 @@
1-
# base on Vite2.x + Vue3.x + TypeScript H5 Low code platform
1+
# 基于 Vite2.x + Vue3.x + TypeScript H5 低代码平台
22

33
[![license](https://img.shields.io/github/license/buqiyuan/vite-vue3-lowcode.svg)](LICENSE)
44

5-
**English** | [中文](./README.zh-CN.md)
5+
**中文** | [English](./README.EN.md)
66

7-
## Clone the main branch and ignore irrelevant branches such as git-pages
7+
## 克隆主分支，忽略 git-pages 等无关分支
88

99
```shell
1010
git clone --single-branch https://github.com/buqiyuan/vite-vue3-lowcode.git
1111
# or
1212
git clone --single-branch https://gitee.com/buqiyuan/vite-vue3-lowcode.git
1313
```
1414

15-
## technology stack
16-
17-
- Programming Language：[TypeScript 4.x](https://www.typescriptlang.org/zh/) + [JavaScript](https://www.javascript.com/)
18-
- Build Tools：[Vite 2.x](https://cn.vitejs.dev/)
19-
- Front End Frame：[Vue 3.x](https://v3.cn.vuejs.org/)
20-
- Subnet Calculator：[Vue Router 4.x](https://next.router.vuejs.org/zh/index.html)
21-
- State Management：[Vuex 4.x](https://next.vuex.vuejs.org/)
22-
- PC UI Frame：[Element Plus](https://element-plus.org/#/zh-CN)
23-
- H5 UI Frame：[vant](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/)
24-
- CSS Pre：[Stylus](https://stylus-lang.com/) / [Sass](https://sass.bootcss.com/documentation) / [Less](http://lesscss.cn/)
25-
- HTTP Tool：[Axios](https://axios-http.com/)
15+
## 技术栈
16+
17+
- 编程语言：[TypeScript 4.x](https://www.typescriptlang.org/zh/) + [JavaScript](https://www.javascript.com/)
18+
- 构建工具：[Vite 2.x](https://cn.vitejs.dev/)
19+
- 前端框架：[Vue 3.x](https://v3.cn.vuejs.org/)
20+
- 路由工具：[Vue Router 4.x](https://next.router.vuejs.org/zh/index.html)
21+
- 状态管理：[Vuex 4.x](https://next.vuex.vuejs.org/)
22+
- PC 端 UI 框架：[Element Plus](https://element-plus.org/#/zh-CN)
23+
- H5 端 UI 框架：[vant](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/)
24+
- CSS 预编译：[Stylus](https://stylus-lang.com/) / [Sass](https://sass.bootcss.com/documentation) / [Less](http://lesscss.cn/)
25+
- HTTP 工具：[Axios](https://axios-http.com/)
2626
- Git Hook 工具：[husky](https://typicode.github.io/husky/#/) + [lint-staged](https://github.com/okonet/lint-staged)
27-
- Coding Standards：[EditorConfig](http://editorconfig.org) + [Prettier](https://prettier.io/) + [ESLint](https://eslint.org/) + [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#translation)
28-
- Submit Specifications：[Commitizen](http://commitizen.github.io/cz-cli/) + [Commitlint](https://commitlint.js.org/#/)
29-
- Unit Testing：[vue-test-utils](https://next.vue-test-utils.vuejs.org/) + [jest](https://jestjs.io/) + [vue-jest](https://github.com/vuejs/vue-jest) + [ts-jest](https://kulshekhar.github.io/ts-jest/)
30-
- Auto Deploy：[GitHub Actions](https://docs.github.com/cn/actions/learn-github-actions)
27+
- 代码规范：[EditorConfig](http://editorconfig.org) + [Prettier](https://prettier.io/) + [ESLint](https://eslint.org/) + [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#translation)
28+
- 提交规范：[Commitizen](http://commitizen.github.io/cz-cli/) + [Commitlint](https://commitlint.js.org/#/)
29+
- 单元测试：[vue-test-utils](https://next.vue-test-utils.vuejs.org/) + [jest](https://jestjs.io/) + [vue-jest](https://github.com/vuejs/vue-jest) + [ts-jest](https://kulshekhar.github.io/ts-jest/)
30+
- 自动部署：[GitHub Actions](https://docs.github.com/cn/actions/learn-github-actions)
3131

32-
### Function List
32+
### 功能清单
3333

34-
- [x] Add pages dynamically
35-
- [x] Drag and drop components
36-
- [ ] service worker + indexeddb Implement server-free front-end interaction
37-
- [ ] DataSource Admin Console
38-
- [ ] Provide preset functions
39-
- [ ] More component encapsulation
40-
- [ ] Others...
34+
- [x] 动态添加页面
35+
- [x] 拖拽式生成组件
36+
- [ ] service worker + indexeddb 实现无服务端的前端交互
37+
- [ ] 数据源管理
38+
- [ ] 提供预置函数
39+
- [ ] 更多组件的封装
40+
- [ ] 其他...
4141

42-
### Generate component properties quickly
42+
### 简易说明
43+
44+
目前在使用表单时，需要把相关的`表单控件`放到`表单容器`内部，并且需要将`按钮`放到`表单容器`内，
45+
然后再讲`按钮的type`设置为`表单提交按钮`这时候点击提交按钮才会自动收集表单容器内部的所有字段和值
46+
47+
### 快速生成组件属性
4348

4449
```javascript
4550
// 在vant文档中 chrome控制台输入以下代码，快速生成组件属性
@@ -60,49 +65,50 @@ $$('#props + table tr').reduce((prev, curr) => {
6065
}, {})
6166
```
6267
63-
## Browser support
68+
## 浏览器支持
6469
65-
The `Chrome 80+` browser is recommended for local development
70+
本地开发推荐使用`Chrome 80+` 浏览器
6671
67-
Support modern browsers, not IE
72+
支持现代浏览器, 不支持 IE
6873
6974
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
7075
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
7176
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
7277
73-
### Git Contribution submission specification
78+
### 提交规范
7479
75-
- `feat` Add new features
76-
- `fix` Fix the problem/BUG
77-
- `style` The code style is related and does not affect the running result
78-
- `perf` Optimization/performance improvement
79-
- `refactor` Refactor
80-
- `revert` Undo edit
81-
- `test` Test related
82-
- `docs` Documentation/notes
83-
- `chore` Dependency update/scaffolding configuration modification etc.
84-
- `workflow` Workflow improvements
85-
- `ci` Continuous integration
86-
- `types` Type definition file changes
87-
- `wip` In development
80+
- `feat` 增加新功能
81+
- `fix` 修复问题/BUG
82+
- `style` 代码风格相关无影响运行结果的
83+
- `perf` 优化/性能提升
84+
- `refactor` 重构
85+
- `revert` 撤销修改
86+
- `test` 测试相关
87+
- `docs` 文档/注释
88+
- `build` 对构建系统或者外部依赖项进行了修改
89+
- `chore` 依赖更新/脚手架配置修改等
90+
- `workflow` 工作流改进
91+
- `ci` 持续集成
92+
- `types` 类型定义文件更改
93+
- `wip` 开发中
8894
89-
## QUICK START
95+
## 快速开始
9096
91-
### Install and use
97+
### 安装依赖
9298
9399
```sh
94100
npm install
95101
# or
96102
yarn add
97103
```
98104
99-
### run
105+
### 启动项目
100106
101107
```sh
102108
npm run dev
103109
```
104110
105-
### build
111+
### 项目打包
106112
107113
```sh
108114
npm run build

‎package.json

+8-7
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,20 @@
2323
"@vant/touch-emulator": "^1.3.0",
2424
"@vueuse/core": "^5.0.2",
2525
"@vueuse/integrations": "^5.0.2",
26+
"animate.css": "^4.1.1",
2627
"axios": "^0.21.1",
2728
"dayjs": "^1.10.5",
2829
"dexie": "^3.0.3",
29-
"element-plus": "^1.0.2-beta.46",
30+
"element-plus": "^1.0.2-beta.48",
3031
"lodash": "^4.17.21",
31-
"monaco-editor": "^0.24.0",
32+
"monaco-editor": "^0.25.0",
3233
"normalize.css": "^8.0.1",
3334
"nprogress": "^1.0.0-1",
3435
"qrcode": "^1.4.4",
3536
"vant": "^3.0.18",
36-
"vue": "3.0.11",
37+
"vue": "3.1.1",
3738
"vue-router": "^4.0.8",
38-
"vuedraggable": "^4.0.1",
39+
"vuedraggable": "^4.0.3",
3940
"vuex": "^4.0.1"
4041
},
4142
"devDependencies": {
@@ -47,15 +48,15 @@
4748
"@vitejs/plugin-legacy": "^1.4.1",
4849
"@vitejs/plugin-vue": "^1.2.3",
4950
"@vitejs/plugin-vue-jsx": "^1.1.5",
50-
"@vue/compiler-sfc": "3.0.11",
51+
"@vue/compiler-sfc": "3.1.1",
5152
"commitizen": "^4.2.4",
5253
"cz-conventional-changelog": "^3.3.0",
5354
"cz-customizable": "^6.3.0",
5455
"eslint": "^7.28.0",
5556
"eslint-config-prettier": "^8.3.0",
5657
"eslint-plugin-import": "^2.23.4",
5758
"eslint-plugin-prettier": "^3.4.0",
58-
"eslint-plugin-vue": "^7.10.0",
59+
"eslint-plugin-vue": "^7.11.0",
5960
"gh-pages": "^3.2.0",
6061
"husky": "^6.0.0",
6162
"lint-staged": "^11.0.0",
@@ -68,7 +69,7 @@
6869
"stylelint-order": "^4.1.0",
6970
"typescript": "^4.3.2",
7071
"vite": "2.3.7",
71-
"vite-plugin-components": "^0.10.4",
72+
"vite-plugin-components": "^0.11.1",
7273
"vite-plugin-style-import": "^0.10.1",
7374
"vite-plugin-windicss": "^1.0.3",
7475
"vue-eslint-parser": "^7.6.0",

‎preview/main.ts

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import router from './router'
55

66
import { setupVant } from '@/plugins/vant'
77

8+
import 'animate.css'
9+
810
const app = createApp(App)
911

1012
// 安装vant插件

0 commit comments

Comments
 (0)