>  기사  >  웹 프론트엔드  >  Ant Design Pro를 설치하는 방법은 무엇입니까? 간단한 시작 안내서

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

青灯夜游
青灯夜游앞으로
2021-12-20 12:05:023596검색

앤트 디자인 프로(Ant Design Pro)란 무엇인가요? Ant Design Pro를 설치하는 방법은 무엇입니까? 다음 기사에서는 시작 안내서를 공유하고 Ant Design Pro를 간단하게 시작하는 데 도움이 되기를 바랍니다.

1. Ant Design Pro란

Ant Design Pro는 Ant Design의 디자인 가치를 고수하는 기업용 미드엔드 및 백엔드 프론트엔드/디자인 솔루션입니다. 디자인 사양과 기본 구성요소를 기반으로 구축하고, 지속적으로 구축하고, 일반적인 템플릿/비즈니스 구성요소/지원 디자인 리소스를 개선하여 디자인 및 개발 프로세스에서 "사용자"와 "디자이너"의 경험을 더욱 향상시키는 데 전념하고 있습니다. 엔터프라이즈급 중간 및 백엔드 제품
로컬 설치 yarn(또는 npm), nodegit이 필요합니다. 우리의 기술 스택은 ES2015+, React, UmiJS, dva, g2antd을 기반으로 하며 이러한 지식을 미리 이해하고 학습하는 것이 매우 도움이 될 것입니다.

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를 설치하는 방법은 무엇입니까? 간단한 시작 안내서

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 구축이 완료됩니다

Ant Design Pro를 설치하는 방법은 무엇입니까? 간단한 시작 안내서시작이 완료되면 브라우저가 자동으로 열려서

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

내장 템플릿은 다음과 같습니다:Ant Design Pro를 설치하는 방법은 무엇입니까? 간단한 시작 안내서

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


특정 데모 페이지 참조: https://preview.pro.ant.design/dashboard/analytic

더 많은 프로그래밍 관련 지식 , 방문해주세요: Ant Design Pro를 설치하는 방법은 무엇입니까? 간단한 시작 안내서프로그래밍 비디오

!

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

성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제