ant design pro v5 - 01 项目创建-优快云博客

本文链接：https://blog.youkuaiyun.com/haiyabtx/article/details/127357051

React + TypeScript + Ant Design Pro V5.2

开箱即用的中台前端/设计解决方案。

预览：http://preview.pro.ant.design
首页：http://pro.ant.design/index-cn
使用文档：http://pro.ant.design/docs/getting-started-cn
更新日志: http://pro.ant.design/docs/changelog-cn
常见问题：http://pro.ant.design/docs/faq-cn
国内镜像：http://ant-design-pro.gitee.io
项目地址：https://github.com/ant-design/ant-design-pro
项目文档：https://pro.ant.design/zh-CN

创建项目（本教程基于 ANT DESIGN PRO V5.2 ）

我们提供了 pro-cli 来快速的初始化脚手架。

# 使用 npm
npm i @ant-design/pro-cli -g
pro create myapp

选择 umi 的版本

? 🐂 使用 umi@4 还是 umi@3 ? (Use arrow keys)
❯ umi@4
  umi@3

这边选择umi@3版本如果选择了 umi@4 版本，暂时还不支持全量区块。

如果选择了 umi@3，还可以选择 pro 的模板，pro 是基础模板，只提供了框架运行的基本内容，complete 包含所有区块，不太适合当基础模板来进行二次开发

? 🚀 要全量的还是一个简单的脚手架? (Use arrow keys)
❯ simple
  complete

切换到新项目的根目类安装依赖：

$ cd myapp && tyarn
// 或
$ cd myapp && npm install

项目运行：

// 运行项目
npm start

// 不加载mock模拟数据 （开发模式）     
npm run start:no-mock

项目打包：

npm run build

Dockerfile发布项目：

default.conf文件

server {
    listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    root /usr/share/nginx/html;

    location / {
        # 用于配合 browserHistory使用
        try_files $uri $uri/index.html /index.html;

        # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
        # rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent;

    }


}

Dockerfile

FROM nginx

EXPOSE 80

# 本地时间
RUN cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && echo 'Asia/Shanghai' >/etc/timezone;

# 删除nginx 默认配置
RUN rm /etc/nginx/conf.d/default.conf

# 添加我们自己的配置 default.conf
ADD default.conf /etc/nginx/conf.d/

##把刚才生成dist文件夹下的文件copy到nginx下面去
COPY dist/  /usr/share/nginx/html/

更多信息请参考项目文档。