amazeui/amt-starter-kit

Amaze UI Touch Starter Kit - a skeleton for SPA built with React, Amaze UI Touch, React Router.

Amaze UI 是基于社区开源项目构建的一个跨屏前端框架。

Docs in English

README in English

React 版 | 独立插件 | Amaze UI Touch

功能简介

移动优先

以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。

组件丰富，模块化

Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。

本地化支持

相比国外框架，Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果；兼顾国内主流浏览器及 App 内置浏览器兼容支持。

轻量级，高性能

Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。

下载及使用

用户可以从 Amaze UI 官网 下载打包好的模板。

所有文档存放在 docs/ 目录下，为方便查看演示效果，建议通过 Amaze UI 官网查看文档。

开发及构建

用户可以在 Amaze UI 的基础上进行二次开发。

目录结构

amazeui
|-- HISTORY.md
|-- LICENSE
|-- README.md
|-- package.json
|-- dist        # 构建目录
|-- docs        # 文档
|-- fonts       # Icon font，目前使用了 http://staticfile.org/
|-- gulpfile.js # 构建配置文件
|-- js          # JS 文件
|-- less        # LESS 文件
|-- tools       # 相关工具
|-- vendor
`-- widget      # Web 组件

构建工具

Amaze UI 使用 gulp.js 构建项目。

首先全局安装 gulp：

npm install -g gulp

克隆项目文件:

git clone https://github.com/allmobilize/amazeui.git

然后进入目录安装依赖：

npm install

接下来，执行 gulp：

gulp

Bug 反馈及需求提交

参考、使用的项目

• Zepto.js (MIT License)
• Sea.js (MIT License)
• Handlebars.js (MIT License)
• normalize.css (MIT License)
• FontAwesome (CC BY 3.0 License)
• Bootstrap (MIT License)
• UIkit (MIT License)
• Foundation (MIT License)
• Framework7 (MIT License)
• Alice (MIT License)
• Arale (MIT License)
• Pure (BSD License)
• Semantic UI (MIT License)
• FastClick (MIT License)
• screenfull.js (MIT License)
• FlexSlider (GPL 2.0)
• Hammer.js (MIT License)
• Flat UI (CC BY 3.0 and MIT License)
• store.js (MIT License)
• bootstrap-datepicker.js (Apache License 2.0)
• iScroll (MIT License)

可能会有部分项目遗漏，我们会不断整理更新。

Developed with Open Source Licensed WebStorm

amt-starter-kit's Issues

app.js 20行代码异常

我在项目中使用TabBar组件作为底部按钮，借鉴了app.js的写法，但在20行的赋值代码报错，刚刚接触 touch 和 react， 希望可以得到帮助

const { location, params, children, ...props, } = this.props;

how to fixed this?

when i run npm run preview
app.5f0a6bb.min.js:2 Uncaught Error: Cannot find module "../style/app.scss"

怎么做clean url

react touter tutorial

根据这个教程对套件里的代码改动之后 url没有clean.

Error on gulp

when run gulp command , it show error:

[18:12:24] Requiring external module babel-core/register
module.js:339
throw err;
^

Error: Cannot find module 'babel-preset-stage-1'
...

快速上手套件运行时报错，所有链接无法跳转

如标题描述，npm start启动之后控制台报错：
Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

工程目录下执行npm ls react，出现的结果是：
├─┬ [email protected]
│ └── [email protected]
└── [email protected]

请问该如何解决呢？

npm ERR! peerinvalid The package eslint does not satisfy its siblings' peerDependencies requirements!

在执行npm install时发生错误，前面都正常，请问是什么原因？

gyp info ok
Installed in /home/vagrant/repo/amt-starter-kit/node_modules/gulp-sass/node_modules/node-sass/vendor/linux-ia32-14/binding.node
npm ERR! Linux 3.2.0-23-generic-pae
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.6
npm ERR! npm v2.11.2

npm ERR! shasum check failed for /tmp/npm-1738-2fcaafe5/registry.npmjs.org/weinre/-/weinre-2.0.0-pre-I0Z7U9OV.tgz
npm ERR! Expected: fef8aa223921f7b40bbbbd4c3ed4302f6fd0a813
npm ERR! Actual: 7c7e19082d78b80fe16a646735a9ce234e6ecbb6
npm ERR! From: https://registry.npmjs.org/weinre/-/weinre-2.0.0-pre-I0Z7U9OV.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! /home/vagrant/repo/amt-starter-kit/npm-debug.log

vagrant@precise32:~/repo/amt-starter-kit$ npm install
npm WARN optional dep failed, continuing [email protected]
npm ERR! Linux 3.2.0-23-generic-pae
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v0.12.6
npm ERR! npm v2.11.2
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package eslint does not satisfy its siblings' peerDependencies requirements!

npm ERR! Please include the following file with any support request:
npm ERR! /home/vagrant/repo/amt-starter-kit/npm-debug.log

请问如何在webpack.config.js配置代理服务器??

我在webpack.config.js 文件中导入了
var proxy = require('http-proxy-middleware')
并且在该文件的module.exports内, 设置如下:
devServer: { host: 'localhost', port: '8080', proxy: [ { context: '/micheng-web/*', target: 'http://localhost:8080', } ] },
在组件内ajax 请求如下:
$.ajax({ type: "post", url: "/micheng-web/test/select5", data: {id: 1}, dataType: "json", async: true, success: function (data) { console.log(data); }, error: function (e, m, n) { alert("加载失败！"); } });
页面加载却出错了, 结果如下:
jquery.min.js:4 POST **http://localhost:3000**/micheng-web/test/select5 404 (Not Found)
为什么请求后的地址变成了 我自己的地址了??? 急急急!!! 在线等

support nodejs 6

support nodejs 6?

Apr 11, 2016的依赖版本更新引发控制台报错

4月11号更新的react和react-dom依赖版本从0.14.7替换成最新的15.0.1，会引发控制台报错：
Warning: Element: key is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)
把react版本还原之后错误消失，启用最新版本此处不知是否要更新写法？

I get the issue in win7. please help me. Thanks

页面传值问题是怎么解决的

比如这张图想要传多个参数怎么传的

生产环境如何构建啊

npm build 之后呢，该怎么做，单独打开index.html是一个空白页面

图片文件夹里新建的文件都不可访问，只能访问旧的。

图片文件夹里新建的文件都不可访问，只能访问旧的。

i/logo.png i/logo/favicon.png就这两个自带图片能访问，新加入的图片都不能。

gulp时候，提示error Parsing error: Unexpected token ..

流程是
git clone https://github.com/amazeui/amt-starter-kit.git amt
cd amt
npm install
已经安装node-gyp(v3.0.0+)
完成后gulp ，

不过遇到了3个警告和1个错误
iMac:amt user$ gulp
[14:33:15] Requiring external module babel-core/register
[14:33:16] Using gulpfile ~/Workspace/amt/gulpfile.babel.js
[14:33:16] Starting 'build'...
[14:33:16] Starting 'clean'...
[14:33:16] Starting 'watch'...
[14:33:16] Finished 'watch' after 15 ms
[14:33:16] Finished 'clean' after 29 ms
[14:33:16] Starting 'styles'...
[14:33:16] Starting 'jshint'...
[14:33:16] Starting 'html'...
[14:33:16] Starting 'images'...
[14:33:16] Starting 'copy'...
[14:33:16] Starting 'browserify'...
[14:33:17] Finished 'styles' after 915 ms
[14:33:17]
app/js/app.js
22:8 error Parsing error: Unexpected token ..

app/js/pages/NotFound.js
8:11 warning Missing function expression name func-names

app/js/pages/Page.js
21:27 warning 'params' is missing in props validation react/prop-types
21:34 warning 'params.page' is missing in props validation react/prop-types

✖ 4 problems (1 error, 3 warnings)

[14:33:17] Finished 'jshint' after 927 ms
[14:33:17] html all files 1.2 kB
[14:33:17] Finished 'html' after 832 ms
[14:33:17] images all files 7.93 kB
[14:33:17] Finished 'images' after 875 ms
[14:33:17] copy all files 99.55 kB
[14:33:17] Finished 'copy' after 797 ms
[14:33:20] 2551856 bytes written (3.34 seconds)
[14:33:20] script all files 2.55 MB
[14:33:20] Finished 'browserify' after 3.36 s
[14:33:20] Finished 'build' after 3.89 s
[14:33:20] Starting 'default'...
[14:33:20] Finished 'default' after 28 ms
[AMT] Access URLs:

---

   Local: http://localhost:3004
External: http://192.168.31.143:3004

---

      UI: http://localhost:3005

UI External: http://192.168.31.143:3005

---

[AMT] Serving files from: dist

请指点迷津。

amt-starter-kit 环境跑不起来。

我运行的时候说找不到dist文件夹，然后3000端口的页面上显示 “Cannot GET /”
求解决办法。

NavBar and TabBar.Item 中Link应该换成IndexLink

NavBar and TabBar.Item 中Link to / 应该换成IndexLink。这是因为对于根路由来说，activeStyle和activeClassName会失效，或者说总是生效，因为/会匹配任何子路由。

依赖的项目太多了 能不能少点

安装了几次都不成功 node-gyp这个还得安装个11g的 Visual C++,搞前端开发 弄的这么麻烦