Bagaimana untuk memasang Ant Design Pro? Panduan Permulaan Mudah

Apakah Ant Design Pro? Bagaimana untuk memasang Ant Design Pro? Artikel berikut akan berkongsi dengan anda panduan permulaan dan membantu anda bermula dengan Ant Design Pro dengan cara yang mudah.

1 Apakah itu Ant Design Pro

Ant Design Pro ialah reka bentuk bahagian hadapan/bahagian belakang peringkat perusahaan. penyelesaian. Kami mempertahankan nilai reka bentuk Ant Design komited untuk terus membina ke atas berdasarkan spesifikasi reka bentuk dan komponen asas, mengekstrak templat biasa/komponen perniagaan/sumber reka bentuk sokongan dan menambah baik lagi kecekapan proses reka bentuk dan pembangunan produk pertengahan dan belakang peringkat perusahaan Pengalaman "pengguna" dan "pereka"
memerlukan pemasangan tempatan benang(atau npm. ), nod dan git. Tindanan teknologi kami adalah berdasarkan ES2015 , React, UmiJS, dva, g2 dan dan seterusnya , ia akan sangat membantu untuk memahami dan mempelajari pengetahuan ini terlebih dahulu.

2. Pemasangan

Persekitaran yang disediakan

• nod js nampaknya 10.13 dan ke atas

  Versi yang saya gunakan untuk nod js ialah 12.14.0

• Pelayan npm berada di luar negara dan aksesnya lambat Ia boleh digantikan dengan sumber domestik:

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

Anda juga boleh memasang cnpm (sumber domestik di mana sahaja anda memerlukan arahan npm, gantikannya dengan cnpm

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

Kaedah 1). : pemasangan git

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

Kaedah 2: Kaedah yang disyorkan oleh laman web rasmi

Buat folder kosong sebagai direktori projek, dan Laksanakan dalam direktori:

yarn create umi

atau

npm create umi

dan kemudian tunggu kebergantungan dipasang Selepas selesai, anda akan digesa untuk memilih a templat. Kami memilih ant-design-pro yang pertama:

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.

Selepas memilih templat, pilihan versi akan muncul mod antd pro. v4 boleh memilih dua versi javascript/typescript Jika anda tidak mahu menggunakan typescript, anda boleh Pilih v4, dan kemudian pilih javascript Kami juga akan diminta untuk memilih versi yang ringkas dan lengkap

Perancah Ant Design Pro akan dipasang secara automatik Selepas selesai, rangka kerja pembangunan yang lengkap telah dihasilkan untuk anda, menyediakan pelbagai fungsi dan lubang yang meliputi pembangunan pertengahan dan belakang pilih versi mudah, berikut ialah struktur direktori keseluruhan projek

Kemudian mula memasang kebergantungan dan mulakan projek, laksanakan arahan berikut

├── 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

Jika anda masih. mendapat ralat selepas mencuba semula beberapa kali, anda boleh mempertimbangkan untuk menukar kepada cnpm dan cuba

npm install
npm start

Tunggu pembinaan webpack selesai

cnpm install
cnpm start

Selepas permulaan selesai, penyemak imbas akan dibuka secara automatik untuk mengakses http://localhost:8000

Jika anda melihat halaman berikut, ia bermakna kejayaan. sebenarnya sangat mudah. ​​Apabila bermula, kami menambah parameter fetch:blocks, yang secara automatik akan memasang komponen lengkap ke dalam kod kami

Jika kami memilih versi lengkap

Struktur direktori adalah seperti ini

Templat terbina dalam adalah seperti berikut:

cnpm run fetch:blocks

Halaman itu mungkin seperti ini

── 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

Rujukan halaman demo terperinci: https://preview.pro.ant.design/dashboard/analysis

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

Lebih banyak pengetahuan berkaitan pengaturcaraan , sila lawati: Video Pengaturcaraan

! !

Atas ialah kandungan terperinci Bagaimana untuk memasang Ant Design Pro? Panduan Permulaan Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!