feat(create-vant-cli-app): support Vue 3

packages/create-vant-cli-app/generators/templates/src/demo-button/README.md

@@ -1,43 +0,0 @@
-# DemoButton 按钮
-
-### 介绍
-
-DemoButton 是一个示例按钮组件
-
-### 引入
-
-```js
-import Vue from 'vue';
-import { DemoButton } from '<%= name %>';
-
-Vue.use(DemoButton);
-```
-
-## 代码演示
-
-### 基础用法
-
-```html
-<demo-button type="primary" />
-```
-
-## API
-
-### Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-|------|------|------|------|
-| type | 按钮类型 | *string* | `primary` |
-| color `1.0.0` | 按钮颜色 | *string* | - |
-
-### Events
-
-| 事件名 | 说明 | 回调参数 |
-|------|------|------|
-| click | 点击时触发 | event: Event |
-
-### Slots
-
-| 名称 | 说明 |
-|------|------|
-| default | 默认插槽 |

packages/create-vant-cli-app/generators/templates/vue2/src/demo-button/README.md

@@ -0,0 +1,43 @@
+# DemoButton 按钮
+
+### 介绍
+
+DemoButton 是一个示例按钮组件
+
+### 引入
+
+```js
+import Vue from 'vue';
+import { DemoButton } from '<%= name %>';
+
+Vue.use(DemoButton);
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<demo-button type="primary" />
+```
+
+## API
+
+### Props
+
+| 参数          | 说明     | 类型     | 默认值    |
+| ------------- | -------- | -------- | --------- |
+| type          | 按钮类型 | _string_ | `primary` |
+| color `1.0.0` | 按钮颜色 | _string_ | -         |
+
+### Events
+
+| 事件名 | 说明       | 回调参数     |
+| ------ | ---------- | ------------ |
+| click  | 点击时触发 | event: Event |
+
+### Slots
+
+| 名称    | 说明     |
+| ------- | -------- |
+| default | 默认插槽 |

packages/create-vant-cli-app/generators/templates/vue2/src/demo-button/demo/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <demo-section>
+    <demo-block title="基础用法">
+      <demo-button type="primary" style="margin-left: 15px">按钮</demo-button>
+    </demo-block>
+
+    <demo-block title="自定义颜色">
+      <demo-button color="#03a9f4" style="margin-left: 15px">按钮</demo-button>
+    </demo-block>
+  </demo-section>
+</template>

packages/create-vant-cli-app/generators/templates/vue3/.eslintignore

@@ -0,0 +1,4 @@
+es
+lib
+dist
+node_modules

packages/create-vant-cli-app/generators/templates/vue3/.gitignore

@@ -0,0 +1,17 @@
+*.log*
+.cache
+.DS_Store
+.idea
+.vscode
+
+# npm
+node_modules
+package-lock.json
+
+# dist file
+es
+lib
+site
+
+# test
+test/coverage

packages/create-vant-cli-app/generators/templates/vue3/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vant/cli/preset'],
+};

packages/create-vant-cli-app/generators/templates/vue3/docs/home.md

@@ -0,0 +1,11 @@
+# 介绍
+
+### 关于
+
+这是一段组件库的介绍
+
+### 特性
+
+- 特性一
+- 特性二
+- 特性三

packages/create-vant-cli-app/generators/templates/vue3/docs/quickstart.md

@@ -0,0 +1,11 @@
+# 快速上手
+
+### 安装
+
+```bash
+# 通过 npm 安装
+npm i <%= name %> -S
+
+# 通过 yarn 安装
+yarn add <%= name %>
+```

packages/create-vant-cli-app/generators/templates/vue3/package.json.tpl

@@ -0,0 +1,59 @@
+{
+  "name": "<%= name %>",
+  "version": "1.0.0",
+  "description": "",
+  "main": "lib/<%= name %>.js",
+  "style": "lib/index.css",
+  "files": [
+    "lib",
+    "es"
+  ],
+  "scripts": {
+    "dev": "vant-cli dev",
+    "test": "vant-cli test",
+    "lint": "vant-cli lint",
+    "build": "vant-cli build",
+    "release": "vant-cli release",
+    "test:coverage": "open test/coverage/index.html",
+    "build-site": "vant-cli build-site && gh-pages -d site"
+  },
+  "author": "",
+  "license": "MIT",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "commit-msg": "vant-cli commit-lint"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx,vue}": "eslint --fix",
+    "*.{vue,css,less,scss}": "stylelint --fix"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vant/cli": "^3.0.0",
+    "@vue/sfc-compiler": "^3.0.0",
+    "babel-plugin-import": "^1.13.0",
+    "vue": "^3.0.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@vant"
+    ]
+  },
+  "stylelint": {
+    "extends": [
+      "@vant/stylelint-config"
+    ]
+  },
+  "prettier": {
+    "singleQuote": true
+  },
+  "browserslist": [
+    "Android >= 4.0",
+    "iOS >= 8"
+  ]
+}

packages/create-vant-cli-app/generators/templates/vue3/src/demo-button/README.md

@@ -0,0 +1,43 @@
+# DemoButton 按钮
+
+### 介绍
+
+DemoButton 是一个示例按钮组件
+
+### 引入
+
+```js
+import Vue from 'vue';
+import { DemoButton } from '<%= name %>';
+
+Vue.use(DemoButton);
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<demo-button type="primary" />
+```
+
+## API
+
+### Props
+
+| 参数          | 说明     | 类型     | 默认值    |
+| ------------- | -------- | -------- | --------- |
+| type          | 按钮类型 | _string_ | `primary` |
+| color `1.0.0` | 按钮颜色 | _string_ | -         |
+
+### Events
+
+| 事件名 | 说明       | 回调参数     |
+| ------ | ---------- | ------------ |
+| click  | 点击时触发 | event: Event |
+
+### Slots
+
+| 名称    | 说明     |
+| ------- | -------- |
+| default | 默认插槽 |

packages/create-vant-cli-app/generators/templates/vue3/src/demo-button/demo/index.vue

@@ -1,9 +1,9 @@
 <template>
   <demo-block title="基础用法">
-    <demo-button type="primary" style="margin-left: 15px;">按钮</demo-button>
+    <demo-button type="primary" style="margin-left: 15px">按钮</demo-button>
   </demo-block>
 
   <demo-block title="自定义颜色">
-    <demo-button color="#03a9f4" style="margin-left: 15px;">按钮</demo-button>
+    <demo-button color="#03a9f4" style="margin-left: 15px">按钮</demo-button>
   </demo-block>
 </template>

packages/create-vant-cli-app/generators/templates/vue3/src/demo-button/index.vue

@@ -0,0 +1,31 @@
+<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="<%= cssLang %>">
+.demo-button {
+  min-width: 120px;
+  color: #fff;
+  font-size: 16px;
+  line-height: 36px;
+  background-color: #f44;
+  border: none;
+  border-radius: 30px;
+}
+</style>

packages/create-vant-cli-app/generators/templates/vue3/src/demo-button/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render demo button 1`] = `<button class="demo-button"></button>`;

packages/create-vant-cli-app/generators/templates/vue3/src/demo-button/test/index.spec.js

@@ -0,0 +1,7 @@
+import { mount } from '@vue/test-utils';
+import DemoButton from '../../demo-button';
+
+test('render demo button', () => {
+  const wrapper = mount(DemoButton);
+  expect(wrapper).toMatchSnapshot();
+});

packages/create-vant-cli-app/generators/templates/vue3/vant.config.js

@@ -0,0 +1,39 @@
+module.exports = {
+  name: '<%= name %>',
+  build: {
+    css: {
+      preprocessor: '<%= preprocessor %>',
+    },
+    site: {
+      publicPath: '/<%= name %>/',
+    },
+  },
+  site: {
+    title: '<%= name %>',
+    logo: 'https://img.yzcdn.cn/vant/logo.png',
+    nav: [
+      {
+        title: '开发指南',
+        items: [
+          {
+            path: 'home',
+            title: '介绍',
+          },
+          {
+            path: 'quickstart',
+            title: '快速上手',
+          },
+        ],
+      },
+      {
+        title: '基础组件',
+        items: [
+          {
+            path: 'demo-button',
+            title: 'DemoButton 按钮',
+          },
+        ],
+      },
+    ],
+  },
+};

packages/create-vant-cli-app/src/generator.ts

@@ -6,8 +6,23 @@ import { CWD, GENERATOR_DIR } from './constant';
 import Yeoman from 'yeoman-environment';
 import Generator from 'yeoman-generator';
 
-const TEMPLATES_PATH = join(GENERATOR_DIR, 'templates');
+const TEMPLATES_ROOT = join(GENERATOR_DIR, 'templates');
 const PROMPTS = [
+  {
+    name: 'vueVersion',
+    message: 'Select Vue version',
+    type: 'list',
+    choices: [
+      {
+        name: 'Vue 2',
+        value: 'vue2',
+      },
+      {
+        name: 'Vue 3',
+        value: 'vue3',
+      },
+    ],
+  },
   {
     name: 'preprocessor',
     message: 'Select css preprocessor',
@@ -20,6 +35,7 @@ export class VanGenerator extends Generator {
   inputs = {
     name: '',
     cssLang: '',
+    vueVersion: '',
     preprocessor: '',
   };
 
@@ -40,6 +56,7 @@ export class VanGenerator extends Generator {
       const cssLang = preprocessor === 'sass' ? 'scss' : preprocessor;
 
       this.inputs.cssLang = cssLang;
+      this.inputs.vueVersion = inputs.vueVersion;
       this.inputs.preprocessor = preprocessor;
     });
   }
@@ -47,7 +64,8 @@ export class VanGenerator extends Generator {
   writing() {
     consola.info(`Creating project in ${join(CWD, this.inputs.name)}\n`);
 
-    const templateFiles = glob.sync(join(TEMPLATES_PATH, '**', '*'), {
+    const templatePath = join(TEMPLATES_ROOT, this.inputs.vueVersion);
+    const templateFiles = glob.sync(join(templatePath, '**', '*'), {
       dot: true,
     });
     const destinationRoot = this.destinationRoot();
@@ -57,7 +75,7 @@ export class VanGenerator extends Generator {
     templateFiles.forEach((filePath) => {
       const outputPath = filePath
         .replace('.tpl', '')
-        .replace(TEMPLATES_PATH, destinationRoot);
+        .replace(templatePath, destinationRoot);
       this.fs.copyTpl(filePath, outputPath, this.inputs);
     });
   }