refactor(cli): add pc component preview to generators

affects: @varlet/cli
varletjs · Sep 15, 2021 · 03618fd · 03618fd
1 parent be463ad
commit 03618fd
Show file tree

Hide file tree

Showing 12 changed files with 3,753 additions and 935 deletions.
diff --git a/packages/varlet-cli/generators/sfc/package.json b/packages/varlet-cli/generators/sfc/package.json
@@ -32,7 +32,7 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@varlet/cli": "^1.17.2",
+    "@varlet/cli": "^1.20.0-alpha.0",
     "vue": "3.1.4"
   },
   "release-it": {

diff --git a/packages/varlet-cli/generators/sfc/src/button/docs/zh-CN.md b/packages/varlet-cli/generators/sfc/src/button/docs/zh-CN.md
@@ -14,11 +14,19 @@ createApp().use(Button)
 <b-button>组件库从我开始</b-button>
 ```
 
+```vue
+import BasicUse from '../example/BasicUse'
+```
+
 ### 主题色按钮
 ```html
 <b-button color="#009688">组件库从我开始</b-button>
 ```
 
+```vue
+import ModifyColor from '../example/ModifyColor'
+```
+
 ## API
 
 ### 属性

diff --git a/packages/varlet-cli/generators/sfc/src/button/example/BasicUse.vue b/packages/varlet-cli/generators/sfc/src/button/example/BasicUse.vue
@@ -0,0 +1,14 @@
+<template>
+  <b-button>组件库从我开始</b-button>
+</template>
+
+<script>
+import Button from '../Button'
+
+export default {
+  name: 'BasicUse',
+  components: {
+    [Button.name]: Button
+  }
+}
+</script>
diff --git a/packages/varlet-cli/generators/sfc/src/button/example/ModifyColor.vue b/packages/varlet-cli/generators/sfc/src/button/example/ModifyColor.vue
@@ -0,0 +1,14 @@
+<template>
+  <b-button color="#03A9F4">组件库从我开始</b-button>
+</template>
+
+<script>
+import Button from '../Button'
+
+export default {
+  name: 'ModifyColor',
+  components: {
+    [Button.name]: Button
+  }
+}
+</script>
diff --git a/packages/varlet-cli/generators/sfc/src/button/example/index.vue b/packages/varlet-cli/generators/sfc/src/button/example/index.vue
@@ -1,19 +1,23 @@
 <template>
   <app-type>基本使用</app-type>
-  <b-button>组件库从我开始</b-button>
+  <basic-use/>
 
   <app-type>修改颜色</app-type>
-  <b-button color="#03A9F4">组件库从我开始</b-button>
+  <modify-color/>
 </template>
 
 <script>
 import Button from '../Button'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
+import BasicUse from './BasicUse'
+import ModifyColor from './ModifyColor'
 
 export default {
   components: {
     [Button.name]: Button,
     AppType,
+    BasicUse,
+    ModifyColor
   },
 }
 </script>