chore(cli): extract create-vant-cli-app package

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

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

packages/create-vant-cli-app/generators/templates/.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/babel.config.js

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

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

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

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

@@ -0,0 +1,11 @@
+# 快速上手
+
+### 安装
+
+```bash
+# 通过 npm 安装
+npm i vant -S
+
+# 通过 yarn 安装
+yarn add vant
+```

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

@@ -0,0 +1,66 @@
+{
+  "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",
+      "git add"
+    ],
+    "*.{vue,css,less,scss}": [
+      "stylelint --fix",
+      "git add"
+    ]
+  },
+  "peerDependencies": {
+    "vue": "^2.6.11",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "devDependencies": {
+    "@vant/cli": "^2.0.0",
+    "babel-plugin-import": "^1.13.0",
+    "vue": "^2.6.11",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "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/src/demo-button/README.md

@@ -0,0 +1,43 @@
+# MyButton 按钮
+
+### 介绍
+
+MyButton 是一个示例按钮组件
+
+### 引入
+
+``` javascript
+import Vue from 'vue';
+import { MyButton } from 'demo-ui';
+
+Vue.use(MyButton);
+```
+
+## 代码演示
+
+### 基础用法
+
+```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/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/src/demo-button/index.less

@@ -0,0 +1,3 @@
+.test {
+  color: red;
+}

packages/create-vant-cli-app/generators/templates/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="less">
+.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/src/demo-button/test/index.spec.js

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

packages/create-vant-cli-app/generators/templates/src/style/base.less

@@ -0,0 +1,5 @@
+@import "./var.less";
+
+body {
+  color: @text-color;
+}

packages/create-vant-cli-app/generators/templates/src/style/var.less

@@ -0,0 +1,2 @@
+@primary-color: #f44;
+@text-color: #4a4a4a;

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

@@ -0,0 +1,36 @@
+module.exports = {
+  name: '<%= name %>',
+  build: {
+    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/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "create-vant-cli-app",
+  "version": "1.0.0",
+  "description": "Create Vant Cli App",
+  "main": "lib/index.js",
+  "bin": {
+    "create-vant-cli-app": "./lib/index.js"
+  },
+  "scripts": {
+    "dev": "tsc --watch",
+    "release": "tsc & release-it"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/youzan/vant/tree/dev/packages/create-vant-cli-app"
+  },
+  "keywords": [
+    "vant"
+  ],
+  "author": "chenjiahan",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/fs-extra": "^8.0.1",
+    "@types/yeoman-generator": "^3.1.4",
+    "typescript": "^3.7.4"
+  },
+  "dependencies": {
+    "chalk": "^3.0.0",
+    "consola": "^2.11.3",
+    "fs-extra": "^8.1.0",
+    "inquirer": "^7.0.3",
+    "yeoman-generator": "^4.4.0"
+  },
+  "release-it": {
+    "git": {
+      "tag": false,
+      "commitMessage": "chore: release create-vant-cli-app@${version}"
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+import { join } from 'path';
+
+export const CWD = process.cwd();
+export const GENERATOR_DIR = join(__dirname, '../generators');

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

@@ -0,0 +1,87 @@
+import chalk from 'chalk';
+import consola from 'consola';
+import { join } from 'path';
+import { CWD, GENERATOR_DIR } from './constant';
+import Generator from 'yeoman-generator';
+
+const TEMPLATES = join(GENERATOR_DIR, 'templates');
+const PROMPTS = [
+  {
+    name: 'preprocessor',
+    message: 'Select css preprocessor',
+    type: 'list',
+    choices: ['Less', 'Sass']
+  }
+];
+
+export class VanGenerator extends Generator {
+  inputs = {
+    name: '',
+    preprocessor: ''
+  };
+
+  constructor(name: string) {
+    super([], {
+      env: {
+        cwd: join(CWD, name)
+      },
+      resolved: GENERATOR_DIR
+    });
+
+    this.inputs.name = name;
+  }
+
+  async prompting() {
+    return this.prompt(PROMPTS).then(inputs => {
+      this.inputs.preprocessor = inputs.preprocessor as string;
+    });
+  }
+
+  writing() {
+    consola.info(`Creating project in ${join(CWD, this.inputs.name)}\n`);
+
+    const copy = (from: string, to?: string) => {
+      this.fs.copy(join(TEMPLATES, from), this.destinationPath(to || from));
+    };
+
+    const copyTpl = (name: string) => {
+      this.fs.copyTpl(
+        join(TEMPLATES, name),
+        this.destinationPath(name),
+        this.inputs
+      );
+    };
+
+    copy('.gitignore');
+    copy('.eslintignore');
+    copy('babel.config.js');
+    copy('src/**/*', 'src');
+    copy('docs/**/*', 'docs');
+    copyTpl('package.json');
+    copyTpl('vant.config.js');
+  }
+
+  install() {
+    console.log();
+    consola.info('Install dependencies...\n');
+
+    process.chdir(this.inputs.name);
+
+    this.installDependencies({
+      npm: false,
+      bower: false,
+      yarn: true,
+      skipMessage: true
+    });
+  }
+
+  end() {
+    const { name } = this.inputs;
+
+    console.log();
+    consola.success(`Successfully created ${chalk.yellow(name)}.`);
+    consola.success(
+      `Run ${chalk.yellow(`cd ${name} && yarn dev`)} to start development!`
+    );
+  }
+}

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

@@ -0,0 +1,27 @@
+import inquirer from 'inquirer';
+import { mkdirSync, existsSync } from 'fs-extra';
+import { VanGenerator } from './generator';
+
+const PROMPTS = [
+  {
+    type: 'input',
+    name: 'name',
+    message: 'Your package name'
+  }
+];
+
+export default async function run() {
+  const { name } = await inquirer.prompt(PROMPTS);
+
+  if (!existsSync(name)) {
+    mkdirSync(name);
+  }
+
+  const generator = new VanGenerator(name);
+
+  return new Promise(resolve => {
+    generator.run(resolve);
+  });
+}
+
+run();

packages/create-vant-cli-app/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "outDir": "./lib",
+    "module": "commonjs",
+    "strict": true,
+    "declaration": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "lib": ["esnext"]
+  },
+  "include": ["src/**/*"]
+}