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

今天,给大家一起学习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和内容。

      如果有更好的学习方式可以相互探讨,如果有地方错误,欢迎吐槽指出,本人可以及时学习和弥补改正。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章