文档

文档步骤

共用的文档步骤与实用示例。

安装步骤

Create a project
Start from a Vite project when you do not have an app yet.
```
npm create vite@latest my-appcd my-app
```
Add Master CSS
Run the installer from the project root.
```
npm create @master/css@rc -- --yes
```
Run and style
Start the dev server, then use Master CSS classes in your markup.
```
npm run dev
```

用法与接口

带有自定义标题与代码的设置流程，请使用 StepSection。列表在每个 Step 的标题旁，以普通等宽数字 01、02、03 和细连接线编号，不要将数字放进圆圈或徽标。操作写在标题，预期结果写在正文，阅读顺序保持在文档中。

import Code from '@master/internal-site/components/Code'import StepSection, { Step, StepL, StepR } from '@master/internal-site/components/StepSection'<StepSection>  <Step $row>    <StepL>      <h3>Connect the stylesheet</h3>      <p>Import the entry in your app.</p>    </StepL>    <StepR>      <Code lang="css">{"@import '@master/css';"}</Code>    </StepR>  </Step></StepSection>

组件由服务器渲染。请提供适当层级的原生标题，并保留稳定 ID。编号仅供装饰，不能取代标题或进度指示。编号轨道与可选列沿用 Guide 的处理方式。46rem 的容器阈值控制可选的双列布局；较窄时按阅读顺序堆叠，代码保留自身的横向滚动。预览应与展示其结果的步骤放在一起；预览与源代码之间的间距由托盘负责。

各安装指南应使用相同的步骤模式：

快速开始、Vite、CLI 和 VS Code 将各操作与结果配在一起。
Webpack、Rspack 和 Rsbuild 保留完整、可读的配置文件。
Astro 和 SvelteKit 连接布局与服务器钩子。
Express、PHP 和 Rails 将独立构建的资源接到完整服务器模板。
Laravel、WordPress 和 Shopify 保留宿主框架的资源辅助函数与布局钩子。
ASP.NET Core 和 Blazor 明确区分资源构建、宿主框架构建与发布顺序。

完整模板与外观预览应放在同一个托盘。DemoConfiguredExample 使用字面值源代码，让显示的 classes 与实际示例一致；预览不会运行宿主框架，因此设置限制仍须写在教学中。

安装将 Integrations、CDN 和 CLI 放在同一篇文章的不同章节，请使用普通链接前往各章节锚点。框架指南仍各自成页，并保有自己的页面目录；各种渲染模式则是各框架指南内的章节。

安装步骤

Create a project

Add Master CSS

Run and style

用法与接口

#安装导航