PatternFly开发

在了解了 PatternFly简介 之后,作为开发者,我们可以在PatternFly的Demo基础上定制开发,也可以自行做 PatternFly设计

安装包管理器

安装Yarn

  • 使用发行版安装 yarn

    sudo dnf install yarnpkg
    
  • (我使用发行版方法)使用 npm (已经包含在 node.js )安装和升级Yarn:

    npm install --global yarn
    

起步

使用React seed起步

  • Fork出 Patternfly React Seed 项目

  • 安装项目:

    git clone https://github.com/patternfly/patternfly-react-seed
    cd patternfly-react-seed
    # npm install && npm run start:dev
    yarn install && yarn build && yarn start dev
    

注解

使用 yarn 代替 npm 进行包管理会提示:

warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.

注解

npm run start:dev 输出信息提示 Project is running at http://localhost:9000/ ,所以通过 SSH隧道 方式建立访问服务器通道(我的程序运行在远端 z-dev 虚拟机中,如果你只是本地电脑开发,可忽略这步)

注解

如果要快速启动项目,可以使用 patternfly-quickstarts 项目 作为起步基础

npm和yarn启动监听端口不同:

- npm 使用浏览器访问 http://localhost:9000/
- yarn 使用浏览器访问 http://192.168.6.253:8080/ (其实是对外开放)

应该看到一个初始页面:

../../_images/patternfly_init_start.png

安装和配置PatternFly React

  • (我没有)使用 npm 方式安装:

    npm install @patternfly/react-core --save
    
  • (我实际)使用 yarn 方式安装:

    yarn add @patternfly/react-core
    

HTML/CSS

HTML/CSS库提供了一系列代码案例,可以使用统一的PatternFly markup和styling来构建接口。

  • (我没有)使用 npm 方式安装:

    npm install @patternfly/patternfly --save
    
  • (我实际)使用 yarn 方式安装:

    yarn add @patternfly/patternfly
    

完成了HTML/CSS安装之后,包含了:

三大模块(layouts, components, utilities) 提供了一个 Sass 文件 (.scss) 和 CSS 文件。如果需要定制元素,建议从 .scss 文件中寻找变量,并扩展变量,而不是直接覆盖CSS。

当安装了 PatternFly之后,软件包包括了:

  • 面向整个编译库的单个文件: node_modules/@patternfly/patternfly/patternfly.css

  • 每个组件单独编译的独立文件: node_modules/@patternfly/patternfly/<ComponentName>/styles.css

  • 面向整个库源代码(Sass)的单个文件: node_modules/@patternfly/patternfly/patternfly.scss

  • 每个组件源代码(Sass)的独立文件: node_modules/@patternfly/patternfly/<ComponentName>/styles.scss

通过使用上述文件来定制库,实现不同项目的需求

配置项目

参考