本应用为静态文件编制模板

本文件readme.md使用Markdown格式，请参阅:markdown-doc

本文件介绍了前端开发的主要流程、方法与工具，以及本项目的主要文件与文件夹介绍

如何开始？

1. 安装NPM

Windows

windows下要先安装NodeJS，NodeJS安装是比较方便的（v0.6.0版本之后，支持windows native），只需要登陆官网（nodejs-site），便可以看到首页的“INSTALL”按钮，直接点击就会自动下载安装了。

安装过程基本直接“NEXT”就可以了。（windows的安装msi文件在过程中会直接添加path的系统变量，变量值是你的安装路径，例如“C:\Program Files\nodejs”）。

安装完成后可以使用cmd（win+r然后输入cmd进入）测试下是否安装成功。方法：在cmd下输入node -v，出现下图版本提示就是完成了NodeJS的安装。

npm的安装。由于新版的NodeJS已经集成了npm，所以之前npm也一并安装好了。同样可以使用cmd命令行输入npm -v来测试是否成功安装。

MAC

Ubuntu(Linux)

注意，安装cnpm替换npm

npm服务器架设在国外，因此速度较慢，因此可以使用cnpm（淘宝架设的国内代理），请参阅cnpm-site

安装方法：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org

注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重写打开，安装完直接使用有可能会出现错误；

cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm

2. 安装gulp等组件

本应用使用了gulp组件，不熟悉gulp的使用没关系，按步骤完成即可，更详细请参阅gulp-site

同时本应用还使用了若干gulp插件，分别是：

• gulp-less 编译less文件
• gulp-minify-css 压缩css
• gulp-uglify 压缩js
• browsersync 开发用服务器，请参阅browsersync-site

在项目文件夹打开命令行，输入cnpm install，等待片刻，就会自动安装所有组件至项目位置下的node_modules。

3. 安装Sublime text

Sublime Text是极其优秀的文本编辑器sublime-text-site，它有丰富的操作工具与方法，且有丰富的插件体系。

1. 熟悉安装与基本使用

2. 熟悉操作使用、菜单与快捷键

快捷键能背下来最好，不过其实在使用过程中自然会加深使用记忆，甚至肌肉记忆。请参阅：sublime-text-key

3. 安装与插件(以下罗列一些主要插件，更多优秀插件可以通过网络搜索安装)。请参阅sublime-text-plugin

3.1 Package Control

通俗易懂地说，这个是你在完成安装SublimeText后必须安装的东西。你问为什么？因为有了这个特殊的“插件包”，你可以很容易地安装、升级、删除，甚至非常方便地查看您已经安装在SublimeText中的包或插件的列表。它通过菜单和对应的行为使这些过程变得非常容易和有组织。请参阅sublime-text-package-control-site

在Sublime Text编辑器界面下，按快捷键 Ctrl + (Windows/Linux), control +，复制并在控制台输入以下代码，并按回车执行：

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

3.2 Emmet

Emmet（前身就是以前大名鼎鼎的Zen Coding）是一个可以让你更快更高效地编写HTML和CSS，节省你大量时间的插件。请参阅sublime-text-emmet-site

怎么使用？你只需按约定的缩写形式书写而不用写整个代码，然后按“扩展”键，这些缩写就会自动扩展为对应的代码内容。

比如，你只需要输入 ((h4>a[rel=external])+p>img[width=500 height=320])*12 ，然后它会被扩展转换成12个列表项和紧随其后的图像。然后你就可以在此基础上再填写内容，就这么简单。

3.3 SublimeEnhancements

sublime-text-enhancements-site

4. 安装Chrome

各文件与文件夹说明

assets文件夹

开发中的js与less会编译到该文件夹，因此在开发中的网页，请引用这个文件夹下的资源。

• 其中，img，存放图片用
• 其中，js，存放js文件
• 其中，style，存放css文件

如使用第三方组件，直接在assets文件夹下新建一个第三方组件文件夹，单独使用

source

开发中的js与less文件存放位置，会自动编译至assets文件夹。

• 其中，js，存放开发中的js文件
• 其中，less，存放开发中的less文件

default

PC网站网页文件

mobile

移动网站网页文件

references

相于文档与说明。

• 其中，amazeui-manual为amazeui的文档，方便离线使用
• 其中，amazeui-template.html，为amazeui的模板文件。

8. 其它文件, 可以不用理会

• node_modules npm所安装的组件位置，可以不用理会
• package.json npm项目文件
• gulpfile.js gulp组件主文件，gulp通过读取该文件进行相应操作
• .gitignore git上传时忽略的文件或文件夹

使用框架

LESS

less-site

AMAZEUI

amazeui-site

Jquery

工作

按照步骤，所有组件安装就绪后，就可以开始工作。

• 在项目文件夹打开命令行，输入gulp，并按回车执行。browser-syn执行，打开Chrome，输入相应地址（一般地址为）http://localhost:3000。
• 编辑相应文件，保存后，浏览器自动刷新。enjoy it!

浏览器前端开发，需要注意：

1. 浏览器兼容
2. 调试（Chrome Dev Tool）

相关工具

Sublime Text 3

见之前部分关于Sublime Text 3的说明。Sublime Text并不是免费或开源软件，当然你也不必寻找破解版，因此可以免费使用，除了会不经常跳出窗口让你购买（直接点cancle即可）。极其推荐！

Atom

Atom由github出品，是与Sublime Text极其相似的编辑器，甚至大部分插件都能共用。重要的是Atom是免费开源产品，可以自由使用，请参阅atom-site。推荐！

Chrome

WebStorm/PhpStorm

JetBrains公司优秀的前端开发IDE。优点是全能，省事。缺点是要钱！新手推荐，熟手不推荐，毕竟有license限制。

VIM

鼎鼎大名的老牌编辑器，如果你有兴趣，可以参考一下vim-spf13-site。

前端开发的知识获取与相关社区

git

http://git-scm.com