Merge branch 'feature/vue'

 {
-    "extends": "yoho"
+    "extends": "yoho",
+    "plugins": ["html"]
 }

@@ -33,8 +33,9 @@ app.locals.version = pkg.version;
 // 全局注册library
 yohoLib.global(config);
 
-// 指定libray目录
+// 指定 doraemon, utils 目录
 global.utils = path.resolve('./utils');
+global.doraemon = path.resolve('./doraemon');
 
 const logger = global.yoho.logger;
 
@@ -52,7 +53,7 @@ app.use(favicon(path.join(__dirname, '/public/favicon.ico')));
 app.use(express.static(path.join(__dirname, 'public')));
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({
-    extended: false
+    extended: true
 }));
 app.use(cookieParser());
 
@@ -67,10 +68,10 @@ app.use(session({
         domain: 'yohoblk.com',
         httpOnly: false
     },
-    store: new MemcachedStore({
-        hosts: config.memcache.session,
-        prefix: 'yohoblk_session:'
-    })
+    // store: new MemcachedStore({
+    //     hosts: config.memcache.session,
+    //     prefix: 'yohoblk_session:'
+    // })
 }));
 
 app.use((req, res, next) => {

-<h1>Index</h1>
\ No newline at end of file

 /**
- * 频道页面
+ * 主页
  * @author: Bi Kai<kai.bi@yoho.cn>
  * @date: 2016/05/09
  */
@@ -11,10 +11,13 @@ const helpers = global.yoho.helpers;
 /**
  * 频道选择页
  */
-const channel = {
+const component = {
     index: (req, res, next) => {
-        res.render('index');
+        res.render('index', {
+            module: 'example',
+            page: 'home'
+        });
     }
 };
 
-module.exports = channel;
+module.exports = component;

 /**
- * sub app channel
+ * sub app
  * @author: Bi Kai<kai.bi@yoho.cn>
  * @date: 2016/05/09
  */
 
-var express = require('express'),
-    path = require('path'),
-    hbs = require('express-handlebars');
+const express = require('express');
+const path = require('path');
+const hbs = require('express-handlebars');
 
-var app = express();
+const app = express();
 
 // set view engin
-var doraemon = path.join(__dirname, '../../doraemon/views'); // parent view root
+const doraemon = path.join(__dirname, '../../doraemon/views'); // parent view root
 
 app.on('mount', function(parent) {
     delete parent.locals.settings; // 不继承父 App 的设置

@@ -8,10 +8,10 @@
 
 const expressRouter = require('express').Router;
 const cRoot = './controllers';
-const channel = require(cRoot);
+const component = require(cRoot);
 
 const router = expressRouter();
 
-router.get('/', channel.index); // 首页
+router.get('/', component.index); // 首页
 
 module.exports = router;

+<h1>公有样式示例</h1>
+
+<h2>color</h2>
+统一色号(css 中使用统一变量)
+
+主色调：
+底色:
+红色:
+
+<h2>icon</h2>
+iconfont 新建项目，使用 class 控制图标样式，不要用 unicode
+
+<h2>button</h2>
+三种尺寸，圆角直角，实心空心，选中未选中
+
+<h2>badge</h2>
+一个数字的时候是圆形，数字长的时候圆角长方形，类似跑道
+
+<h2>checkbox</h2>
+单选，多选，开关，选中不选中。
+纯 CSS 实现，不能依赖 JS，原理参考 http://forsigner.com/magic-check/
+
+<h2>tip</h2>
+可以控制显示，隐藏
+支持设置，自动消失
+
+<h2>loading</h2>
+可以控制显示，隐藏
+
+<h2>modal</h2>
+支持 一个按钮，两个按钮，多个按钮
+每个按钮支持自定义事件
+
+<h2>Vue 示例</h2>
+
+<div id="app">
+    <app></app>
+</div>

@@ -70,7 +70,7 @@ module.exports = {
 
 if (isProduction) {
     Object.assign(module.exports, {
-        appName: 'm.yohobuy.com',
+        appName: 'm.yohoblk.com',
         domains: {
             api: 'http://api.yoho.yohoops.org/',
             service: 'http://service.yoho.yohoops.org/'
@@ -87,7 +87,7 @@ if (isProduction) {
     });
 } else if (isTest) {
     Object.assign(module.exports, {
-        appName: 'm.yohobuy.com for test',
+        appName: 'm.yohoblk.com for test',
         domains: {
             api: 'http://testapi.yoho.cn:28078/',
             service: 'http://testservice.yoho.cn:28077/'

@@ -6,6 +6,8 @@
 
 module.exports = app => {
 
-    // 公共服务
-    app.use(require('./apps/channel'));
+    // 组件示例
+    if (app.locals.devEnv) {
+        app.use('/example', require('./apps/example'));
+    }
 };

@@ -9,7 +9,8 @@
 module.exports = () => {
     return (req, res, next) => {
         let yoho = {
-            pageChannel: {}
+            pageChannel: {},
+            yohoTitle: 'Yoho!BLK'
         };
         const channel = req.query.channel || req.cookies._Channel || 'boys';
 

@@ -2,14 +2,13 @@
 <html>
     <head>
         <meta charset="utf-8">
-        <title>{{title}}</title>
+        <title>{{title}} {{#unless noYohoTitle}}{{yohoTitle}}{{/unless}}</title>
         <meta name="keywords" content="{{keywords}}">
         <meta name="description" content="{{description}}">
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
-        <meta http-equiv="cleartype" content="on">
-        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-        <meta content="telephone=no" name="format-detection" />
-        <meta content="email=no" name="format-detection" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black">
+        <meta content="telephone=no" name="format-detection">
+        <meta content="email=no" name="format-detection">
         <link rel="dns-prefetch" href="//cdn.yoho.cn">
         <link rel="dns-prefetch" href="//static.yohobuy.com">
         <script type="text/javascript">
@@ -23,13 +22,7 @@
     </head>
     <body {{#if isPassportPage}}class=passport-body{{/if}} {{#if isStarIndexPage}} class="star-index-bg"{{/if}} {{#if isStarDetailPage}}class="star-class-body"{{/if}}>
         <div class="main-wrap">
-            {{#if systemUpdate}}
-                {{> updata}}
-            {{/if}}
-
-            {{> header}}
             {{{body}}}
-            {{> footer}}
         </div>
 
         {{#wechatShare}}

@@ -3,15 +3,19 @@ const path = require('path');
 
 const changeFiles = {
     js: shelljs.exec('git diff --cached --name-only --diff-filter=ACM | grep .js$', {silent: true}).stdout,
-    css: shelljs.exec('git diff --cached --name-only --diff-filter=ACM | grep .css$', {silent: true}).stdout
+    css: shelljs.exec('git diff --cached --name-only --diff-filter=ACM | grep .css$', {silent: true}).stdout,
+    vue: shelljs.exec('git diff --cached --name-only --diff-filter=ACM | grep .vue$', {silent: true}).stdout,
 };
+
 const lintPath = {
     js: path.resolve('./node_modules/.bin/eslint'),
     css: path.resolve('./node_modules/.bin/stylelint')
 };
 const lintResult = {
     js: {},
-    css: {}
+    css: {},
+    vueScript: {},
+    vueStyle: {}
 };
 
 const ext = process.platform === 'win32' ? '.cmd' : ''; // Windows 平台需要加后缀
@@ -31,6 +35,14 @@ if (changeFiles.css) {
     lintResult.css = shelljs.exec(`${lintPath.css}${ext} --config .stylelintrc ${changeFiles.css}`);
 }
 
-if (lintResult.js.code || lintResult.css.code) {
-    process.exit(lintResult.js.code || lintResult.css.code); // eslint-disable-line
+if (changeFiles.vue) {
+    changeFiles.vue = changeFiles.vue.replace(/\n/g, ' ');
+    lintResult.vueScript = shelljs.exec(`${lintPath.js}${ext} -c .eslintrc --cache --fix ${changeFiles.vue}`);
+    lintResult.vueStyle = shelljs.exec(`${lintPath.css}${ext} --extract --config .stylelintrc ${changeFiles.vue}`);
+}
+
+const errorCode = lintResult.js.code || lintResult.css.code || lintResult.vueScript.code || lintResult.vueStyle.code;
+
+if (errorCode) {
+    process.exit(errorCode); // eslint-disable-line
 }

@@ -5,7 +5,7 @@
   "description": "A New Yohobuy Project With Express",
   "repository": {
     "type": "git",
-    "url": "http://git.dev.yoho.cn/web/yohoblk-wap.git"
+    "url": "http://git.yoho.cn/fe/yohoblk-wap.git"
   },
   "scripts": {
     "start": "node app.js",
@@ -14,9 +14,8 @@
     "debug": "DEBUG=\"express:*\" nodemon -e js,hbs -i public/ app.js",
     "lint-js": "eslint -c .eslintrc --cache --fix .",
     "lint-css": "stylelint --config .stylelintrc public/scss/**/*.css",
-    "precommit": "node lint.js",
-    "test": "NODE_ENV=test nyc ./node_modules/.bin/ava",
-    "posttest": "nyc report --reporter=html"
+    "lint-vue": "stylelint --extract --config .stylelintrc public/vue/**/*.vue; eslint -c .eslintrc --cache --fix public/vue/**/*.vue",
+    "precommit": "node lint.js"
   },
   "license": "MIT",
   "dependencies": {
@@ -34,23 +33,21 @@
     "moment": "^2.14.1",
     "morgan": "^1.7.0",
     "oneapm": "^1.2.20",
-    "passport": "^0.3.2",
-    "passport-local": "^1.0.0",
-    "passport-qq": "0.0.3",
-    "passport-sina": "^0.1.0",
-    "passport-strategy": "^1.0.0",
-    "passport-weixin": "^0.1.0",
     "request-promise": "^3.0.0",
     "serve-favicon": "^2.3.0",
     "uuid": "^2.0.2",
     "winston": "^2.2.0",
     "winston-daily-rotate-file": "^1.1.4",
-    "yoho-node-lib": "0.0.17"
+    "yoho-node-lib": "0.0.21"
   },
   "devDependencies": {
     "autoprefixer": "^6.3.7",
+    "babel-core": "^6.10.4",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.9.0",
     "eslint": "^3.0.1",
     "eslint-config-yoho": "^1.0.1",
+    "eslint-plugin-html": "^1.5.1",
     "gulp": "^3.9.1",
     "gulp-cssnano": "^2.1.2",
     "gulp-ftp": "^1.1.0",
@@ -72,17 +69,23 @@
     "postcss-use": "^2.2.0",
     "precss": "^1.4.0",
     "shelljs": "^0.7.0",
+    "style-loader": "^0.13.1",
     "stylelint": "^6.9.0",
-    "stylelint-config-yoho": "^1.2.3",
+    "stylelint-config-yoho": "1.2.5",
+    "vue-loader": "^8.5.3",
     "webpack": "^1.13.1",
     "webpack-dev-server": "^1.14.1",
     "webpack-stream": "^3.1.0",
+    "yoho-cookie": "^1.2.0",
     "yoho-fastclick": "^1.0.6",
     "yoho-iscroll": "^5.2.0",
     "yoho-jquery": "^2.2.4",
     "yoho-jquery-lazyload": "^1.9.7",
-    "yoho-mlellipsis": "0.0.3",
-    "yoho-node-lib": "0.0.17",
-    "yoho-swiper": "^3.3.1"
+    "yoho-qs": "^1.0.1",
+    "yoho-swiper": "^3.3.1",
+    "yoho-vue": "^1.0.26",
+    "yoho-vue-infinite-scroll": "^0.2.3",
+    "yoho-vue-lazyload": "^0.4.3",
+    "yoho-vue-swipe": "^0.2.6"
   }
 }

@@ -178,7 +178,15 @@ gulp.task('postcss', ['assets'], () => {
 // webpack dev server
 gulp.task('webpack-dev-server', () => {
     var devConfig = Object.assign({}, webpackConfig, {
-        debug: true
+        debug: true,
+        devtool: '#inline-source-map',
+        vue: {
+            postcss: postcssPlugin(env.dev),
+            autoprefixer: false,
+            loaders: {
+                css: 'vue-style!css?-url'
+            }
+        }
     });
 
     new WebpackDevServer(webpack(devConfig), {
@@ -201,14 +209,30 @@ gulp.task('webpack-dev-server', () => {
 
 // webpack compile in pro
 gulp.task('webpack', (done) => {
-    var proConfig = Object.assign({}, webpackConfig);
+    const proConfig = Object.assign({}, webpackConfig, {
+        vue: {
+            postcss: postcssPlugin(env.pro),
+            autoprefixer: false,
+            loaders: {
+                css: 'vue-style!css?-url'
+            }
+        }
+    });
 
     proConfig.output.path = dist.js;
+
+    // TODO: 生产环境加载的插件独立出来
+    proConfig.plugins.push(new webpack.DefinePlugin({
+        'process.env': {
+            NODE_ENV: '"production"'
+        }
+    }));
     proConfig.plugins.push(new webpack.optimize.UglifyJsPlugin({
         compress: {
             warnings: false
         }
     }));
+
     webpack(proConfig, (err, stats) => {
         if (err) {
             throw new gutil.PluginError('webpack', err);

+var Vue = require('yoho-vue');
+
+var app = require('example/home.vue');
+
+var vm = new Vue({
+    el: '#app',
+    components: {
+        app: app
+    }
+});
+
+console.log(vm);
+
+/* eslint-disable */
+// 私有包测试
+var qs = require('yoho-qs');
+console.log(qs);
+
+var parse = require('yoho-qs/parse'); // 提供解析函数
+console.log(parse('q=w&e=r')); // { q: 'w', e: 'r' }
+
+var cookie = require('yoho-cookie');
+
+console.log(cookie.all());
+
+var test = {
+    data() {
+        return {
+            message: 'test',
+            message2: 'test2'
+        };
+    }
+};
+/* eslint-enable */

+/**
+ * 全局公有方法
+ */
+
+/**
+ * 请不要把原有 yohobuy 项目的代码复制过来！
+ * 请不要把原有 yohobuy 项目的代码复制过来！
+ * 请不要把原有 yohobuy 项目的代码复制过来！
+ *
+ * 所有与业务无关，复用多的代码尽量模块化
+ * 除非万不得已，不要声明全局变量
+ * 这一块的代码很少
+ *
+ * 1. cookie 操作请使用 yoho-cookie 文档:https://github.com/florian/cookie.js
+ * 2. 查询字符串读取 请使用 yoho-qs
+ */

+/**
+ * YOHO-SDK
+ *
+ * 与原生 APP 交互的代码
+ * 所有函数要做降级处理
+ * 假如不是 YOHO App，在浏览器实现对应的功能
+ * 浏览器不支持的功能，给出提示，控制台不能报错，不影响后续代码执行
+ *
+ * 希望能与 微信 JS-SDK 一样方便
+ */
+
+var yoho = {
+    isApp: /yoho/.test((navigator.userAgent || '').toLowerCase()),
+    goLogin: function() {
+        if (this.isApp) {
+            // ...
+        } else {
+            location.href = '';
+        }
+    }
+};
+
+module.exports = yoho;

 @font-face {
     font-family: "iconfont";
-    src: resolve('iconfont.eot'); /* IE9 */
-    src: resolve('iconfont.eot?#iefix') format('embedded-opentype'), resolve('iconfont.woff') format('woff'), resolve('iconfont.ttf') format('truetype'), resolve('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
+    src: resolve("iconfont.eot"); /* IE9 */
+    src: resolve("iconfont.eot?#iefix") format("embedded-opentype"), resolve("iconfont.woff") format("woff"), resolve("iconfont.ttf") format("truetype"), resolve("iconfont.svg#iconfont") format("svg"); /* iOS 4.1- */
 }
 
 .iconfont {

 @import "reset";
-@import "font";
 @import "common";
+@import "color";
+@import "icon";
+@import "tip";
+@import "modal";
 @import "swiper";

+<template>
+    <div class="test">
+        {{message}}
+    </div>
+    <div class="test2">
+        {{message2}}
+    </div>
+</template>
+
+<script>
+    var s = 1; // 测试代码检查
+
+    console.log(1);
+
+    module.exports = {
+        data() {
+            return {
+                message: 'test',
+                message2: 'test2'
+            };
+        }
+    };
+
+</script>
+
+<style>
+    /* 雪碧图测试 */
+    .test {
+        color: green;
+        background: url("/channel/boys.png");
+    }
+
+    /* 图片测试 */
+    .test2 {
+        color: blue;
+        background: resolve("channel/boys.png");
+    }
+
+    .testError {
+        background: white;
+    }
+</style>

@@ -26,8 +26,13 @@ shelljs.ls(path.join(__dirname, 'js/**/*.page.js')).forEach((f) => {
         'yoho-fastclick',
         'yoho-iscroll',
         'yoho-jquery-lazyload',
-        'yoho-mlellipsis',
-        'yoho-swiper'
+        'yoho-swiper',
+        'yoho-qs',
+        'yoho-cookie',
+        'yoho-vue',
+        'yoho-vue-lazyload',
+        'yoho-vue-swipe',
+        'yoho-vue-infinite-scroll'
     ];
 });
 
@@ -37,6 +42,22 @@ module.exports = {
         path: path.join(__dirname, 'bundle'), // absolute path
         filename: '[name].js'
     },
+    module: {
+        loaders: [{
+            test: /\.vue$/,
+            loader: 'vue'
+        }, {
+            test: /\.js$/,
+            exclude: /node_modules/,
+            loader: 'babel?presets[]=es2015&plugins[]=transform-runtime&comments=false'
+        }, {
+            test: /\.css$/,
+            loader: 'style!css?-url'
+        }]
+    },
+    resolve: {
+        modulesDirectories: ['node_modules', './vue']
+    },
     plugins: [
         new webpack.optimize.OccurenceOrderPlugin(),
         new webpack.optimize.CommonsChunkPlugin({

 'use strict';
-require('../app');
 const _ = require('lodash');
 const camelCase = global.yoho.camelCase;
 const helpers = global.yoho.helpers;
@@ -85,7 +84,8 @@ exports.processProductList = (list, options) => {
         height: 388,
         isApp: false,
         showPoint: true,
-        gender: '2,3'
+        gender: '2,3',
+        yhChannel: ''
     }, options);
     list = camelCase(list);
 
@@ -122,7 +122,7 @@ exports.processProductList = (list, options) => {
 
         // 如果还未赋值，则取第一个skc产品的默认图片
         if (!flag) {
-            product.defaultImages = _procProductImg(product.goodsList[0], product.gender, options.yh_channel);
+            product.defaultImages = _procProductImg(product.goodsList[0], product.gender, options.yhChannel);
         }
 
         product.isSoonSoldOut = product.isSoonSoldOut === 'Y';
@@ -253,7 +253,7 @@ exports.processFilter = (list, options) => {
             subs: []
         };
 
-        if (key === 'group_sort' || !filtersType[key]) {
+        if (key === 'groupSort' || !filtersType[key]) {
             return;
         }