diff --git a/examples/app.vue b/examples/app.vue index 0d919e471..eed81656c 100644 --- a/examples/app.vue +++ b/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; diff --git a/examples/components/header.vue b/examples/components/header.vue index 598e994a7..8dc5d31f4 100644 --- a/examples/components/header.vue +++ b/examples/components/header.vue @@ -111,7 +111,7 @@
  • 组件
    • diff --git a/examples/docs/development.md b/examples/docs/development.md index 1a42ac120..7f18565ae 100644 --- a/examples/docs/development.md +++ b/examples/docs/development.md @@ -1 +1,22 @@ -待补充 \ No newline at end of file +## 开发指南 + +### 构建工具安装 + +element 是基于 [cooking](http://cookingjs.github.io/) 进行构建开发的。所以运行前你需要全局安装 [cooking](http://cookingjs.github.io/)。 + +```bash +$ npm install cooking -g +``` + +### 命令 + +```bash +$ make install --- 安装依赖 +$ make new [中文名] --- 创建新组件 package. 例如 '$ make new button 按钮' +$ make dev --- 开发模式 +$ make dist --- 编译项目，生成目标文件 +$ make dist-all --- 分别编译每个组件项目 +$ make deploy --- 部署 demo +$ make pub --- 发布到 npm 上 +$ make pub-all --- 发布各组件到 npm 上 +``` diff --git a/examples/docs/quickstart.md b/examples/docs/quickstart.md index 8faae8dfc..9fd404ac1 100644 --- a/examples/docs/quickstart.md +++ b/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" + } + ]]] +} +``` diff --git a/examples/pages/index.vue b/examples/pages/index.vue index 62b7a96fe..75de465d7 100644 --- a/examples/pages/index.vue +++ b/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); } } @@ -110,7 +110,7 @@