使用 BeerCSS 与 Svelte 快速开发应用

使用 BeerCSS 与 Svelte 快速开发 Material Design 应用

一、项目搭建与基础配置

1. 创建 Svelte 项目

通过以下命令初始化 Vite + Svelte 项目：

npm create vite@latest beercss-svelte-demo --template svelte
cd beercss-svelte-demo
npm install

2. 集成 Beer CSS

在 index.html 中引入 Beer CSS 的 CDN 资源：

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/beercss@latest/dist/beercss.min.css">
</head>

二、基础组件开发示例

示例 1：Material Design 风格按钮

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment} class="filled primary">
  点击次数：{count}
</button>

技术要点：

使用 filled 类实现填充效果
primary 类定义主色调
Svelte 响应式变量自动更新 UI

示例 2：动态主题切换

<script>
  import { writable } from 'svelte/store';
  const theme = writable('light');

  function toggleTheme() {
    theme.update(t => (t === 'light' ? 'dark' : 'light'));
  }
</script>

<body class={$theme}>
  <button on:click={toggleTheme} class="outlined">
    切换主题（当前：{$theme}）
  </button>
</body>

实现原理：

通过 Svelte Store 管理全局主题状态
Beer CSS 的 dark/light 类控制配色方案

示例 3：表单输入组件

<script>
  let name = '';
</script>

<div class="field">
  <label>用户名</label>
  <input type="text" bind:value={name} class="round">
  <small>输入内容：{name}</small>
</div>

功能说明：

field 类实现 Material 输入框布局
round 类添加圆角边框
bind:value 实现双向数据绑定

三、综合应用：待办清单

<script>
  import { writable } from 'svelte/store';
  let newTodo = '';
  const todos = writable([]);

  function addTodo() {
    if (newTodo.trim()) {
      todos.update(t => [...t, { text: newTodo, done: false }]);
      newTodo = '';
    }
  }
</script>

<div class="responsive-grid">
  <div class="card">
    <input type="text" bind:value={newTodo} placeholder="添加待办" class="border">
    <button on:click={addTodo} class="filled secondary">添加</button>
  </div>

  {#each $todos as todo, index}
    <div class="card">
      <label>
        <input type="checkbox" bind:checked={todo.done}>
        <span class:done={todo.done}>{todo.text}</span>
      </label>
    </div>
  {/each}
</div>

<style>
  .done { text-decoration: line-through; }
</style>

核心功能：

使用 responsive-grid 实现响应式布局
card 类创建 Material 卡片效果
Svelte 的 {#each} 实现列表渲染

四、进阶开发技巧

1. 自定义主题样式

在全局 CSS 中覆盖变量：

:root {
  --primary-color: #2196F3;
  --card-padding: 1.5rem;
}

2. 集成交互动画

{#if visible}
  <div transition:fly={{ y: 50 }} class="modal">
    动态弹窗内容
  </div>
{/if}

五、常见问题排查

样式不生效
- 检查 Beer CSS 的 CDN 是否正确加载
- 确认没有其他 CSS 框架冲突

移动端适配问题

添加 viewport meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

参考文献

转载请注明出处。