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>

效果图：

 

🍬2.3、nutui(移动端)

京东出品，移动端友好，面向电商业务场景
文档地址：https://nutui.jd.com/#/guide/intro

🧀2.4、vuetify(移动端)
老牌 Vue UI ，基于谷歌的 Material Design 样式开发
文档地址：https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides

🥗2.5、varlet(移动端)
Varlet 是一个基于 Vue3 开发的 Material 风格移动端组件库，全面拥抱 Vue3 生态，由社区建立起来的组件库团队进行维护。
文档地址：https://varlet.gitee.io/varlet-ui/#/zh-CN/home

🥘2.6、tdesign-mobile-vue(移动端)
tdesign的移动端版本UI库，面向vue3
文档地址：https://tdesign.tencent.com/mobile-vue/getting-started

 

posted @ 2022-11-02 11:16  春芳芳芳  阅读(81)  评论(0)    收藏  举报