一、简介

​ 1.Ant Design Blazor支持MIT开源协议，Ant Design Blazor Pro支持Apache2.0开源协议。

​ 2.官网：Ant Design of Blazor - Ant Design of Blazor (antblazor.com)

二、CMD下载Ant模板

1. 简介

​ 使用CMD安装ant模板，可以帮助我们获取到一个项目模板。

​ github地址：GitHub - ant-design-blazor/ant-design-pro-blazor: 👨🏻💻👩🏻💻 An out-of-box UI solution for enterprise applications as a Blazor boilerplate.

2.下载模板

​ 打开cmd命令行，执行以下命令，下载ant design blazor模板

dotnet new -i AntDesign.Templates

3.CLI命令说明

（1）加上–full true（可缩写为 -f true），则会下载所有页面
（2）–host wasm(可缩写为-h wasm)则是WebAssembly
（3）–styles less（可缩写为-s less） ，这个时候需要下载node.js，通过npm命令初始化，默认为css
（4）–no-restore.，为true则还原，为false则不还原项目，默认还原

Options（选项）	Description（描述）	Type（类型，即参数值）	Default（默认值）
–full	If specified, generates all pages of Ant Design Pro（如果指定该参数，则生成所有page页面，否则只会有一个左侧菜单和****welcome页面）	bool	false
–host	Specify the hosting model（指定托管模型）	wasm | server | hosted	wasm
–styles	Whether use NodeJS and Less to compile your custom themes.（是否使用NodeJS和Less编译自定义主题，即样式）	css | less	css
–no-restore	If specified, skips the automatic restore of the project on create（指定该选项，则项目创建时，自跳过项目的自动恢复，即不自****动恢复包引用）	bool	false

4.创建welcome模板

​ （1）执行以下命令，则生成一个只有welcome页面的模板，根据ant模板，创建一个名为AntDesignProApp的项目

dotnet new antdesign -o  AntDesignProApp

​ （2）使用vs2022运行项目

5.创建所有demo页面模板

​ （1）执行以下命令，则生成官方github中截图项目ant模板，创建一个名为AntDesignProApp的项目

dotnet new antdesign -f true  -o  AntDesignProApp02

​ （2）使用vs2022运行项目

二、下载github代码到本地

1.简介

​ 因github代码是含ts、less，所以需要安装node.js，如下方式可将github代码下载到本地运行。

​ github地址：GitHub - ant-design-blazor/ant-design-pro-blazor: 👨🏻💻👩🏻💻 An out-of-box UI solution for enterprise applications as a Blazor boilerplate.

2.环境要求

​ ● 先安装 .NET Core SDK 7.0.100 以上版本

​ ● 安装 Node.js（只用于样式文件和互操作所需 TS 文件的构建）

​ ● 克隆到本地开发

3.clone代码

git clone git@gitee.com:ant-design-blazor/ant-design-blazor.git

cd ant-design-blazor

4.使用npm初始化

​ 使用npm install命令，初始化项目所需的依赖包，有点像download一个netcore项目时，要自动还原nuget包，只不过这里需要一行代码进行还原（下载）。

4.1报npm错误

​ 报以下错误是因为没有装node.js

4.2安装node.js

​ 访问官网 Node.js，下载稳定版本，然后一直下一步即可。

4.3安装淘宝镜像（cnpm命令）

​ 安装node.js后，使用npm 命令，会发现很慢，原因是npm下载的是国外镜像，所以这里先安装【淘宝镜像】，执行以下命令，安装cnpm工具。

npm install -g cnpm --registry=http://registry.npmmirror.com

4.4查看cnpm命令是否存在

​ 查看【淘宝镜像】是否安装成功。

cnpm -v

4.5初始化项目依赖包

​ 使用以下命令，初始化项目依赖包。

cnpm install

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qiImaQCH-1679413284763)(https://wdcdn.qpic.cn/MTY4ODg0OTk4NDk2NjgzNQ_224311_OvncunSWZw7G6SPv_1679410685?w=1902&h=210)]

5.构建项目

dotnet build ./site/AntDesign.Docs.Build/AntDesign.Docs.Build.csproj

6.启动项目

npm start

三、总结

​ 1. 如果是开使用官方模板进行项目初始化和开发，则建议使用【一、CMD下载Ant模板】的方式初始化。

​ 2. githu项目代码比较丰富，也导致其启动比较慢。

​ 3. 其中，【二、下载github代码到本地】建议是【学习官方代码】时，去clone下来学习，而不是直接用这个作为项目代码初始化。

​ 4. github下载的初始化后为【626MB（ant-design-blazor）】，而使用模板初始化的为【1MB（AntDesignProApp02）】，一对比可想而知。