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