代码拉取完成,页面将自动刷新
Undraw UI - A Vue.js 3 UI library
折叠、评论、锚点、搜索
暗黑主题
请遵循https://readpage.github.io/undraw-ui/上的文档!
使用npm
安装
element-plus可以选择需要版本
npm i element-plus2.6.0 undraw-ui@1.1.5
您需要使用额外的插件来导入要使用的组件。
首先你需要安装 unplugin-vue-components 两款插件。
npm install -D unplugin-vue-components
然后修改 vite.config.ts 或 vue.config.js 的配置。
import Components from 'unplugin-vue-components/vite'
import { UndrawUiResolver } from 'undraw-ui/es/resolvers'
export default {
plugins: [
Components({
resolvers: [UndrawUiResolver]
}),
],
}
如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便。
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import UndrawUi from 'undraw-ui'
import 'undraw-ui/dist/style.css'
const app = createApp(App)
app.use(ElementPlus)
app.use(UndrawUi)
app.mount('#app')
<template>
<div style="width: 200px;">
<u-fold line="1">
<p>每当白日依山尽,夕阳余辉便透过朵朵云层,像万道金光,如霞光万丈,把天空白云染得红彤彤,把大地山河映得金灿灿,仿佛整个世界在那一瞬间都变得金碧辉煌,热情奔放起来</p>
</u-fold>
<u-divider />
<u-fold line="2">
孩子或者像孩子一样单纯的人,目的意识淡薄,沉浸在过程中,过程和目的浑然不分,他们能够随遇而安,即事起兴,不易感到无聊。商人或者像商人一样精明的人,有非常明确实际的目的,以此指导行动,规划过程,目的与过程丝丝相扣,他们能够聚精会神,分秒必争,也不易感到无聊。怕就怕既失去了孩子的单纯,又不肯学商人的精明,目的意识强烈却并无明确实际的目的,有所追求但所求不是太缥缈就是太模糊。
</u-fold>
<!-- 使用属性 unfold 启动展开和折叠功能 -->
<u-fold unfold line="1">
<p>
时间不是某种从我们身上流过的东西,而就是我的生命。弃我而去的不是日历上的一个个日子,而是我生命中的岁月;甚至也不仅仅是我的岁月,而就是我自己。我不但找不回逝去的岁月,而且也找不回从前的我了。
</p>
</u-fold>
</div>
</template>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型