ant-design-blazor/docs/getting-started.zh-CN.md
James Yeung 238b73310f
docs: fix menu generator (#4157)
* docs: fix menu generator

* fix subtitle

* ignore submenu in en
2024-09-03 13:29:19 +08:00

3.9 KiB
Raw Blame History

order title
1 快速上手

Ant Design of Blazor 致力于提供给程序员愉悦的开发体验。

在开始之前,推荐先学习 Blazor.Net Core,并正确安装和配置了 .NET Core SDK 3.1.300 或以上。官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的初级知识,并且已经完全掌握了 Blazor 的正确开发方式。如果你刚开始学习.NET 或者 Blazor将 UI 框架作为你的第一步可能不是最好的主意。

第一个本地实例

实际项目开发中,你会需要对 C# 代码的构建、调试、代理、打包部署等一系列工程化的需求。 我们强烈建议使用官方的 Visual Studio 2022 或者 VS Code 进行开发,下面我们用一个简单的实例来说明。

创建一个 Blazor WebAssembly 项目

在创建项目之前,请确保 .NET Core SDK 8.0.100+ 已被成功安装。

执行以下命令,dotnet cli 会在当前目录下新建一个名称为 PROJECT-NAME 的文件夹,并自动安装好相应依赖。

$ dotnet new blazorwasm -o PROJECT-NAME

开发调试

一键启动调试,运行成功后显示模板页面。

$ dotnet run

构建和部署

$ dotnet publish -c release -o dist

入口文件会构建到 dist/wwwroot 目录中,你可以自由部署到不同环境中进行引用。

安装组件

$ dotnet add package AntDesign

注册依赖

Startup.cs 文件中注册 AntDesign 服务

public void ConfigureServices(IServiceCollection services)
{
  ...
  services.AddAntDesign();
}
  • _Imports.razor 中加入命名空间

    @using AntDesign
    
  • 为了动态地显示弹出组件,需要在 App.razor 中添加一个 <AntContainer /> 组件。

    <Router AppAssembly="@typeof(MainLayout).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <Result Status="404" />
            </LayoutView>
        </NotFound>
    </Router>
    
    <AntContainer />   <-- 在这里添加 ✨
    
  • 最后就可以在.razor组件中引用啦!

<Button Type="primary">Primary</Button>

指定样式/脚本自动引入位置

注意:目前 静态 和 Auto 模式不支持自动引入,请手动引入。

自 0.17.0 本版开始AntDesign Blazor 组件库利用 JavaScript initializers 支持自动引入样式和脚本。其中 CSS 默认引入到 页面原有 <link> 元素的之前,而 JS 默认引入到所有 <script> 元素之前。如果需要指定位置,只需在 html 或者 App.razor 中指定位置加入 <link antblazor-css><script antblazor-js></script>,会自动引入到这两个元素之前。

  ...
  <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet"> <!-- 自动引入到这里 -->
  <link antblazor-css />

  ...

  <script src="_content/AntDesign/js/ant-design-blazor.js"></script> <!-- 自动引入到这里 -->
  <script antblazor-js></script>
  ...

禁用启动器

当有特殊情况不想自动导入 JS 或者样式时,可以选择禁用自动导入,并手动导入。

在入口 HTML 文件上任意元素使用 [no-antblazor-js] 标签可禁用自动导入JS使用 [no-antblazor-css] 可禁用自动导入CSS。

  <meta no-antblazor-js no-antblazor-css />
  <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet">
  <script src="_content/AntDesign/js/ant-design-blazor.js"></script>