# 前端开发搭建
---

### I. 技术掌握

**注：APP项目采用Ionic+Angular1.0+Cordova进行开发，开发前请先熟悉下对应的语法**

  * ionic 查看文档 http://www.runoob.com/ionic/ionic-tutorial.html
**注：**部分组件介绍不正确，具体查看官网

  * angular 查看文档 http://www.runoob.com/angularjs/angularjs-tutorial.html
**注：**建议查看官网

  * Cordova 插件使用 http://ngcordova.com/docs/plugins/
**注：**插件具体用法参照[github](https://github.com/),部分插件可能会出现版本兼容问题


### II. 环境搭建


*  1.0`git clone`下载对应的源码
```
│  .bowerrc
│  .editorconfig
│  .gitignore (git忽略文件)
│  bower.json (bower配置)
│  gulpfile.js (gulp集成工具配置)
│  ionic.config.json (ionic项目配置)
│  ionic.project
│  package.json
│  README.md (项目README，请在此处写上项目开发的注意信息，方便团队协同)
├─app
│  │  app.js (app核心js)
│  ├─config (配置文件)   
│  ├─img (图片资源)         
│  ├─pages (功能页面)
│  │  ├─applications (主页功能)              
│  │  ├─charts (报表)    
│  │  ├─login (登录页)
│  │  ├─myInfo (我的)   
│  │  ├─tab (tab) 
│  │  └─tools (工具)           
│  ├─scripts (公用js)
│  ├─scss (公用sscc)    
│  └─theme
│          app.core.scss (页面全部sscc)         
├─hooks         
├─plugins(插件)             
├─publish          
├─res                 
├─resources(图表和启动页)    
└─www
        index.html
``` 
*  2.0 搭建环境
  * 项目根目录下执行`cnpm install`，出现以下内容表示下载成功
  
    ![](/picture/cnpm-install.png)
    
  此时文件夹中会新增`node_modules`文件夹 此文件夹下包含node.js的资源文件
    
  * 项目根目录下执行`bower install`，出现以下内容表示下载成功
  
    ![](/picture/bower-install.png)
    
  此时`app`文件夹中会新增`lib`文件夹，里面包函了本次项目使用的资源
  
  * 项目根目录下执行`gulp build-dev`，构建开发环境(项目代码会进行合拼压缩进入`www`文件夹下)
  **注:** gulp命令的使用请查考 [gulpfile.js](/ionic/gulpjs.md)
  
    ![](/picture/gulp-build-dev2.png)
    
  * 项目根目录下执行`ionic serve`运行代码 出现一下则表示成功
  
    ![](/picture/ionic-serve.png)
	
  浏览器端访问`http://localhost:8100/#/login`即可