Ant Design Blazor入门（使用ant模板初始化项目及运行github代码）
文章目录
- 一、简介
- 二、CMD下载Ant模板
- 1. 简介
- 2.下载模板
- 3.CLI命令说明
- 4.创建welcome模板
- 5.创建所有demo页面模板
- 二、下载github代码到本地
- 1.简介
- 2.环境要求
- 3.clone代码
- 4.使用npm初始化
- 4.1报npm错误
- 4.2安装node.js
- 4.3安装淘宝镜像（cnpm命令）
- 4.4查看cnpm命令是否存在
- 4.5初始化项目依赖包
- 5.构建项目
- 6.启动项目
- 三、总结
一、简介
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.gitcd 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）】，一对比可想而知。
下一篇：Maven安装配置和私服搭建