PC端+移动端UI库合集

🍳1.1、PC端UI库

🍛1.2、 element-plus(PC端)

饿了么UI库

文档地址：https://element-plus.org/zh-CN/

🍣2.1、vant-ui(移动端)

有赞团队开源移动 UI 组件库，全面支持 Vue 3，针对移动端
文档地址：https://vant-contrib.gitee.io/vant/#/zh-CN

🍤2.2、在HTML中直接使用vant,CDN依赖

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入样式文件 -->
    <link
      rel="stylesheet"
      href="https://fastly.jsdelivr.net/npm/vant@3/lib/index.css"
    />
  </head>
  <body>
    <div id="app">
      <van-button @click="showInfo">按钮</van-button>
    </div>
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
    <script src="https://fastly.jsdelivr.net/npm/vant@3/lib/vant.min.js"></script>

    <script>
      // 在 #app 标签下渲染一个按钮组件
      const app = Vue.createApp({
        setup() {
          function showInfo() {
            vant.Toast("提示");
          }
          return { showInfo };
        },
      });
      app.use(vant);

      // 通过 CDN 引入时不会自动注册 Lazyload 组件
      // 可以通过下面的方式手动注册
      app.use(vant.Lazyload);

      app.mount("#app");
    </script>
  </body>
</html>