今天,给大家一起学习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和内容。
如果有更好的学习方式可以相互探讨,如果有地方错误,欢迎吐槽指出,本人可以及时学习和弥补改正。
小白学习"PredixUI的使用"系列一
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
在Predix上运行Flask版Hello World
PredixCN
2020-02-23 09:35:05
10亿美元打造的工业互联网平台GE Predix提供免费试用
xudawenfighting
2020-02-20 15:51:30
predix-zone-id的作用
kaifeibandao
2020-02-20 12:54:22
本地存储-cookie与storage
zero_lh
2020-06-21 02:13:51
vue-cli 3.0 打包(vue.config.js)修改js,css,img的输出路径
bililibili
2020-06-17 16:41:40
JQuery 学习笔记(一)
xueerfei
2020-02-24 23:28:39
javascript异步加载方式方法及思考
zero_lh
2020-02-24 21:53:14
使用JS插件解决IE6不支持PNG透明背景问题
zero_lh
2020-02-24 21:53:14
js跳转页面方法大全
wangzh300
2020-02-21 07:38:09
JS关闭窗口或JS关闭页面的几种代码
wangzh300
2020-02-21 07:38:09
作用域链,立即执行函数
小曾艺
2019-08-29 10:26:41
Vue组件中清除定时器setInterval的方案
bililibili
2019-07-30 18:25:27