Merge pull request #122 from baiyaaaaa/next

add quickstart and develop page

examples/app.vue

@@ -19,6 +19,17 @@
     font-weight: 300;
   }
 
+  a {
+    color: #4078c0;
+    text-decoration: none;
+  }
+
+  .hljs {
+    padding: 20px 25px;
+    background-color: #f9fafc;
+    margin-bottom: 25px;
+  }
+
   .main-cnt {
     margin-top: -80px;
     padding: 80px 0 120px;

examples/components/header.vue

@@ -111,7 +111,7 @@
           <li class="nav-item">
             <router-link
               active-class="active"
-              to="/component/button"
+              to="/component/layout"
               exact>组件
             </router-link>
           </li>

examples/docs/development.md

@@ -1 +1,22 @@
-待补充
+## 开发指南
+
+### 构建工具安装
+
+element 是基于 [cooking](http://cookingjs.github.io/) 进行构建开发的。所以运行前你需要全局安装 [cooking](http://cookingjs.github.io/)。
+
+```bash
+$ npm install cooking -g
+```
+
+### 命令
+
+```bash
+$ make install                        ---  安装依赖
+$ make new <component-name> [中文名]   ---  创建新组件 package. 例如 '$ make new button 按钮'
+$ make dev                            ---  开发模式
+$ make dist                           ---  编译项目，生成目标文件
+$ make dist-all                       ---  分别编译每个组件项目
+$ make deploy                         ---  部署 demo
+$ make pub                            ---  发布到 npm 上
+$ make pub-all                        ---  发布各组件到 npm 上
+```

examples/docs/quickstart.md

@@ -1,7 +1,62 @@
+## 快速上手
+
 element 是为饿了么定制的一套 Vue.js 后台组件库。帮助你更轻松更快速的开发后台项目。
 
--------------
+### 安装
 
-## 安装
+```bash
+$ npm install element-ui -S
+```
 
-待补充
+### 注册组件
+
+引入整个 element
+
+```javascript
+import Vue from 'vue'
+import Element from 'element-ui'
+
+Vue.use(Element)
+```
+
+或者只引入你需要的组件
+
+**use [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)**
+
+```javascript
+import {
+  Select,
+  Button
+  // ...
+} from 'element-ui'
+
+Vue.component(Select.name, ElSelect)
+Vue.component(Button.name, Button)
+```
+
+(roughly) to
+
+```javascript
+import Select from 'element-ui/lib/select';
+import Select from 'element-ui/lib/theme-default/select.css';
+import Button from 'element-ui/lib/button';
+import Button from 'element-ui/lib/theme-default/button.css';
+
+Vue.component(Select.name, ElSelect)
+Vue.component(Button.name, Button)
+```
+
+### babel-plugin-component
+
+.babelrc
+
+```json
+{
+  "plugins": ["xxx", ["component", [
+    {
+      "libraryName": "element-ui",
+      "styleLibraryName": "theme-default"
+    }
+  ]]]
+}
+```

examples/pages/index.vue

@@ -87,7 +87,6 @@
       left: 0;
       background-color: #fff;
       border-radius: 0 0 5px 5px;
-      box-shadow:0px 6px 18px 0px rgba(232,237,250,0.50);
       transition: all .3s;
       text-decoration: none;
       display: block;
@@ -100,6 +99,7 @@
     }
     &:hover {
       bottom: 6px;
+      box-shadow: 0px 6px 18px 0px rgba(232,237,250,0.50);
     }
   }
 </style>
@@ -110,7 +110,7 @@
         <div class="banner-desc">
           <h2>Element</h2>
           <div id="source" style="display: none;" ref="type-source">
-            快速搭建页面<br/>只为这样的你:<span data-type="back" ref="type-job">设计师</span>
+            快速搭建页面<br/>只为这样的你: <span data-type="back" ref="type-job">设计师</span>
           </div>
           <div id="output-wrap">
             <span id="output" ref="type-output"></span>
@@ -141,7 +141,7 @@
             <p>使用组件 Demo 快速体验交互细节;使用前端框架封装的代码帮助工程师快速开发。</p>
             <router-link
               active-class="active"
-              to="/component/button"
+              to="/component/layout"
               exact>查看详情
             </router-link>
           </div>

package.json

@@ -14,6 +14,10 @@
     "gh-docs": "cooking build -c scripts/cooking.demo.js -p && gh-pages -d examples/element-ui --remote origin",
     "prepublish": "make dist"
   },
+  "faas": {
+    "domain": "element",
+    "public": "examples/element-ui"
+  },
   "repository": {
     "type": "git",
     "url": "git@github.com:eleme/element-ui.git"