npm i element-plus2.6.0 undraw-ui@1.1.5

npm install -D unplugin-vue-components

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>