diff --git a/packages/create-vant-cli-app/generators/templates/src/demo-button/README.md b/packages/create-vant-cli-app/generators/templates/src/demo-button/README.md deleted file mode 100644 index b80b0b7c4..000000000 --- a/packages/create-vant-cli-app/generators/templates/src/demo-button/README.md +++ /dev/null @@ -1,43 +0,0 @@ -# DemoButton 按钮 - -### 介绍 - -DemoButton 是一个示例按钮组件 - -### 引入 - -```js -import Vue from 'vue'; -import { DemoButton } from '<%= name %>'; - -Vue.use(DemoButton); -``` - -## 代码演示 - -### 基础用法 - -```html - -``` - -## API - -### Props - -| 参数 | 说明 | 类型 | 默认值 | -|------|------|------|------| -| type | 按钮类型 | *string* | `primary` | -| color `1.0.0` | 按钮颜色 | *string* | - | - -### Events - -| 事件名 | 说明 | 回调参数 | -|------|------|------| -| click | 点击时触发 | event: Event | - -### Slots - -| 名称 | 说明 | -|------|------| -| default | 默认插槽 | diff --git a/packages/create-vant-cli-app/generators/templates/.eslintignore b/packages/create-vant-cli-app/generators/templates/vue2/.eslintignore similarity index 100% rename from packages/create-vant-cli-app/generators/templates/.eslintignore rename to packages/create-vant-cli-app/generators/templates/vue2/.eslintignore diff --git a/packages/create-vant-cli-app/generators/templates/.gitignore b/packages/create-vant-cli-app/generators/templates/vue2/.gitignore similarity index 100% rename from packages/create-vant-cli-app/generators/templates/.gitignore rename to packages/create-vant-cli-app/generators/templates/vue2/.gitignore diff --git a/packages/create-vant-cli-app/generators/templates/babel.config.js b/packages/create-vant-cli-app/generators/templates/vue2/babel.config.js similarity index 100% rename from packages/create-vant-cli-app/generators/templates/babel.config.js rename to packages/create-vant-cli-app/generators/templates/vue2/babel.config.js diff --git a/packages/create-vant-cli-app/generators/templates/docs/home.md b/packages/create-vant-cli-app/generators/templates/vue2/docs/home.md similarity index 100% rename from packages/create-vant-cli-app/generators/templates/docs/home.md rename to packages/create-vant-cli-app/generators/templates/vue2/docs/home.md diff --git a/packages/create-vant-cli-app/generators/templates/docs/quickstart.md b/packages/create-vant-cli-app/generators/templates/vue2/docs/quickstart.md similarity index 100% rename from packages/create-vant-cli-app/generators/templates/docs/quickstart.md rename to packages/create-vant-cli-app/generators/templates/vue2/docs/quickstart.md diff --git a/packages/create-vant-cli-app/generators/templates/package.json.tpl b/packages/create-vant-cli-app/generators/templates/vue2/package.json.tpl similarity index 100% rename from packages/create-vant-cli-app/generators/templates/package.json.tpl rename to packages/create-vant-cli-app/generators/templates/vue2/package.json.tpl diff --git a/packages/create-vant-cli-app/generators/templates/vue2/src/demo-button/README.md b/packages/create-vant-cli-app/generators/templates/vue2/src/demo-button/README.md new file mode 100644 index 000000000..f11c6b3c1 --- /dev/null +++ b/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 + +``` + +## API + +### Props + +| 参数 | 说明 | 类型 | 默认值 | +| ------------- | -------- | -------- | --------- | +| type | 按钮类型 | _string_ | `primary` | +| color `1.0.0` | 按钮颜色 | _string_ | - | + +### Events + +| 事件名 | 说明 | 回调参数 | +| ------ | ---------- | ------------ | +| click | 点击时触发 | event: Event | + +### Slots + +| 名称 | 说明 | +| ------- | -------- | +| default | 默认插槽 | diff --git a/packages/create-vant-cli-app/generators/templates/vue2/src/demo-button/demo/index.vue b/packages/create-vant-cli-app/generators/templates/vue2/src/demo-button/demo/index.vue new file mode 100644 index 000000000..36a4a4151 --- /dev/null +++ b/packages/create-vant-cli-app/generators/templates/vue2/src/demo-button/demo/index.vue @@ -0,0 +1,11 @@ + diff --git a/packages/create-vant-cli-app/generators/templates/src/demo-button/index.vue b/packages/create-vant-cli-app/generators/templates/vue2/src/demo-button/index.vue similarity index 100% rename from packages/create-vant-cli-app/generators/templates/src/demo-button/index.vue rename to packages/create-vant-cli-app/generators/templates/vue2/src/demo-button/index.vue diff --git a/packages/create-vant-cli-app/generators/templates/src/demo-button/test/__snapshots__/index.spec.js.snap b/packages/create-vant-cli-app/generators/templates/vue2/src/demo-button/test/__snapshots__/index.spec.js.snap similarity index 100% rename from packages/create-vant-cli-app/generators/templates/src/demo-button/test/__snapshots__/index.spec.js.snap rename to packages/create-vant-cli-app/generators/templates/vue2/src/demo-button/test/__snapshots__/index.spec.js.snap diff --git a/packages/create-vant-cli-app/generators/templates/src/demo-button/test/index.spec.js b/packages/create-vant-cli-app/generators/templates/vue2/src/demo-button/test/index.spec.js similarity index 100% rename from packages/create-vant-cli-app/generators/templates/src/demo-button/test/index.spec.js rename to packages/create-vant-cli-app/generators/templates/vue2/src/demo-button/test/index.spec.js diff --git a/packages/create-vant-cli-app/generators/templates/vant.config.js b/packages/create-vant-cli-app/generators/templates/vue2/vant.config.js similarity index 100% rename from packages/create-vant-cli-app/generators/templates/vant.config.js rename to packages/create-vant-cli-app/generators/templates/vue2/vant.config.js diff --git a/packages/create-vant-cli-app/generators/templates/vue3/.eslintignore b/packages/create-vant-cli-app/generators/templates/vue3/.eslintignore new file mode 100644 index 000000000..c05831264 --- /dev/null +++ b/packages/create-vant-cli-app/generators/templates/vue3/.eslintignore @@ -0,0 +1,4 @@ +es +lib +dist +node_modules diff --git a/packages/create-vant-cli-app/generators/templates/vue3/.gitignore b/packages/create-vant-cli-app/generators/templates/vue3/.gitignore new file mode 100644 index 000000000..8159d27da --- /dev/null +++ b/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 diff --git a/packages/create-vant-cli-app/generators/templates/vue3/babel.config.js b/packages/create-vant-cli-app/generators/templates/vue3/babel.config.js new file mode 100644 index 000000000..fa5ee221e --- /dev/null +++ b/packages/create-vant-cli-app/generators/templates/vue3/babel.config.js @@ -0,0 +1,3 @@ +module.exports = { + presets: ['@vant/cli/preset'], +}; diff --git a/packages/create-vant-cli-app/generators/templates/vue3/docs/home.md b/packages/create-vant-cli-app/generators/templates/vue3/docs/home.md new file mode 100644 index 000000000..3c7c761b5 --- /dev/null +++ b/packages/create-vant-cli-app/generators/templates/vue3/docs/home.md @@ -0,0 +1,11 @@ +# 介绍 + +### 关于 + +这是一段组件库的介绍 + +### 特性 + +- 特性一 +- 特性二 +- 特性三 diff --git a/packages/create-vant-cli-app/generators/templates/vue3/docs/quickstart.md b/packages/create-vant-cli-app/generators/templates/vue3/docs/quickstart.md new file mode 100644 index 000000000..e761aa6a9 --- /dev/null +++ b/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 %> +``` diff --git a/packages/create-vant-cli-app/generators/templates/vue3/package.json.tpl b/packages/create-vant-cli-app/generators/templates/vue3/package.json.tpl new file mode 100644 index 000000000..223361931 --- /dev/null +++ b/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" + ] +} diff --git a/packages/create-vant-cli-app/generators/templates/vue3/src/demo-button/README.md b/packages/create-vant-cli-app/generators/templates/vue3/src/demo-button/README.md new file mode 100644 index 000000000..f11c6b3c1 --- /dev/null +++ b/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 + +``` + +## API + +### Props + +| 参数 | 说明 | 类型 | 默认值 | +| ------------- | -------- | -------- | --------- | +| type | 按钮类型 | _string_ | `primary` | +| color `1.0.0` | 按钮颜色 | _string_ | - | + +### Events + +| 事件名 | 说明 | 回调参数 | +| ------ | ---------- | ------------ | +| click | 点击时触发 | event: Event | + +### Slots + +| 名称 | 说明 | +| ------- | -------- | +| default | 默认插槽 | diff --git a/packages/create-vant-cli-app/generators/templates/src/demo-button/demo/index.vue b/packages/create-vant-cli-app/generators/templates/vue3/src/demo-button/demo/index.vue similarity index 50% rename from packages/create-vant-cli-app/generators/templates/src/demo-button/demo/index.vue rename to packages/create-vant-cli-app/generators/templates/vue3/src/demo-button/demo/index.vue index 8e4c835c4..013d97cbb 100644 --- a/packages/create-vant-cli-app/generators/templates/src/demo-button/demo/index.vue +++ b/packages/create-vant-cli-app/generators/templates/vue3/src/demo-button/demo/index.vue @@ -1,9 +1,9 @@ diff --git a/packages/create-vant-cli-app/generators/templates/vue3/src/demo-button/index.vue b/packages/create-vant-cli-app/generators/templates/vue3/src/demo-button/index.vue new file mode 100644 index 000000000..29ac1d504 --- /dev/null +++ b/packages/create-vant-cli-app/generators/templates/vue3/src/demo-button/index.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/packages/create-vant-cli-app/generators/templates/vue3/src/demo-button/test/__snapshots__/index.spec.js.snap b/packages/create-vant-cli-app/generators/templates/vue3/src/demo-button/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..e9030c705 --- /dev/null +++ b/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`] = ``; diff --git a/packages/create-vant-cli-app/generators/templates/vue3/src/demo-button/test/index.spec.js b/packages/create-vant-cli-app/generators/templates/vue3/src/demo-button/test/index.spec.js new file mode 100644 index 000000000..d87d7d531 --- /dev/null +++ b/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(); +}); diff --git a/packages/create-vant-cli-app/generators/templates/vue3/vant.config.js b/packages/create-vant-cli-app/generators/templates/vue3/vant.config.js new file mode 100644 index 000000000..749ef1a35 --- /dev/null +++ b/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 按钮', + }, + ], + }, + ], + }, +}; diff --git a/packages/create-vant-cli-app/src/generator.ts b/packages/create-vant-cli-app/src/generator.ts index 5ee5c0bc0..0ab11c7dc 100644 --- a/packages/create-vant-cli-app/src/generator.ts +++ b/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); }); }