准备工作

  1. 开发环境配置
    下载安装 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

如果显示版本号则安装成功

  1. 预备知识

现在开源社区的前端资源数不胜数,但不意味着一个对 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(廉颇老矣,尚能饭否?)

  1. CSS

Flexbox

Amaze UI Touch 完全基于 flexbox 布局。由于旧版规范中没有 flex-shrink、flex-basis、flex-wrap 对应的属性,导致只支持旧版规范的浏览器无法正常渲染布局,暂时没有找到解决方法(望赐教) 通过回退方式处理,在 Android UC 上测试通过,有待进行更多测试 :( 。

CSS3 Transitions
CSS Animation

  1. 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

https://github.com/amazeui/amazeui
http://www.amazeui.org/

文章作者: 辣比丶小新
版权声明: 本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Y丶Zon
前端 教程
喜欢就支持一下吧