Ant Design Pro를 설치하는 방법은 무엇입니까? 간단한 시작 안내서

앤트 디자인 프로(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 및 antd을 기반으로 하며 이러한 지식을 미리 이해하고 학습하는 것이 매우 도움이 될 것입니다.

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

or

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는 기본적으로 Typescript 버전입니다. antd pro의 최신 개발 모드에서는 javascript/typescript 버전을 선택할 수 있습니다. typescript 방법의 경우 v4를 선택한 다음 javascript를 선택하라는 메시지가 표시됩니다.

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 install
cnpm start

기다려 보세요. webpack 구축이 완료됩니다

시작이 완료되면 브라우저가 자동으로 열려서

http://localhost:8000

을 방문하게 됩니다. 페이지는 성공을 의미합니다. 실제로는 매우 간단합니다. 시작할 때 fetch:blocks 매개변수를 추가하면 자동으로 전체 구성 요소가 코드에 설치됩니다

cnpm run fetch:blocks

전체 버전을 선택하면 버전의 디렉터리 구조는 다음과 같습니다

── 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/dashboard/analytic

더 많은 프로그래밍 관련 지식 , 방문해주세요: 프로그래밍 비디오

!

위 내용은 Ant Design Pro를 설치하는 방법은 무엇입니까? 간단한 시작 안내서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!