deploy via vuepress

.gitignore

@@ -1,6 +1,6 @@
 .DS_Store
 node_modules
-/dist
+dist
 
 # local env files
 .env.local

deploy.sh

@@ -0,0 +1,25 @@
+#!/usr/bin/env sh
+
+# 确保脚本抛出遇到的错误
+set -e
+
+# 生成静态文件
+npm run docs:build
+
+# 进入生成的文件夹
+cd docs/.vuepress/dist
+
+# 如果是发布到自定义域名
+# echo 'www.example.com' > CNAME
+
+git init
+git add -A
+git commit -m 'deploy'
+
+# 如果发布到 https://<USERNAME>.github.io
+# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git master
+
+# 如果发布到 https://<USERNAME>.github.io/<REPO>
+git push -f https://github.com/wencaizhang/vue-skeleton-antd.git master:gh-pages
+
+cd -

docs/.vuepress/components/demo-1.vue

@@ -0,0 +1,44 @@
+<template>
+  <div style="padding-top: 16px;">
+    <h2>最基本的展位效果</h2>
+    <p>
+      <strong>预览</strong>
+    </p>
+    <Skeleton/>
+    <p>
+      <strong>代码</strong>
+    </p>
+    <h3>更复杂的组合</h3>
+    <Skeleton avatar :paragraph="{rows: 4, width: '80%'}"/>
+
+    <h3>动画效果</h3>
+    <Skeleton active :title="{width: '90%'}"/>
+
+    <h3>动画效果</h3>
+    <Skeleton active :avatar="{shape: 'square'}"/>
+
+    <h3>加载占位图包含子组件</h3>
+    <button @click="loading = !loading">show skeleton</button>
+    <Skeleton :loading="loading">Skeleton</Skeleton>
+
+    <pre><code>{{content}}</code></pre>
+  </div>
+</template>
+
+<script>
+import Skeleton from "../../../src/components/Skeleton";
+
+export default {
+  components: { Skeleton },
+  data() {
+    return {
+      loading: false,
+      content: `
+          <Skeleton/>
+      `
+        .replace(/^ {8}/gm, "")
+        .trim()
+    };
+  },
+};
+</script>

docs/.vuepress/config.js

@@ -0,0 +1,35 @@
+const path = require('path')
+module.exports = {
+  base: '/vue-skeleton-antd/',
+  title: '骨架屏组件',
+  description: '一个好用的UI框架',
+  themeConfig: {
+    nav: [
+      {text: '主页', link: '/'},
+      {text: 'GitHub', link: 'https://github.com/wencaizhang/vue-skeleton-antd/'},
+      {text: '交流', link: 'https://github.com/wencaizhang/vue-skeleton-antd/issues'},
+    ],
+    sidebar: [
+      {
+        title: '入门',
+        collapsable: false,
+        children: [
+          '/install/',
+          '/get-started/',
+        ]
+      },
+      {
+        title: '使用',
+        collapsable: false,
+        children: [
+          '/components/demo',
+          '/components/api',
+        ]
+      },
+
+    ]
+  },
+  scss:{
+    includePaths: [path.join(__dirname, '../../styles')]
+  }
+}

docs/README.md

@@ -0,0 +1,39 @@
+![](https://img.shields.io/npm/dt/vue-skeleton-antd.svg)
+![](https://img.shields.io/badge/license-MIT-000000.svg)
+
+
+# vue-skeleton-antd
+vue 构建的 ant design 风格骨架屏组件
+
+## 组件引入
+
+1. 安装
+
+```bash
+# npm 安装
+npm i vue-skeleton-antd
+
+# yarn
+yarn add vue-skeleton-antd
+```
+
+2. 引入组件
+
+```js
+import Vue from 'vue';
+import Skeleton from 'vue-skeleton-antd';
+
+Vue.use(Skeleton)
+```
+
+## API
+
+### Skeleton 骨架屏
+
+|  属性 |  说明 | 类型  |  默认值 |
+| ------------ | ------------ | ------------ | ------------ |
+|  active |  是否展示动画效果 | boolean  | true  |
+|  avatar |  是否显示头像占位图 |  boolean |  true |
+|  paragraph |  是否显示段落占位图 |  boolean |  true |
+|  title |  是否显示标题占位图 |  boolean |  true |
+|  loading |  为 `true` 时，显示占位图。反之则直接展示子组件 |  boolean |  - |

docs/components/api.md

@@ -0,0 +1,40 @@
+---
+title: API
+---
+# API
+
+## 1. Skeleton 骨架屏
+
+---
+
+|  属性 |  说明 | 类型  |  默认值 |
+| ------------ | ------------ | ------------ | ------------ |
+|  active |  是否展示动画效果 | boolean  | true  |
+|  avatar |  是否显示头像占位图 |  boolean |  true |
+|  paragraph |  是否显示段落占位图 |  boolean |  true |
+|  title |  是否显示标题占位图 |  boolean |  true |
+|  loading |  为 `true` 时，显示占位图。反之则直接展示子组件 |  boolean |  - |
+
+## 2. SkeletonAvatarProps 头像参数
+
+---
+
+|  属性 |  说明 | 类型  |  默认值 |
+| ------------ | ------------ | ------------ | ------------ |
+|  size |  设置头像占位图的大小  | Enum{ 'large', 'small', 'default' } |
+|  shape |  指定头像的形状 | Enum{ 'circle', 'square' }  | -  |
+
+## 3. SkeletonTitleProps 标题参数
+
+---
+
+|  属性 |  说明 | 类型  |  默认值 |
+| ------------ | ------------ | ------------ | ------------ |
+|  width |  设置标题占位图的宽度 | number | string  | -  |
+
+## 4. SkeletonParagraphProps 段落参数
+
+|  属性 |  说明 | 类型  |  默认值 |
+| ------------ | ------------ | ------------ | ------------ |
+|  rows |  设置段落占位图的行数 | number  | true  |
+|  width |  设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number | string | Array<number | string>  | -  |

docs/components/demo.md

@@ -0,0 +1,9 @@
+---
+title: 示例
+---
+# 示例
+
+<ClientOnly>
+  <demo-1></demo-1>
+</ClientOnly>
+

docs/get-started/README.md

@@ -0,0 +1,21 @@
+---
+title: 快速上手
+---
+
+# 快速上手
+
+本章节待完善
+
+## 安装
+
+请参考 [安装](../install/) 章节
+
+
+## 导入组件
+
+```javascript
+import Vue from 'vue';
+import Skeleton from 'vue-skeleton-antd';
+
+Vue.use(Skeleton)
+```

docs/install/README.md

@@ -0,0 +1,17 @@
+---
+title: 安装
+---
+
+# 安装
+
+本章节待完善
+
+```bash
+npm i vue-skeleton-antd
+```
+
+或
+
+```bash
+yarn add vue-skeleton-antd
+```