BalmUI 开源项目教程

最新推荐文章于 2024-08-16 08:20:45 发布

蒋闯中Errol

最新推荐文章于 2024-08-16 08:20:45 发布

阅读量548

点赞数 7

本文链接：https://blog.csdn.net/gitblog_00478/article/details/141235755

版权

BalmUI 开源项目教程

balm-ui:diamonds: A modular and customizable UI library based on Material Design and Vue项目地址:https://gitcode.com/gh_mirrors/ba/balm-ui

项目介绍

BalmUI 是一个基于 Material Design 和 Vue 的模块化和可定制的 UI 库。它为 Vue 3 提供了高质量的组件、插件、指令和工具，支持 Vue 2 的版本为 balm-ui@8。BalmUI 的特点包括：

企业级 UI 设计，适用于 Web 应用
高质量的 Vue 组件、插件、指令和工具
强大的主题定制功能
集成了最新的 Material Icons
所有组件和插件高度可定制，可单独使用
TypeScript 支持（正在更新中）

项目快速启动

使用 Balm CLI

创建一个项目：
```
balm init
```
安装 BalmUI：
```
npm install balm-ui
```

在项目中引入 BalmUI：

import BalmUIPlus from 'balm-ui-plus'; // BalmJS Team Material Components
import 'balm-ui-css';

const app = createApp(App);
app.use(BalmUI);
app.use(BalmUIPlus);
app.mount('#app');

使用 `<script>` 标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Hello BalmUI</title>
  <link rel="stylesheet" href="https://unpkg.com/balm-ui/dist/balm-ui.css" />
</head>
<body>
  <div id="app">
    <ui-button icon="add" @click="$alert(message)">SayHi</ui-button>
  </div>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/balm-ui"></script>
  <script src="https://unpkg.com/balm-ui/dist/balm-ui-plus.js"></script>
  <script>
    const app = Vue.createApp({
      setup() {
        var message = 'Hello BalmUI';
        return {
          message
        };
      }
    });
    app.use(BalmUI);
    app.use(BalmUIPlus);
    app.mount('#app');
  </script>
</body>
</html>