feature: add create template (#1762)
This commit is contained in:
parent
a9b4467472
commit
896b7369bf
|
@ -13,7 +13,8 @@
|
|||
"lint": "eslint --ext .js,.vue src",
|
||||
"test": "npm run lint",
|
||||
"test:unit": "vue-cli-service test:unit",
|
||||
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
|
||||
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
|
||||
"new": "plop"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
|
@ -87,6 +88,7 @@
|
|||
"lint-staged": "7.2.2",
|
||||
"mockjs": "1.0.1-beta3",
|
||||
"node-sass": "^4.9.0",
|
||||
"plop": "2.3.0",
|
||||
"runjs": "^4.3.2",
|
||||
"sass-loader": "^7.1.0",
|
||||
"script-ext-html-webpack-plugin": "2.1.3",
|
||||
|
|
|
@ -0,0 +1,26 @@
|
|||
{{#if template}}
|
||||
<template>
|
||||
<div />
|
||||
</template>
|
||||
{{/if}}
|
||||
|
||||
{{#if script}}
|
||||
<script>
|
||||
export default {
|
||||
name: '{{ properCase name }}',
|
||||
props: {},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
{{/if}}
|
||||
|
||||
{{#if style}}
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
{{/if}}
|
|
@ -0,0 +1,55 @@
|
|||
const { notEmpty } = require('../utils.js')
|
||||
|
||||
module.exports = {
|
||||
description: 'generate vue component',
|
||||
prompts: [{
|
||||
type: 'input',
|
||||
name: 'name',
|
||||
message: 'component name please',
|
||||
validate: notEmpty('name')
|
||||
},
|
||||
{
|
||||
type: 'checkbox',
|
||||
name: 'blocks',
|
||||
message: 'Blocks:',
|
||||
choices: [{
|
||||
name: '<template>',
|
||||
value: 'template',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
name: '<script>',
|
||||
value: 'script',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
name: 'style',
|
||||
value: 'style',
|
||||
checked: true
|
||||
}
|
||||
],
|
||||
validate(value) {
|
||||
if (value.indexOf('script') === -1 && value.indexOf('template') === -1) {
|
||||
return 'Components require at least a <script> or <template> tag.'
|
||||
}
|
||||
return true
|
||||
}
|
||||
}
|
||||
],
|
||||
actions: data => {
|
||||
const name = '{{properCase name}}'
|
||||
const actions = [{
|
||||
type: 'add',
|
||||
path: `src/components/${name}/index.vue`,
|
||||
templateFile: 'plop-templates/component/index.hbs',
|
||||
data: {
|
||||
name: name,
|
||||
template: data.blocks.includes('template'),
|
||||
script: data.blocks.includes('script'),
|
||||
style: data.blocks.includes('style')
|
||||
}
|
||||
}]
|
||||
|
||||
return actions
|
||||
}
|
||||
}
|
|
@ -0,0 +1,9 @@
|
|||
exports.notEmpty = name => {
|
||||
return v => {
|
||||
if (!v || v.trim === '') {
|
||||
return `${name} is required`
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
|
@ -0,0 +1,26 @@
|
|||
{{#if template}}
|
||||
<template>
|
||||
<div />
|
||||
</template>
|
||||
{{/if}}
|
||||
|
||||
{{#if script}}
|
||||
<script>
|
||||
export default {
|
||||
name: '{{ properCase name }}',
|
||||
props: {},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {},
|
||||
mounted() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
{{/if}}
|
||||
|
||||
{{#if style}}
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
{{/if}}
|
|
@ -0,0 +1,55 @@
|
|||
const { notEmpty } = require('../utils.js')
|
||||
|
||||
module.exports = {
|
||||
description: 'generate a view',
|
||||
prompts: [{
|
||||
type: 'input',
|
||||
name: 'name',
|
||||
message: 'view name please',
|
||||
validate: notEmpty('name')
|
||||
},
|
||||
{
|
||||
type: 'checkbox',
|
||||
name: 'blocks',
|
||||
message: 'Blocks:',
|
||||
choices: [{
|
||||
name: '<template>',
|
||||
value: 'template',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
name: '<script>',
|
||||
value: 'script',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
name: 'style',
|
||||
value: 'style',
|
||||
checked: true
|
||||
}
|
||||
],
|
||||
validate(value) {
|
||||
if (value.indexOf('script') === -1 && value.indexOf('template') === -1) {
|
||||
return 'View require at least a <script> or <template> tag.'
|
||||
}
|
||||
return true
|
||||
}
|
||||
}
|
||||
],
|
||||
actions: data => {
|
||||
const name = '{{name}}'
|
||||
const actions = [{
|
||||
type: 'add',
|
||||
path: `src/views/${name}/index.vue`,
|
||||
templateFile: 'plop-templates/view/index.hbs',
|
||||
data: {
|
||||
name: name,
|
||||
template: data.blocks.includes('template'),
|
||||
script: data.blocks.includes('script'),
|
||||
style: data.blocks.includes('style')
|
||||
}
|
||||
}]
|
||||
|
||||
return actions
|
||||
}
|
||||
}
|
|
@ -0,0 +1,7 @@
|
|||
const viewGenerator = require('./plop-templates/view/prompt')
|
||||
const componentGenerator = require('./plop-templates/component/prompt')
|
||||
|
||||
module.exports = function(plop) {
|
||||
plop.setGenerator('view', viewGenerator)
|
||||
plop.setGenerator('component', componentGenerator)
|
||||
}
|
Loading…
Reference in New Issue