Ant Design Pro をインストールするにはどうすればよいですか?簡単な入門ガイド-フロントエンドQ&A-php.cn

Ant Design Pro とは何ですか? Ant Design Pro をインストールするにはどうすればよいですか?次の記事では、入門ガイドを共有し、簡単な方法で Ant Design Pro を使い始めるのに役立ちます。

1. Ant Design Pro とは

Ant Design Pro は、エンタープライズレベルのミッドエンドおよびバックエンドのフロントエンド/デザインです。 #Ant Designの設計値は、設計仕様と基本コンポーネントに基づいて継続的に構築し、典型的なテンプレート/ビジネスコンポーネント/サポート設計リソースを抽出し、エンタープライズレベルのミドルエンドおよびバックエンド製品の設計および開発プロセスの効率がさらに向上します。「ユーザー」および「デザイナー」エクスペリエンス
yarn(またはnpm) をインストールする必要があります。 )、node、およびgitをローカルに配置します。当社のテクノロジースタックは、ES2015、React、UmiJS、dva、g2、and に基づいています。、この知識を事前に理解して学習しておくと非常に役立ちます。

2. インストール

準備した環境

node js は 10.13 以降のようです
node js のバージョンは 12.14.0
npm サーバーが海外にありアクセスが遅いので国内ソースに変更してください:

npm config set registry https://registry.npm.taobao.org

ログイン後にコピー

cnpm (国産ソース) をインストールすることもできます。使用する場合は、npm コマンドを cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

ログイン後にコピー

方法 1: git インストール## に置き換えてください。#

git clone https://github.com/ant-design/ant-design-pro.git cd　ant-design-pro npm install npm start

ログイン後にコピー

#方法 2: 公式サイトが推奨する方法

##プロジェクトディレクトリとして空のフォルダーを作成し、実行するディレクトリ内:

yarn create umi

ログイン後にコピー

npm create umi

ログイン後にコピー

その後、依存関係がインストールされるまで待ちます。完了後、テンプレートを選択するように求められます。最初の ant-design-pro を選択します。

Select the boilerplate type (Use arrow keys) ❯ ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block. app - Create project with a simple boilerplate, support typescript. block - Create a umi block. library - Create a library with umi. plugin - Create a umi plugin.

ログイン後にコピー

テンプレートを選択すると、ポップアップが表示されます。バージョンを選択するには、v5 を選択します (v5 のデフォルトは、antd pro の最新の開発モードでもある typescript バージョンです。v4 は 2 つのバージョンを選択できます) javascript/typescript の形式です。typescript を使用したくない場合は、v4 を選択してから javascript を選択することもできます。また、シンプルなバージョンと完全なバージョンを選択するよう依頼することもできます

#Ant Design Pro 足場は自動的にインストールされます。

インストールが完了すると、ミッドエンドおよびバックエンド開発をカバーするさまざまな機能とピットを提供する完全な開発フレームワークが生成されます。シンプルバージョンを選択すると、プロジェクト全体のディレクトリ構造は次のとおりです。 Ant Design Pro をインストールするにはどうすればよいですか?簡単な入門ガイド

├── config # umi 配置，包含路由，构建等配置 ├── mock # 本地模拟数据 ├── public │ └── favicon.png # Favicon ├── src │ ├── assets # 本地静态资源 │ ├── components # 业务通用组件 │ ├── e2e # 集成测试用例 │ ├── layouts # 通用布局 │ ├── models # 全局 dva model │ ├── pages # 业务页面入口和常用模板 │ ├── services # 后台接口服务 │ ├── utils # 工具库 │ ├── locales # 国际化资源 │ ├── global.less # 全局样式 │ └── global.ts # 全局 JS ├── tests # 测试工具 ├── README.md └── package.json

ログイン後にコピー

次に、依存関係のインストールを開始してプロジェクトを開始し、次のコマンドを実行します

npm install npm start

ログイン後にコピー

何度か再試行しても解決しない場合エラーが発生する場合は、cnpm への変更を検討してください。

cnpm install cnpm start

ログイン後にコピー

Webpack の構築が完了するまで待ちます

起動が完了すると、自動的に開きますブラウザで

http://localhost:8000

にアクセスします。次のページが表示されたら成功です。 Ant Design Pro をインストールするにはどうすればよいですか?簡単な入門ガイド

実際には非常に簡単です。まず、パラメータ fetch:blocks を追加します。これにより、完全なコンポーネントがコードに自動的にインストールされます

cnpm run fetch:blocks

ログイン後にコピー

完全バージョンを選択した場合 Ant Design Pro をインストールするにはどうすればよいですか?簡単な入門ガイドディレクトリ構造は次のようになります

── config # umi 配置，包含路由，构建等配置 ├── mock # 本地模拟数据 ├── public │ └── favicon.png # Favicon ├── src │ ├── assets # 本地静态资源 │ ├── components # 业务通用组件 │ ├── e2e # 集成测试用例 │ ├── layouts # 通用布局 │ ├── models # 全局 dva model │ ├── pages # 业务页面入口和常用模板 │ ├── services # 后台接口服务，请求服务端接口的都放在这里 │ ├── utils # 工具库 │ ├── locales # 国际化资源 │ ├── global.less # 全局样式 │ └── global.ts # 全局 JS ├── tests # 测试工具 ├── README.md └── package.json

ログイン後にコピー

組み込みテンプレートは次のとおりです:

- Dashboard - 分析页 - 监控页 - 工作台 - 表单页 - 基础表单页 - 分步表单页 - 高级表单页 - 列表页 - 查询表格 - 标准列表 - 卡片列表 - 搜索列表（项目/应用/文章） - 详情页 - 基础详情页 - 高级详情页 - 结果 - 成功页 - 失败页 - 异常 - 403 无权限 - 404 找不到 - 500 服务器出错 - 个人页 - 个人中心 - 个人设置 - 图形编辑器 - 流程图编辑器 - 脑图编辑器 - 拓扑编辑器 - 帐户 - 登录 - 注册 - 注册成功

ログイン後にコピー

ページはおそらく次のようになります

具体的なデモページの参照: https://preview. pro.ant.design/ダッシュボード/分析

Ant Design Pro をインストールするにはどうすればよいですか?簡単な入門ガイド