房源发布

房源发布的前端组件化工程
以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 [email protected]: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）应用中去，方便使用
修改历史管理？

自动化测试

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