Skip to content

Commit e5d2ab3

Browse files
committed
fix: 将LICENSE和README.md文件移到根目录
1 parent 96e1d15 commit e5d2ab3

File tree

2 files changed

+195
-0
lines changed

2 files changed

+195
-0
lines changed

LICENSE

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
MIT License
2+
3+
Copyright (c) 2019 - present DevUI.
4+
Copyright (c) 2019 - present Huawei Technologies Co., Ltd.
5+
6+
Permission is hereby granted, free of charge, to any person obtaining a copy
7+
of this software and associated documentation files (the "Software"), to deal
8+
in the Software without restriction, including without limitation the rights
9+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
copies of the Software, and to permit persons to whom the Software is
11+
furnished to do so, subject to the following conditions:
12+
13+
The above copyright notice and this permission notice shall be included in all
14+
copies or substantial portions of the Software.
15+
16+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
SOFTWARE.
23+

README.md

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<p align="center">
2+
<a href="https://devui.design/home" target="_blank" rel="noopener noreferrer">
3+
<img alt="DevUI Logo" src="public/logo.svg?sanitize=true" width="180" style="max-width:100%;">
4+
</a>
5+
</p>
6+
7+
Vue DevUI 是 Vue3 版本的 DevUI 组件库,基于 [https://github.com/devcloudfe/ng-devui](https://github.com/devcloudfe/ng-devui),倡导`沉浸``灵活``至简`的设计价值观。
8+
9+
DevUI 官方网站:[https://devui.design](https://devui.design)
10+
11+
# 当前状态: Beta
12+
13+
该项目还处于孵化和演进阶段,欢迎大家参与到 Vue DevUI 项目的建设中来!🎉🎉
14+
15+
通过参与 Vue DevUI 项目,你可以:
16+
- 🔥 学习最新的 `Vite`+`Vue3`+`TypeScript`+`JSX` 技术
17+
- 🎁 学习如何设计和开发组件
18+
- ⭐ 参与到开源社区中来
19+
- 🎊 结识一群热爱学习、热爱开源的朋友
20+
21+
[贡献指南](https://gitee.com/devui/vue-devui/wikis/【必看】快速开始)
22+
23+
# 快速开始
24+
25+
## 1 安装依赖
26+
27+
```
28+
yarn(推荐)
29+
30+
or
31+
32+
npm i
33+
```
34+
35+
## 2 启动
36+
37+
```
38+
yarn dev(推荐)
39+
40+
or
41+
42+
npm run dev
43+
```
44+
45+
## 3 访问
46+
47+
[http://localhost:3000/](http://localhost:3000/)
48+
49+
## 4 生产打包
50+
51+
```
52+
yarn build(推荐)
53+
54+
or
55+
56+
npm run build
57+
```
58+
59+
# 使用 Vue DevUI
60+
61+
## 1. 安装
62+
63+
```
64+
yarn add vue-devui
65+
```
66+
67+
## 2. 全量引入
68+
69+
```
70+
import { createApp } from 'vue'
71+
import App from './App.vue'
72+
73+
// Step 1: 引入 Vue DevUI 组件库
74+
import DevUI from 'vue-devui'
75+
// Step 2: 引入组件库样式
76+
import 'vue-devui/style.css'
77+
78+
createApp(App)
79+
.use(DevUI) // Step 3: 使用 Vue DevUI
80+
.mount('#app')
81+
```
82+
83+
## 3. 按需引入
84+
85+
除了全量引入,我们也支持单个组件按需引入。
86+
87+
```
88+
import { createApp } from 'vue'
89+
import App from './App.vue'
90+
91+
// Step 1: 引入单个组件
92+
import { Button } from 'vue-devui'
93+
// or import Button from 'vue-devui/button'
94+
// Step 2: 引入组件样式
95+
import 'vue-devui/button/style.css'
96+
97+
createApp(App)
98+
.use(Button) // Step 3: 使用组件
99+
.mount('#app')
100+
```
101+
102+
## 4. 使用
103+
104+
```
105+
<template>
106+
<d-button>确定</d-button>
107+
</template>
108+
```
109+
110+
# 图标库
111+
112+
图标库可以使用[DevUI图标库](https://devui.design/icon/ruleResource),也可以使用第三方图标库,比如:iconfont。
113+
114+
## 使用DevUI图标库
115+
116+
### 安装
117+
118+
```
119+
yarn add @devui-design/icons(推荐)
120+
121+
or
122+
123+
npm i @devui-design/icons
124+
```
125+
126+
### 引入
127+
128+
`main.ts`文件中,编写以下代码:
129+
130+
```
131+
import '@devui-design/icons/icomoon/devui-icon.css'
132+
```
133+
134+
### 使用
135+
136+
```
137+
<d-icon name="love" color="red"></d-icon>
138+
```
139+
140+
## 使用第三方图标库
141+
142+
如果有第三方图标库,可以用类似的方式引入。
143+
144+
### 引入
145+
146+
`main.ts`文件中,编写以下代码:
147+
148+
```
149+
import 'your-folder/my-icon.css'
150+
```
151+
152+
### 使用
153+
154+
```
155+
<d-icon classPrefix="my-icon" name="love" color="red"></d-icon>
156+
```
157+
158+
其中的`classPrefix`参数的值,应该和你的字体图标样式文件`my-icon.css`里定义的样式前缀保持一致。
159+
160+
比如`my-icon.css`里的图标样式:
161+
162+
```css
163+
.my-icon-branch-node:before {
164+
content: "\E001";
165+
}
166+
```
167+
168+
那么`classPrefix`就是`my-icon`
169+
170+
# License
171+
172+
[MIT](https://gitee.com/devui/vue-devui/blob/dev/LICENSE)

0 commit comments

Comments
 (0)