# 房源发布

> 房源发布的前端组件化工程  
> 以`npm`包的形式发布和管理( 业务中`npm install post-app-v2 --save`（安装）或者`npm update post-app-v2 --save`（更新） )  
> 主要包括两个部分：  
> 1. BaseUI，位于`dist/base-ui.css`，为样式库。更新频率低，作为独立资源放在CDN以利用app缓存  
> 2. VueComponent，位于`dist/vue-component.js`，为Vue组件库。`是此npm包的导出文件`，在业务中去依赖  

## setup

1. 环境：  
> node ^7.4.0  
> npm ^2.5.11  

2. 安装
> git clone git@gitlab.58corp.com:fangfe/post-app-house-v2.git  
> npm install  
> npm run `init`

3. 配置目录的结构

> 执行`npm run init`后，如果你尚未初始化过配置，终端会报错提示你去做初始化配置：  
> 接下来以 下面的目录树 为例，对`config/dir.js`文件进行配置：

```
├── post-app （==========>模版仓库）
│   ├── dev.properties
│   ├── hbg_post_app.iml
│   ├── list.conf
│   ├── pom.xml
│   ├── src
│   │   └── main
│   └── wfconfig
│       ├── offline
│       └── online
├── post-app-house-v2 （==========>本仓库）
│   ├── -
│   ├── README.md
│   ├── bin
│   ├── doc
│   │   └── media
│   └── package.json
├── svn-repo （==========>存放svn仓库的目录）
│   ├── code
│   │   └── jscode
│   ├── olympia
│   │   ├── branches
│   │   ├── tags
│   │   └── trunk
│   ├── prod （==========> 用于上线的prod目录）
│   │   ├── olympia
│   │   └── pc
│   │       ├── pic2.58.com
│   │       └── static.58.com
│   │           └── fangapp
│   │               └── css
│   │                   └── online （==========> 用于上线的css目录）
│   │               └── js
│   │                   ├── conf
│   │                   └── online （==========> 用于上线的js目录）
│   └── template
│       └── mlist-house_4-0-58_BRANCH
└── ...

P.S. 104存放静态文件的目录:
ftp://192.168.185.104/static.58.com/fangapp/...   
和svn的(prod/pc/static.58.com/fangapp/...)目录结构是一致的，所以这里不用理会，直接采用这个默认的一一对应的规则就好了
```

> 所以对于`以上的目录结构`，`config/dir.js`的内容应该写成(`**处的内容是重点`)：

```
module.exports = {
    "dir": {
    
        // **【prod】的位置，别忘了结尾的'／'
        "prodRelotiveToPostapp": "../../repo_58/svn-repo/prod/", // **
        
        // ** 各资源(相对于prod/)的子目录：
        "jsSubdir": "pc/static.58.com/fangapp/js/online/v2", // **
        "cssSubdir": "pc/static.58.com/fangapp/css/online/v2", // **
        "iconfontSubdir": "", // iconfont的子目录
        "imageSubdir": ""     // image的子目录
    },
    
    // 104测试服务器的配置
    "testServer": {
        "server": "192.168.185.104",
        "userName": "qatest",
        "passwd": "ftp@fe" // 错误的话考虑使用 ftp\@fe 代替？？
    }
}
```

4. 映射域名

> 设置host：  

```
## for localhost-dev
127.0.0.1       postapp.58.com
```

## 开发方式

### BaseUI的开发：

> 1. 在终端执行（开启打包服务）：

```
$ npm run pack-bu-scss 
```

> 2. 新开终端，执行`node app.js`，启动http服务，访问其提示的url查看页面  
> `app.js`会将`demo/[非__开头的].ejs`文件名作为路由  

> 3. 开发base-ui模块。其目录结构如下：

```
├── README.md （ ------> 正在看的就是我 ）
├── app.js    （ ------> http服务 ）
├── base-ui     （ ------> base-ui的模块 ）
│   ├── btn.scss
│   ├── functions.scss
│   ├── index.js
│   ├── index.scss
│   ├── label.scss
│   ├── list.scss
│   ├── mixins.scss
│   ├── reset.scss
│   ├── 。。。
├── bin     
│   ├── init.js
│   ├── 。。。
├── config
│   └── dir.js
├── demo    （ ------> 页面的模版，与base-ui目录内的UI模块一一对应 ）
│   ├── __footer.ejs
│   ├── __header.ejs
│   ├── __html_head.ejs
│   ├── __layout.ejs
│   ├── btn.ejs
│   ├── index.ejs
│   ├── label.ejs
│   ├── list.ejs
│   ├── 。。。
├── dist    （ ------> 最终打包得到的文件 ）
│   ├── base-ui.css
│   ├── demo.css
│   ├── demo.scss
│   ├── 。。。
├── gulpfile.js
├── package.json
├── 。。。
```

### VueComponent的开发：

1. 目录结构

> 此仓库开发并导出`供业务使用的vue组件`  
> 仓库内的`vue-app`是一个完整由`vue-组件`开发的`vue-spa`，包含所有的组件使用示例（即业务场景）  
> `vue-app`的结构如下（`**`是重点）：  

```
├── App.vue
├── assets
├── components // ** 被导出的供业务使用的vue组件
│   ├── btn.vue
│   ├── label.vue
│   ├── list.vue
│   ├── slt.vue
│   └── title.vue
├── main.js
└── router
    └── index.js
```

2. 开发

> 在`vue-app/components`里【添加、删除、修改】组件  
> 更新`App.vue`应用，把【新组件、组件的修改】更新到（demo）应用中去，方便使用  
> 修改历史管理？  

## 自动化测试

> 自动化测试保障修改组件后不会造成额外的影响。。。