Ubuntu16.04上的AmazeUI安装配置
准备工作
-
开发环境配置
下载安装 Node.js(推荐使用 4.x LTS 最新正式版)
选择下载Linux二进制文件(x64),然后解压到任意目录。
配置环境变量sudo gedit ~/.bashrc
在最后添加如下内容
把第二行=后面的替换成解压的目录
#set for nodejs
export NODE_HOME=/home/a286/web/node
export PATH=$NODE_HOME/bin:$PATH
保存关闭
source ~/.bashrc
测试
node -v
npm -v
如果显示版本号则安装成功
- 预备知识
现在开源社区的前端资源数不胜数,但不意味着一个对 HTML、CSS、JavaScript 一无所知或知之甚少的人能有效、高效地利用这些资源达成目标。对于初学者,个人并不建议刚入门就使用框架(库),只知其然时就扎进去,不如夯实基础,到知其所以然以后再开始使用,这样对个人提高更有裨益。请记住,库(框架)不是模板,能为开发节省时间,但不能代替基础知识学习。
使用 Amaze UI Touch 之前,除了熟悉 HTML、CSS、JavaScript 以外,还应了解相关的工具和项目。
相关项目:
React 官网(v0.14.0+)
React Router(可选)
Sass:Amaze UI Touch 样式使用 Sass 编写,如需深入二次开发,应当知道如何使用 Sass。
构建工具:
传统的开发方式仍然可用,但如果想提高开发效率、使用新技术,一些工具必不可少。
Babel
Gulp
Browserify / Webpack
Grunt(廉颇老矣,尚能饭否?)
- CSS
Amaze UI Touch 完全基于 flexbox 布局。由于旧版规范中没有 flex-shrink、flex-basis、flex-wrap 对应的属性,导致只支持旧版规范的浏览器无法正常渲染布局,暂时没有找到解决方法(望赐教) 通过回退方式处理,在 Android UC 上测试通过,有待进行更多测试 :( 。
CSS3 Transitions
CSS Animation
- JavaScript
ES5: Amaze UI Touch 基于 ES2015 编写,使用 Babel.js 转换为 ES5;
React.js: 0.1.x 兼容至 IE8 15.x 兼容至 IE9。
构建工具
Amaze UI使用gulp.js构建项目。
将 Npm 的源替换成淘宝的源
在墙内久了,难免会碰到撞墙的时候,所幸国内也有众多 NPM 镜像可供选择,在大多数情况下我们可以使用国内的源(比如 淘宝 NPM 镜像)去替换官方的源以加快下载包的速度。
不过呢,我们在发布自己的包的时候却需要将源修改回官方的 https://registry.npmjs.org/ 源。
修改源地址为淘宝 NPM 镜像
npm config set registry http://registry.npm.taobao.org/
修改源地址为官方源
npm config set registry https://registry.npmjs.org/
首先全局安装gulp:
npm install -g gulp
克隆项目文件:
git clone https://github.com/allmobilize/amazeui.git
然后进入目录安装依赖:
npm install
接下来,执行gulp:
gulp