HOW TO PLAY WITH AMAZEUI-TOUCH

ONNNNNNNNNNN

全文的目的是达成使用amazeui-touch进行项目开发，并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。

环境安装与前期准备

我的基础环境：

• Win10
• ATOM ： 编辑器 GitHub出的开源的编辑器
• CMDER ： http://cmder.net/ 命令行工具， windows下一个炒鸡好用的神器。
• Node.js ： https://nodejs.org/en/ 官网直接下载最新版安装即可

基本的配置需求：

• Gulp - 可选的
• webpack: https://webpack.github.io/
• Amazeui-touch
• React

atom插件安装

推荐几个插件：

• react 语法高亮，缩进，Jsx语法识别
• linter 下的 linter-eslint

webpack安装配置

• 基础的css loaders, style-loader, file-loader和其他配置不谈
• Babel： 编译ES6、ES7成ES5 ： https://babeljs.io/
• hot-loader https://github.com/gaearon/react-hot-loader
• webpack-dev-server
• ESLint ： 代码规范，质量检查： https://csspod.com/getting-started-with-eslint/
• Babel ： 根据官方文档配置就好： https://babeljs.io/docs/setup/#installation

React

核心部分当然还是React啦：

• https://facebook.github.io/react/
• https://blog.lwxyfer.com/advanced-react/ 可以解决大部分问题。

核心内容：

• virtual DOM
• JSX
• components
• props
• state
• lifecycle
• event
• undirectional data flow

以前总结过一些内容：advanced React --含大量链接（国内外的教程和文章等），与React相配合的东西太多了 (:dog)

浏览器

• 必须是chrome啦
• React Developer Tools ： 配合react开发

Gulp

Gulp是可选的：下面的链接随便看一个就能学会gulp，反正其实也是再用插件（-|-），详细的配置还是得看每一个插件的配置才行的。

• 官网： http://gulpjs.com/
• 阮一峰大神写的很好：http://javascript.ruanyifeng.com/tool/gulp.html
• https://css-tricks.com/gulp-for-beginners/
• https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js
• https://www.sitepoint.com/introduction-gulp-js/
• https://www.smashingmagazine.com/2014/06/building-with-gulp/
• https://teamtreehouse.com/library/gulp-basics
• https://github.com/nimojs/gulp-book
• http://www.hubwiz.com/course/562089cb1bc20c980538e25b/

browser-sync 配置

https://addyosmani.com/blog/browser-sync/

CSS

touch使用sass编写css，这也是可选的，你可以直接用css，也可以sass。在webpack或者Gulp中为其配置编译即可

• sass官网： http://sass-lang.com/
• sass中文站点：http://sass.bootcss.com/
• sass教程：http://www.w3cplus.com/sassguide/
• sass指南 ： https://github.com/HugoGiraudel/sass-guidelines 本地安装即可
• PPT，可以看下： http://zciwp.github.io/PPT/plugin/markdown/scss_1/#/

过程

巴拉巴拉巴拉巴拉巴的把配置和依赖弄好以后呢，那么就到了项目时间。

咱先看看版本：node --version,官网下的话，一般下的是4.4.7长期支持版本的，更加稳定些嘛。
再看看NPM: npm --version，可以升级到最新版：npm install npm@latest -g。