# Rocket-Template-Project

**Repository Path**: zhyinfo/Rocket-Template-Project

## Basic Information

- **Project Name**: Rocket-Template-Project
- **Description**: No description available
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2016-02-26
- **Last Updated**: 2024-12-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 本应用为静态文件编制模板
本文件`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


[markdown-doc]: http://wowubuntu.com/markdown
[nodejs-site]: http://nodejs.org
[amazeui-site]: http://amazeui.org/getting-started
[less-site]: http://less.bootcss.com
[sublime-text-site]: http://www.sublimetext.com/3
[sublime-text-key]: http://www.douban.com/note/362268947
[sublime-text-package-control-site]: https://sublime.wbond.net/installation
[sublime-text-emmet-site]: http://emmet.io
[sublime-text-enhancements-site]: https://github.com/titoBouzout/SideBarEnhancements/tree/st3
[sublime-text-plugin]:http://www.oschina.net/translate/20-powerful-sublimetext-plugins
[gulp-site]: http://www.gulpjs.com.cn
[vim-spf13-site]: http://vim.spf13.com
[browsersync-site]:http://www.browsersync.cn
[cnpm-site]:http://npm.taobao.org
[atom-site]:https://atom.io