小白学习"PredixUI的使用"系列一

[bililibili]

今天，给大家一起学习predixUI的使用。那么，在学习prediUI的使用之前，先给大家简单的介绍一下关于predixUI的知识。Predix UI是一个拥有大量组件的UI库，合理的配合使用起组件，可以轻松地创建功能强大，用户友好的Web应用程序。其主要由三部分组成（附录：predixUI官方文档：https://www.predix-ui.com/#/home/）：

1、即插即用的组件，可以加速UI / UX的开发

2、可组合和可重复使用的CSS模块，建立一致的设计

3、快速启动的网络应用程序，可以与构建自己需要的一切组件

现在就让我们已经进入predixUI的学习之旅中。

a. 环境
i. 安装node环境
ii. 安装依赖包bower
iii. 安装服务器（node 服务器包http-server或者其他服务器：tomcat或者iis）

b. 步骤
i. 首先在node的中安装bower：npm install bower
ii. 其次建立自己的项目，然后进入项目路径中，然后进行项目初始化：bower init（在初始化的时候，会询问该项目的名称，描述，作者等相关信息，如果不需要自己设置编写，可直接进行回车，最终会自动默认一个初始的内容）。最终初始化完成后会在当前路径下建立一个项目，项目中有一个bower.json的文件，里面就是刚刚配置的相关内容。
iii. 再者，需要进行使用predixUI的相关内容时，需要安装相关UI包：bower install px-spinner（如果想要在bower.json中加入该依赖，可以采用命令：bower install px-spinner --save）
最后，引用PredixUI到自己的项目的html文件中，引入的方法为：<link rel="import" href="bower_components/px-spinner/px-spinner.html" />。然后可以在body中直接使用api的标签来使用predixUI。如：<px-spinner></px-spinner>（加载的一个动画）

以上就是使用predixUI的基本使用用法，需要使用比较复杂的其他api，可以去predixUI进行查看学习。同时后期也会陆续推出先关的学习demo和内容。

如果有更好的学习方式可以相互探讨，如果有地方错误，欢迎吐槽指出，本人可以及时学习和弥补改正。