add button

.editorconfig

@@ -16,5 +16,8 @@ indent_size = 2
 [*.vue]
 indent_size = 2
 
-[*.scss]
+[*.pcss]
-indent_size = 4
+indent_size = 2
+
+[Makefile]
+indent_style = tab

Makefile

@@ -10,4 +10,5 @@ default:
 init:
 	node build/bin/init.js $(filter-out $@,$(MAKECMDGOALS))
 
-
+dev:
+	npm run docs

build/bin/build-entry.js

@@ -8,6 +8,14 @@ var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
 var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
 var ISNTALL_COMPONENT_TEMPLATE = '  Vue.component({{name}}.name, {{name}});';
 var MAIN_TEMPLATE = `{{include}}
+import 'es6-promise/auto';
+import axios from 'axios';
+import foreach from 'lodash/foreach';
+import filter from 'lodash/filter';
+import find from 'lodash/find';
+import map from 'lodash/map';
+// zenui
+import '../packages/zenui/src/index.pcss';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -23,6 +31,13 @@ if (typeof window !== 'undefined' && window.Vue) {
 module.exports = {
   install,
   version: '{{version}}',
+  axios,
+  _: {
+    foreach,
+    filter,
+    find,
+    map
+  },
 {{list}}
 };
 `;

build/utils/postcss_pipe.js

@@ -0,0 +1,66 @@
+/**
+ * Created by tsxuehu on 17/1/4.
+ */
+var config = {
+
+    "bem": {
+        "shortcuts": {"component": "c", "modifier": "m", "descendent": "d"},
+        "separators": {"descendent": "-", "modifier": "--"}
+    }/*,
+    "autoprefixer": {"browsers": ["ie > 8", "last 2 versions"]},
+    "rem": {"browsers": ["ie > 8", "last 2 versions"]}*/
+};
+// https://github.com/trysound/postcss-easy-import
+var partialImport = require("postcss-easy-import");
+
+// 这不是bem，虽然名字叫bem，其实它是suit
+// https://github.com/saladcss/saladcss-bem
+var bem = require("saladcss-bem")(config.bem);
+
+// https://github.com/jonathantneal/precss
+var precss = require("precss")();
+
+// https://github.com/adam-h/postcss-sass-color-functions
+var sassColor = require("postcss-sass-color-functions")();
+
+// eleme的组件---
+// https://npmjs.com/package/postcss-css-reset
+// http://elemefe.github.io/postcss-salad/
+var reset = require("postcss-css-reset")();
+
+// eleme的组件---
+// https://npmjs.com/package/postcss-utils
+// http://elemefe.github.io/postcss-salad/
+var utils = require("postcss-utils")();
+
+// https://github.com/postcss/postcss-calc
+var calc = require("postcss-calc")();
+
+// https://github.com/maximkoretskiy/postcss-initial
+var initial = require("postcss-initial")();
+
+// https://github.com/trysound/postcss-inline-svg
+var inlineSvg = require("postcss-inline-svg")();
+
+// https://github.com/jonathantneal/postcss-short
+var short = require("postcss-short")();
+
+// eleme的组件---
+// https://github.com/baiyaaaaa/postcss-shape
+// http://elemefe.github.io/postcss-salad/
+var shape = require("postcss-shape")();
+
+// https://github.com/robwierzbowski/node-pixrem
+var rem = require("pixrem")();
+
+// https://github.com/postcss/autoprefixer
+var autoprefixer = require("autoprefixer")();
+
+// https://github.com/jo-asakura/postcss-neat
+var neat = require("postcss-neat")();
+
+module.exports = function (webpack) {
+  // 顺序很重要
+  return [partialImport({ addDependencyTo: webpack }), bem, precss, sassColor, reset,
+      utils, calc, initial, inlineSvg, short, shape, rem, autoprefixer, neat];
+};

build/webpack.config.js

@@ -1,8 +1,11 @@
-var webpack = require('webpack')
+var webpack = require('webpack');
-var path = require('path')
+var path = require('path');
-var slugify = require('transliteration').slugify
+var slugify = require('transliteration').slugify;
-var md = require('markdown-it')()
+var md = require('markdown-it')();
-var striptags = require('./strip-tags')
+var striptags = require('./strip-tags');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var version = require('../package.json').version;
+var getPoastcssPlugin = require('./utils/postcss_pipe');
 
 function convert(str) {
   str = str.replace(/(&#x)(\w{4});/gi, function($0) {
@@ -29,108 +32,50 @@ module.exports = {
     filename: '[name].js'
   },
   resolve: {
-    root: path.resolve('./'),
+    modules: [
-    extensions: ['', '.js', '.vue'],
+      path.join(__dirname, '../node_modules'),
-    fallback: [path.join(__dirname, '../node_modules')]
+      'node_modules'
+    ],
+    extensions: ['.js', '.vue', '.pcss'],
+    alias: {
+      'vue$': 'vue/dist/vue.runtime.common.js',
+      'oxygen': path.join(__dirname, '..'),
+      'src': path.join(__dirname, '../src')
+    }
   },
   module: {
-    preLoaders: [
-      {
-        test: /\.vue$/,
-        loader: 'eslint',
-        exclude: /node_modules/
-      },
-      {
-        test: /\.js$/,
-        loader: 'eslint',
-        exclude: /node_modules/
-      }
-    ],
     loaders: [
       {
         test: /\.vue$/,
-        loader: 'vue'
+        loader: 'vue-loader'
       },
       {
         test: /\.js$/,
         exclude: /node_modules|vue\/src|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
-        loader: 'babel'
+        loader: 'babel-loader'
       },
       {
         test: /\.css$/,
         loader: 'style-loader!css-loader?root=./docs/'
       },
       {
-        test: /\.scss$/,
+        test: /\.pcss$/,
-        loader: 'style!css!sass'
+        loader: 'style-loader!css-loader!postcss-loader'
       },
       {
-        test: /\.less$/, 
+        test: /\.less$/,
         loader: 'style-loader!css-loader!less-loader'
       },
       {
         test: /\.md/,
         loader: 'vue-markdown-loader'
       },
-      {
-        test: /\.json$/,
-        loader: 'json'
-      },
       {
         test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
-        loader: 'url'
+        loader: 'url-loader'
       }
     ]
   },
-  babel: {
-    presets: ['es2015'],
-    plugins: ['transform-runtime']
-  },
-  eslint: {
-    formatter: require('eslint-friendly-formatter')
-  },
-  vueMarkdown: {
-    use: [
-      [require('markdown-it-anchor'), {
-        level: 2,
-        slugify: slugify,
-        permalink: true,
-        permalinkBefore: true
-      }],
-      [require('markdown-it-container'), 'demo', {
-        validate: function(params) {
-          return params.trim().match(/^demo\s*(.*)$/);
-        },
-
-        render: function(tokens, idx) {
-          var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
-          if (tokens[idx].nesting === 1) {
-            var description = (m && m.length > 1) ? m[1] : '';
-            var content = tokens[idx + 1].content;
-            var html = convert(striptags.strip(content, ['script', 'style']));
-            var script = striptags.fetch(content, 'script');
-            var style = striptags.fetch(content, 'style');
-            var descriptionHTML = description
-              ? md.render(description)
-              : '';
-
-            return `<demo-block class="demo-box">
-                      <div class="source" slot="source">${html}</div>
-                      ${descriptionHTML}
-                      <div class="highlight" slot="highlight">`;
-          }
-          return '</div></demo-block>\n';
-        }
-      }]
-    ],
-    preprocess: function(MarkdownIt, source) {
-      MarkdownIt.renderer.rules.table_open = function() {
-        return '<table class="table">';
-      };
-      MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
-      return source;
-    }
-  },
   devtool: 'source-map'
 };
 
@@ -146,6 +91,79 @@ if (process.env.NODE_ENV === 'production') {
       compress: {
         warnings: false
       }
+    }),
+    new ExtractTextPlugin(`yzvue_base_${version}_min.css`),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {warnings: false},
+      output: {comments: false},
+      sourceMap: false
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
     })
   ];
-}
+} else {
+  // development 环境不会抽css - -
+  module.exports.plugins = [
+    new ExtractTextPlugin('style.dev.css'),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+      options: {
+        postcss: getPoastcssPlugin,
+        babel: {
+          presets: ['es2015'],
+          plugins: ['transform-runtime']
+        },
+        eslint: {
+          formatter: require('eslint-friendly-formatter')
+        },
+        vue: {
+          autoprefixer: false,
+          postcss: getPoastcssPlugin
+        },
+        vueMarkdown: {
+          use: [
+            [require('markdown-it-anchor'), {
+              level: 2,
+              slugify: slugify,
+              permalink: true,
+              permalinkBefore: true
+            }],
+            [require('markdown-it-container'), 'demo', {
+              validate: function(params) {
+                return params.trim().match(/^demo\s*(.*)$/);
+              },
+
+              render: function(tokens, idx) {
+                var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
+                if (tokens[idx].nesting === 1) {
+                  var description = (m && m.length > 1) ? m[1] : '';
+                  var content = tokens[idx + 1].content;
+                  var html = convert(striptags.strip(content, ['script', 'style']));
+                  var script = striptags.fetch(content, 'script');
+                  var style = striptags.fetch(content, 'style');
+                  var descriptionHTML = description
+                    ? md.render(description)
+                    : '';
+
+                  return `<demo-block class="demo-box">
+                            <div class="source" slot="source">${html}</div>
+                            ${descriptionHTML}
+                            <div class="highlight" slot="highlight">`;
+                }
+                return '</div></demo-block>\n';
+              }
+            }]
+          ],
+          preprocess: function(MarkdownIt, source) {
+            MarkdownIt.renderer.rules.table_open = function() {
+              return '<table class="table">';
+            };
+            MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
+            return source;
+          }
+        }
+      }
+    })
+  ];
+};

components.json

@@ -1,3 +1,4 @@
 {
-  "sample": "./packages/sample/index.js"
+  "sample": "./packages/sample/index.js",
+  "button": "./packages/button/index.js"
 }

docs/examples/button.md

@@ -0,0 +1,57 @@
+<style lang="css">
+  @component-namespace page {
+    @component button {
+      padding: 0 15px 15px;
+
+      @descendent group {
+        margin-bottom: 15px;
+
+        & > * {
+          margin-bottom: 15px;
+        }
+      }
+    }
+  }
+</style>
+
+## Button组件
+
+### 基础用法
+
+:::demo 样例代码
+```html
+<div class="page-button">
+  <h1 class="page-title">Button</h1>
+  <div class="page-button-group">
+    <o2-button size="large">default</o2-button>
+    <o2-button size="large" type="primary">primary</o2-button>
+    <o2-button size="large" type="danger">danger</o2-button>
+  </div>
+
+  <div class="page-button-group">
+    <o2-button>default</o2-button>
+    <o2-button type="primary">primary</o2-button>
+    <o2-button type="danger">danger</o2-button>
+  </div>
+
+  <div class="page-button-group">
+    <o2-button size="small">default</o2-button>
+    <o2-button size="small" type="primary">primary</o2-button>
+    <o2-button size="small" type="danger">danger</o2-button>
+  </div>
+
+  <div class="page-button-group">
+    <o2-button disabled size="large">default</o2-button>
+    <o2-button disabled size="large" type="primary">primary</o2-button>
+    <o2-button disabled size="large" type="danger" class="aaa">danger</o2-button>
+  </div>
+</div>
+```
+:::
+
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |

docs/examples/sample.md

@@ -2,7 +2,7 @@
 export default {
   data() {
     return {
-      author: 'test'
+      author: 'pangxie'
     };
   }
 };
@@ -16,7 +16,7 @@ author设置为test
 
 :::demo 样例代码
 ```html
-<sample author="author"></sample>
+<sample :author="author"></sample>
 ```
 :::
 

docs/index.js

@@ -12,24 +12,30 @@ Vue.use(VueRouter);
 Vue.component('demo-block', demoBlock);
 Vue.component('side-nav', SideNav);
 
-// init components
-// for (let i in Oxygen) {
-//   let module = Oxygen[i];
-//   if (!module.ignoreInit) {
-//     Vue.component(module.name, module);
-//   }
-// }
-
 const router = new VueRouter({
   mode: 'hash',
   base: __dirname,
   routes
 });
 
-// router.beforeEach(function(transition) {
+let indexScrollTop = 0;
-//   window.scrollTo(0, 0);
+router.beforeEach((route, redirect, next) => {
-//   transition.next();
+  if (route.path !== '/') {
-// });
+    indexScrollTop = document.body.scrollTop;
+  }
+  document.title = route.meta.title || document.title;
+  next();
+});
+
+router.afterEach(route => {
+  if (route.path !== '/') {
+    document.body.scrollTop = 0;
+  } else {
+    Vue.nextTick(() => {
+      document.body.scrollTop = indexScrollTop;
+    });
+  }
+});
 
 new Vue({ // eslint-disable-line
   render: h => h(App),

docs/nav.config.json

@@ -9,6 +9,10 @@
             {
               "path": "/sample",
               "title": "Sample组件"
+            },
+            {
+              "path": "/button",
+              "title": "Button组件"
             }
           ]
         }

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "oxygen",
+  "name": "@youzan/oxygen",
   "version": "0.0.1",
   "description": "有赞vue wap组件库",
-  "main": "lib/oxygen.common.js",
+  "main": "lib/oxygen.js",
   "style": "lib/style.css",
   "files": [
     "lib",
@@ -12,6 +12,7 @@
   "scripts": {
     "bootstrap": "npm i --registry=http://registry.npm.qima-inc.com",
     "build:file": "node build/bin/build-entry.js",
+    "build": "npm run clean && npm run build:file && npm run concat:dev && npm run concat:prod",
     "dev": "npm run bootstrap && npm run build:file",
     "builddocs": "webpack --progress --hide-modules --config  build/webpack.config.js && set NODE_ENV=production webpack --progress --hide-modules --config  build/webpack.config.js",
     "docs": "npm run dev && webpack-dev-server --inline --hot --config  build/webpack.config.js",
@@ -28,9 +29,13 @@
   "author": "youzanfe",
   "license": "ISC",
   "dependencies": {
-    "array-find-index": "^1.0.2",
+    "axios": "0.15.3",
+    "es6-promise": "4.0.5",
+    "lodash": "4.17.4",
     "raf.js": "0.0.4",
-    "wind-dom": "0.0.3"
+    "vue": "2.1.8",
+    "vue-template-compiler": "2.1.8",
+    "vuex": "2.1.1"
   },
   "devDependencies": {
     "babel-cli": "^6.14.0",
@@ -44,20 +49,17 @@
     "babel-preset-es2015": "^6.16.0",
     "babel-runtime": "^6.11.0",
     "copy-webpack-plugin": "^4.0.1",
-    "eslint": "^2.10.2",
+    "cp-cli": "^1.0.2",
+    "cross-env": "^3.1.3",
+    "css-loader": "^0.24.0",
+    "eslint": "^3.10.2",
     "eslint-config-standard": "^5.1.0",
     "eslint-friendly-formatter": "^2.0.5",
     "eslint-loader": "^1.3.0",
     "eslint-plugin-html": "^1.3.0",
     "eslint-plugin-promise": "^1.0.8",
     "eslint-plugin-standard": "^1.3.2",
-    "run-sequence": "^1.2.2",
+    "extract-text-webpack-plugin": "^2.0.0-beta.5",
-    "cp-cli": "^1.0.2",
-    "cross-env": "^3.1.3",
-    "css-loader": "^0.24.0",
-    "es6-promise": "^4.0.5",
-    "eslint": "^3.10.2",
-    "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.9.0",
     "file-save": "^0.2.0",
     "gh-pages": "^0.11.0",
@@ -72,18 +74,32 @@
     "json-loader": "^0.5.4",
     "json-templater": "^1.0.4",
     "lerna": "2.0.0-beta.31",
-    "lolex": "^1.5.1",
     "less": "^2.7.0",
     "less-loader": "^2.2.3",
+    "lolex": "^1.5.1",
     "markdown-it": "^6.1.1",
     "markdown-it-anchor": "^2.5.0",
     "markdown-it-container": "^2.0.0",
     "node-sass": "^3.10.1",
-    "prismjs": "^1.5.1",
+    "pixrem": "^3.0.0",
     "postcss": "^5.1.2",
-    "postcss-loader": "^0.11.1",
+    "postcss-calc": "^5.0.0",
-    "postcss-salad": "^1.0.5",
+    "postcss-css-reset": "^1.0.2",
+    "postcss-easy-import": "^2.0.0",
+    "postcss-initial": "^1.3.1",
+    "postcss-inline-svg": "^1.4.0",
+    "postcss-loader": "^0.13.0",
+    "postcss-neat": "^2.5.2",
+    "postcss-pseudo-class-any-link": "^1.0.0",
+    "postcss-sass-color-functions": "^1.1.0",
+    "postcss-scss": "^0.1.7",
+    "postcss-shape": "^0.0.1",
+    "postcss-short": "^1.4.0",
+    "postcss-utils": "^1.0.1",
+    "precss": "^1.4.0",
+    "prismjs": "^1.5.1",
     "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
     "sass-loader": "^3.2.3",
     "style-loader": "^0.13.1",
     "theaterjs": "^3.0.0",
@@ -99,8 +115,10 @@
     "vue-style-loader": "^1.0.0",
     "vue-template-compiler": "^2.1.8",
     "vue-template-es2015-compiler": "^1.4.2",
-    "webpack": "^1.13.2",
+    "webpack": "^2.2.1",
     "webpack-dev-server": "^1.16.0",
-    "webpack-node-externals": "^1.5.4"
+    "webpack-merge": "^2.0.0",
+    "webpack-node-externals": "^1.5.4",
+    "webpack-vendor-chunk-plugin": "^1.0.0"
   }
 }

packages/button/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版

packages/button/README.md

@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)

packages/button/index.js

@@ -0,0 +1,3 @@
+import Button from './src/button';
+
+export default Button;

packages/button/index.pcss

@@ -0,0 +1 @@
+@import "./src/button.pcss";

packages/button/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@youzan/o2-button",
+  "version": "0.0.1",
+  "description": "button component",
+  "main": "./lib/index.js",
+  "author": "niunai",
+  "license": "MIT",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/button/src/button.pcss

@@ -0,0 +1,64 @@
+@import "../../zenui/src/common/var.pcss";
+
+@component-namespace o2 {
+  @component button {
+    position: relative;
+    display: block;
+    height: 45px;
+    border-radius: 4px;
+    border: 0;
+    box-sizing: border-box;
+    font-size: 16px;
+    text-align: center;
+    appearance: none;
+    outline: 0;
+    overflow: hidden;
+
+    &::after {
+      content: " ";
+      position: absolute 0 0 0 0;
+      background-color: #000;
+      opacity: 0;
+    }
+
+    &:not(.is-disabled):active::after {
+      opacity: .3;
+    }
+
+    @modifier default {
+      color: $button-default-color;
+      background-color: $button-default-background-color;
+    }
+
+    @modifier primary {
+      color: $button-primary-color;
+      background-color: $button-primary-background-color;
+    }
+
+    @modifier danger {
+      color: $button-danger-color;
+      background-color: $button-danger-background-color;
+    }
+
+    @modifier large {
+      display: block;
+      width: 100%;
+    }
+
+    @modifier normal {
+      display: inline-block;
+      padding: 0 12px;
+    }
+
+    @modifier small {
+      display: inline-block;
+      font-size: 14px;
+      padding: 0 12px;
+      height: 33px;
+    }
+
+    @when disabled {
+      opacity: .6;
+    }
+  }
+}

packages/button/src/button.vue

@@ -0,0 +1,73 @@
+<template>
+  <button
+    :type="nativeType"
+    :class="[
+      'o2-button',
+      'o2-button--' + type,
+      'o2-button--' + size,
+      {
+        'is-disabled': disabled,
+        'is-loading': loading
+      }
+    ]"
+    :disabled="disabled"
+    @click="handleClick"
+  >
+    <i v-if="loading" class="o2-icon-loading"></i>
+    <span class="o2-button-text"><slot></slot></span>
+  </button>
+</template>
+
+<script>
+/**
+ * o2-header
+ * @module components/button
+ * @desc 按钮
+ * @param {string} [type=default] - 显示类型，接受 default, primary, danger
+ * @param {boolean} [disabled=false] - 禁用
+ * @param {string} [size=normal] - 尺寸，接受 normal, mini, small, large
+ * @param {string} [native-type] - 原生 type 属性
+ * @param {slot} - 显示文本
+ *
+ * @example
+ * <o2-button size="large" type="primary">按钮</o2-button>
+ */
+export default {
+  name: 'o2-button',
+
+  methods: {
+    handleClick(e) {
+      this.$emit('click', e);
+    }
+  },
+
+  props: {
+    disabled: Boolean,
+    loading: Boolean,
+    nativeType: String,
+    type: {
+      type: String,
+      default: 'default',
+      validator(value) {
+        return [
+          'default',
+          'danger',
+          'primary'
+        ].indexOf(value) > -1;
+      }
+    },
+    size: {
+      type: String,
+      default: 'normal',
+      validator(value) {
+        return [
+          'mini',
+          'small',
+          'normal',
+          'large'
+        ].indexOf(value) > -1;
+      }
+    }
+  }
+};
+</script>

packages/zenui/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@youzan/zenui",
+  "version": "0.0.1",
+  "description": "wap component style",
+  "main": "./lib/index.js",
+  "author": "niunai",
+  "license": "MIT",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/zenui/src/common/var.pcss

@@ -0,0 +1,93 @@
+/* UI标准色 */
+$c-white: #fff;
+$c-black: #333;
+$c-green: #06bf04;
+$c-green-wx: #4b0;
+$c-red: #ed5050;
+$c-gray: #c9c9c9;
+$c-gray-light: #e5e5e5;
+$c-gray-darker: #666;
+$c-gray-dark: #999;
+$c-yellow: #f09000;
+$c-yellow-light: #fcff00;
+$c-orange: #f60;
+$c-orange-dark: #f15a0c;
+$c-blue: #38f;
+
+$c-background: #f8f8f8;
+
+/* 按钮颜色 */
+$button-default-color: $c-white;
+$button-default-background-color: $c-green-wx;
+$button-primary-color: $c-black;
+$button-primary-background-color: $c-white;
+$button-danger-color: $c-white;
+$button-danger-background-color: #f44;
+
+:root{
+
+  /* z-index
+ -------------------------- */
+  --index-normal: 1;
+  --index-top: 1000;
+  --index-popper: 2000;
+
+  /* Link
+  -------------------------- */
+  --link-color: #475669;
+  --link-hover-color: var(--color-primary);
+
+  /* Border
+  -------------------------- */
+  --border-width-base: 1px;
+  --border-style-base: solid;
+  --border-color-base: var(--color-grey);
+  --border-color-hover: #8492a6;
+  --border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base);
+  --border-radius-base: 4px;
+  --border-radius-small: 2px;
+  --border-radius-circle: 100%;
+  --shadow-base: 0 0 2px rgba(var(--color-black), 0.18), 0 0 1px var(--color-blue-light);
+
+  /* Box-shadow
+  -------------------------- */
+  --box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+  --box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
+
+  /* Fill
+  -------------------------- */
+  --fill-base: var(--color-white);
+
+  /* Font
+  -------------------------- */
+  --font-size-base: 14px;
+  --font-color-base: #1f2d3d;
+  --font-color-disabled-base: #bbb;
+
+  /* Size
+  -------------------------- */
+  --size-base: 14px;
+
+
+  /* Disable base
+  -------------------------- */
+  --disabled-fill-base: #EFF2F7;
+  --disabled-color-base: #bbb;
+  --disabled-border-base: #D3DCE6;
+
+  /* Icon
+  -------------------------- */
+  --icon-color: #666;
+
+  /* Button
+  -------------------------- */
+
+  --button-default-color: #656b79;
+  --button-default-background-color: #f6f8fa;
+  --button-default-plain-color: #5a5a5a;
+  --button-default-box-shadow: 0 0 1px #b8bbbf;
+  --button-primary-color: #fff;
+  --button-primary-background-color: #06BF04;
+  --button-danger-color: #fff;
+  --button-danger-background-color: #ef4f4f;
+}

packages/zenui/src/index.pcss

@@ -0,0 +1,4 @@
+/**
+  css组件库 入口,从各个地方拿css文件，组装成css组件库
+ */
+@import '../../button/index.pcss';

src/index.js

@@ -1,9 +1,19 @@
 import Sample from '../packages/sample/index.js';
+import Button from '../packages/button/index.js';
+import 'es6-promise/auto';
+import axios from 'axios';
+import foreach from 'lodash/foreach';
+import filter from 'lodash/filter';
+import find from 'lodash/find';
+import map from 'lodash/map';
+// zenui
+import '../packages/zenui/src/index.pcss';
 
 const install = function(Vue) {
   if (install.installed) return;
 
   Vue.component(Sample.name, Sample);
+  Vue.component(Button.name, Button);
 };
 
 // auto install
@@ -14,5 +24,13 @@ if (typeof window !== 'undefined' && window.Vue) {
 module.exports = {
   install,
   version: '0.0.1',
-  Sample
+  axios,
+  _: {
+    foreach,
+    filter,
+    find,
+    map
+  },
+  Sample,
+  Button
 };