feat(cli): add create command

2020-01-16 17:06:22 +08:00
parent 38001e59f0
commit 62a1b39b2b
31 changed files with 677 additions and 258 deletions
@@ -1,39 +0,0 @@
-<template>
-  <van-button :type="type" :color="color" class="my-button">
-    <slot />
-  </van-button>
-</template>
-
-<script>
-import { Button } from 'vant';
-import MyIcon from '../my-icon';
-import { foo } from './utils';
-
-export default {
-  name: 'my-button',
-
-  components: {
-    [MyIcon.name]: MyIcon,
-    [Button.name]: Button
-  },
-
-  props: {
-    color: String,
-    type: {
-      type: String,
-      default: 'primary'
-    }
-  },
-
-  methods: {
-    foo
-  }
-};
-</script>
-
-<style lang="less">
-.my-button {
-  min-width: 120px;
-  font-weight: 500;
-}
-</style>
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`render demo button 1`] = `<button class="my-button van-button van-button--primary van-button--normal"></button>`;
@@ -1,3 +0,0 @@
-export function foo() {
-  return 'bar';
-}
@@ -1,49 +0,0 @@
-# MyCell 单元格
-
-### 介绍
-
-MyCell 是一个示例单元格组件
-
-### 引入
-
-``` javascript
-import Vue from 'vue';
-import { MyCell } from 'demo-ui';
-
-Vue.use(MyCell);
-```
-
-## 代码演示
-
-### 基础用法
-
-```html
-<my-cell title="单元格" />
-```
-
-### 显示箭头
-
-```html
-<my-cell title="单元格" is-link />
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|------|------|------|------|------|
-| title | 单元格标题 | *string* | `-` | - |
-| is-link | 是否为可点击单元格 | *boolean* | `false` | - |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-|------|------|------|
-| click | 点击时触发 | event: Event |
-
-### Slots
-
-| 名称 | 说明 |
-|------|------|
-| default | 默认插槽 |
@@ -1,11 +0,0 @@
-<template>
-  <demo-section>
-    <demo-block title="基础用法">
-      <my-cell title="单元格" />
-    </demo-block>
-
-    <demo-block title="显示箭头">
-      <my-cell title="单元格" is-link />
-    </demo-block>
-  </demo-section>
-</template>
@@ -1,14 +0,0 @@
-import { Cell } from 'vant';
-
-export default {
-  name: 'my-cell',
-
-  props: {
-    title: String,
-    isLink: Boolean
-  },
-
-  render() {
-    return <Cell class="my-cell" title={this.title} isLink={this.isLink} />;
-  }
-};
@@ -1,8 +0,0 @@
-.my-cell {
-  padding: 16px;
-  font-weight: 500;
-
-  .van-cell__value {
-    color: #333;
-  }
-}
@@ -1,37 +0,0 @@
-# MyIcon 图标
-
-### 介绍
-
-MyIcon 是一个示例图标组件
-
-### 引入
-
-``` javascript
-import Vue from 'vue';
-import { MyIcon } from 'demo-ui';
-
-Vue.use(MyIcon);
-```
-
-## 代码演示
-
-### 基础用法
-
-```html
-<my-icon name="success" />
-```
-
-### 显示箭头
-
-```html
-<my-icon name="success" dot />
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|------|------|------|------|------|
-| name | 图标名称 | *string* | `-` | - |
-| dot | 是否展示红点 | *boolean* | `false` | - |
@@ -1,19 +0,0 @@
-<template>
-  <demo-section>
-    <demo-block title="基础用法">
-      <my-icon name="success" />
-    </demo-block>
-
-    <demo-block title="显示红点">
-      <my-icon name="success" dot />
-    </demo-block>
-  </demo-section>
-</template>
-
-<style lang="less">
-.demo-my-icon {
-  .my-icon {
-    margin-left: 16px;
-  }
-}
-</style>
@@ -1,14 +0,0 @@
-import { Icon } from 'vant';
-
-export default {
-  name: 'my-icon',
-
-  props: {
-    name: String,
-    dot: Boolean
-  },
-
-  render() {
-    return <Icon name={this.name} dot={this.dot} class="my-icon" />;
-  }
-};
@@ -1,3 +0,0 @@
-.my-icon {
-  font-size: 32px;
-}
@@ -9,7 +9,3 @@ npm i vant -S
 # 通过 yarn 安装
 yarn add vant
 ```
-
-### 引入组件
-
-这是一段引入组件的介绍
@@ -1,9 +1,9 @@
 {
-  "name": "@youzan/demo-ui",
+  "name": "<%= name %>",
  "version": "1.0.0",
  "description": "",
-  "main": "lib/demo-ui.js",
-  "style": "lib/demo-ui.css",
+  "main": "lib/<%= name %>.js",
+  "style": "lib/index.css",
  "files": [
    "lib",
    "es"
@@ -36,14 +36,12 @@
    ]
  },
  "peerDependencies": {
-    "vant": "^2.2.16",
    "vue": "^2.6.11",
    "vue-template-compiler": "^2.6.11"
  },
  "devDependencies": {
    "@vant/cli": "^2.0.0",
    "babel-plugin-import": "^1.13.0",
-    "vant": "^2.2.16",
    "vue": "^2.6.11",
    "vue-template-compiler": "^2.6.11"
  },
@@ -18,23 +18,17 @@ Vue.use(MyButton);
 ### 基础用法

 ```html
-<my-button type="primary" />
-```
-
-### 自定义颜色
-
-```html
-<my-button color="#03a9f4" />
+<demo-button type="primary" />
 ```

 ## API

 ### Props

-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|------|------|------|------|------|
-| type | 按钮类型 | *string* | `primary` | - |
-| color | 按钮颜色 | *string* | - | 1.0.0 |
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|------|
+| type | 按钮类型 | *string* | `primary` |
+| color `1.0.0` | 按钮颜色 | *string* | - |

 ### Events

@@ -1,11 +1,11 @@
 <template>
  <demo-section>
    <demo-block title="基础用法">
-      <my-button type="primary" style="margin-left: 15px;">按钮</my-button>
+      <demo-button type="primary" style="margin-left: 15px;">按钮</demo-button>
    </demo-block>

    <demo-block title="自定义颜色">
-      <my-button color="#03a9f4" style="margin-left: 15px;">按钮</my-button>
+      <demo-button color="#03a9f4" style="margin-left: 15px;">按钮</demo-button>
    </demo-block>
  </demo-section>
 </template>
@@ -0,0 +1,26 @@
+<template>
+  <button class="demo-button">
+    <slot />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'demo-button',
+
+  props: {
+    color: String,
+    type: {
+      type: String,
+      default: 'primary'
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.demo-button {
+  min-width: 120px;
+  font-weight: 500;
+}
+</style>
@@ -1,12 +1,12 @@
 module.exports = {
-  name: 'demo-ui',
+  name: '<%= name %>',
  build: {
    site: {
-      publicPath: '/demo-ui/'
+      publicPath: '/<%= name %>/'
    }
  },
  site: {
-    title: 'Demo UI',
+    title: '<%= name %>',
    logo: 'https://img.yzcdn.cn/vant/logo.png',
    nav: [
      {
@@ -28,19 +28,6 @@ module.exports = {
          {
            path: 'my-button',
            title: 'MyButton 按钮'
-          },
-          {
-            path: 'my-icon',
-            title: 'MyIcon 图标'
-          }
-        ]
-      },
-      {
-        title: '展示组件',
-        items: [
-          {
-            path: 'my-cell',
-            title: 'MyCell 单元格'
          }
        ]
      }