# vmd

**Repository Path**: neo5simple/vmd

## Basic Information

- **Project Name**: vmd
- **Description**: start new Vue+MDUI
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-08
- **Last Updated**: 2025-11-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VMD

Vue + MDUI 起手式

## 项目配置

依赖环境

- [Node.js][node]：JavaScript 运行时引擎，建议 v22+ 版本

建议使用

- [NVM][nvm]：Node 版本管理器
- [Visual Studio Code][code]：代码编辑器

安装项目依赖库

```sh
npm i
```

### 编译并开始调试

```sh
npm run dev
```

### 构建生产版本

```sh
npm run build
```

## 开发文档

- [Vue.js][vue]：Web 前端用户界面框架
- [MDUI][mdui]：遵循 Material Design 3 的组件库

## 实践指南

基于 `vite.config.js` 配置

### 依赖空间可视化

```js
plugins: [visualizer()];
```

编译后会在跟目录下生成可视化文件 `stat.html`

### 代码分块

例如基于模块名称分块

```js
rollupOptions: {
  output: {
    manualChunks(id) {
      if (id.includes("node_modules")) {
        return id
          .toString()
          .split("node_modules/")[1]
          .split("/")[0]
          .toString();
      }
    },
  },
},
```

### 代码压缩

需确保服务器提供了压缩服务，例如 Nginx

```conf
gzip on;
gzip_static on;
```

压缩配置

```js
plugins: [
  compression({
    verbose: true,
    disable: false,
    threshold: 32 * 1024,
    algorithm: "gzip",
    ext: "gz",
  }),
];
```

### 依赖更新

```sh
npm i -g npm-check-updates
ncu -u
npm i
```

### 清理多余的依赖

```sh
npm prune
```

## UI 原则

### 颜色

默认使用蓝色作为主题色，设置颜色的同时，生成特殊的红、绿、蓝和黄色

```js
const rgb = "#00F";

setColorScheme(rgb, {
  customColors: [
    {
      name: "red",
      value: "#800",
    },
    {
      name: "green",
      value: "#080",
    },
    {
      name: "blue",
      value: "#008",
    },
    {
      name: "yellow",
      value: "#760",
    },
  ],
});
```

示例类颜色

```css
.red-text {
  color: rgb(var(--mdui-color-red));
}

.green-text {
  color: rgb(var(--mdui-color-green));
}

.blue-text {
  color: rgb(var(--mdui-color-blue));
}

.yellow-text {
  color: rgb(var(--mdui-color-yellow));
}

.red-button {
  color: rgb(var(--mdui-color-on-red));
  background-color: rgb(var(--mdui-color-red));
}

.green-button {
  color: rgb(var(--mdui-color-on-green));
  background-color: rgb(var(--mdui-color-green));
}

.blue-button {
  color: rgb(var(--mdui-color-on-blue));
  background-color: rgb(var(--mdui-color-blue));
}

.yellow-button {
  color: rgb(var(--mdui-color-on-yellow));
  background-color: rgb(var(--mdui-color-yellow));
}

.red-chip {
  color: rgb(var(--mdui-color-on-red-container));
  background-color: rgb(var(--mdui-color-red-container));
}

.green-chip {
  color: rgb(var(--mdui-color-on-green-container));
  background-color: rgb(var(--mdui-color-green-container));
}

.blue-chip {
  color: rgb(var(--mdui-color-on-blue-container));
  background-color: rgb(var(--mdui-color-blue-container));
}

.yellow-chip {
  color: rgb(var(--mdui-color-on-yellow-container));
  background-color: rgb(var(--mdui-color-yellow-container));
}
```

设计图颜色对应关系

- 默认文本：`rgb(var(--mdui-color-on-surface))`
- 默认浅色文本：`rgb(var(--mdui-color-on-surface-variant))`
- 默认蓝色文本：`rgb(var(--mdui-color-primary))`
- 默认背景：`rgb(var(--mdui-color-background))`
- 默认选中背景：`rgb(var(--mdui-color-secondary-container))`
- 默认错误文本：`rgb(var(--mdui-color-error))`

未匹配的颜色使用方法

```html
<div class="red-text">Red text</div>
<div class="green-text">Green text</div>
<div class="blue-text">Blue text</div>
<div class="yellow-text">Yellow text</div>

<mdui-chip class="red-chip" elevated>Red chip</mdui-chip>
<mdui-chip class="green-chip" elevated>Green chip</mdui-chip>
<mdui-chip class="blue-chip" elevated>Blue chip</mdui-chip>
<mdui-chip class="yellow-chip" elevated>Yellow chip</mdui-chip>

<mdui-button class="red-button">Red Button</mdui-button>
<mdui-button class="green-button">Green Button</mdui-button>
<mdui-button class="blue-button">Blue Button</mdui-button>
<mdui-button class="yellow-button">Yellow Button</mdui-button>
```

### 圆角

统一使用两种

- 大：`--mdui-shape-corner-large`
- 小：`--mdui-shape-corner-medium`

### 排版

使用内置样式名称和默认富文本排版：

- 在最外层标签添加 `mdui-prose` 类型
- 正确使用样式名称

推荐页面布局

- 大标题：display-small (36px, 2.25rem)
- 小标题：headline-small (24px, 2rem)
- 正文标题：title-large (22px, 1.375rem)
- 正文粗体：title-medium (16px, 1rem)
- 正文：body-large (16px)
- 正文灰字：body-medium (14px, 0.875rem)
- 标签：label-large (14px)

富文本样式

- H1：40/45
- H2: 30/40
- H3: 24/38
- H4: 20/30
- p: 16/28

例如为 `foo` 类型设置 **普通正文** 的样式，替换 `{name}` 为 `body-small` 即可

```css
.foo {
  line-height: var(--mdui-typescale-{name}-line-height);
  font-size: var(--mdui-typescale-{name}-size);
  letter-spacing: var(--mdui-typescale-{name}-tracking);
  font-weight: var(--mdui-typescale-{name}-weight);
}
```

示例

```html
<div class="text-body">Normal Content</div>

<div class="mdui-prose">
  <h3>班级名单</h3>
  <p></p>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>班级</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>20240001</td>
        <td>张三</td>
        <td>男</td>
        <td>18</td>
        <td>高一(1)班</td>
      </tr>
    </tbody>
  </table>
</div>
```

示例字体类

```css
.text-display {
  line-height: var(--mdui-typescale-display-small-line-height);
  font-size: var(--mdui-typescale-display-small-size);
  letter-spacing: var(--mdui-typescale-display-small-tracking);
  font-weight: var(--mdui-typescale-display-small-weight);
}

.text-headline {
  line-height: var(--mdui-typescale-headline-small-line-height);
  font-size: var(--mdui-typescale-headline-small-size);
  letter-spacing: var(--mdui-typescale-headline-small-tracking);
  font-weight: var(--mdui-typescale-headline-small-weight);
}

.text-title {
  line-height: var(--mdui-typescale-title-large-line-height);
  font-size: var(--mdui-typescale-title-large-size);
  letter-spacing: var(--mdui-typescale-title-large-tracking);
  font-weight: var(--mdui-typescale-title-large-weight);
}

.text-body-bold {
  line-height: var(--mdui-typescale-title-medium-line-height);
  font-size: var(--mdui-typescale-title-medium-size);
  letter-spacing: var(--mdui-typescale-title-medium-tracking);
  font-weight: var(--mdui-typescale-title-medium-weight);
}

.text-body {
  line-height: var(--mdui-typescale-body-large-line-height);
  font-size: var(--mdui-typescale-body-large-size);
  letter-spacing: var(--mdui-typescale-body-large-tracking);
  font-weight: var(--mdui-typescale-body-large-weight);
}

.text-body-lite {
  line-height: var(--mdui-typescale-body-medium-line-height);
  font-size: var(--mdui-typescale-body-medium-size);
  letter-spacing: var(--mdui-typescale-body-medium-tracking);
  font-weight: var(--mdui-typescale-body-medium-weight);
}

.text-label {
  line-height: var(--mdui-typescale-label-large-line-height);
  font-size: var(--mdui-typescale-label-large-size);
  letter-spacing: var(--mdui-typescale-label-large-tracking);
  font-weight: var(--mdui-typescale-label-large-weight);
}
```

### 响应式断点

- `--mdui-breakpoint-xxl`: 1920px
- `--mdui-breakpoint-xl`: 1440px
- `--mdui-breakpoint-lg`: 1080px
- `--mdui-breakpoint-md`: 840px
- `--mdui-breakpoint-sm`: 600px
- `--mdui-breakpoint-sx`: 0px

[nvm]: https://github.com/nvm-sh/nvm
[node]: https://nodejs.org/zh-cn
[code]: https://code.visualstudio.com/
[vue]: https://cn.vuejs.org/guide/introduction.html
[mdui]: https://www.mdui.org/zh-cn/docs/2/