앤트 디자인 프로(Ant Design Pro)란 무엇인가요? Ant Design Pro를 설치하는 방법은 무엇입니까? 다음 기사에서는 시작 안내서를 공유하고 Ant Design Pro를 간단하게 시작하는 데 도움이 되기를 바랍니다.
Ant Design Pro는 Ant Design의 디자인 가치를 고수하는 기업용 미드엔드 및 백엔드 프론트엔드/디자인 솔루션입니다. 디자인 사양과 기본 구성요소를 기반으로 구축하고, 지속적으로 구축하고, 일반적인 템플릿/비즈니스 구성요소/지원 디자인 리소스를 개선하여 디자인 및 개발 프로세스에서 "사용자"와 "디자이너"의 경험을 더욱 향상시키는 데 전념하고 있습니다. 엔터프라이즈급 중간 및 백엔드 제품
로컬 설치 yarn(또는 npm), node 및 git이 필요합니다. 우리의 기술 스택은 ES2015+, React, UmiJS, dva, g2 및 antd을 기반으로 하며 이러한 지식을 미리 이해하고 학습하는 것이 매우 도움이 될 것입니다.
준비된 환경을 설치하세요
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!