Играете с VueJS? Уже пробовали потрясающий vue-cli с vue-loader? Если да, то вот небольшая идея, которая сэкономила мне несколько нажатий клавиш при создании новых компонентов Vue.
Я работал в Laravel пару лет, и мне нравится в нем простой способ создания новых вещей, таких как контроллеры, модели и т.д. было бы аккуратно.
В Laravel генерация контроллера происходит так…
php artisan make:controller AwesomeController
Я хотел иметь возможность делать что-то подобное с Vue…
npm run make:component Checkbox
Это возможно несколькими способами. Один из способов сделать это — использовать то, как работают скрипты npm. Если вы когда-либо пытались создать проект vue-cli, то, вероятно, видели, что происходит в файле «package.json».
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src",
"make:component": "node scripts/make/component.js"
},
Довольно просто. Напишите «npm run» плюс все, что находится внутри объекта «scripts» и презто, что-то произойдет.
Что я хотел сделать, так это создать новый предварительно заполненный файл «Whatever.vue» внутри папки «components» моего проекта всякий раз, когда я выполнял «npm run make:component Whatever» в своем терминале.
Чтобы сэкономить мне время, сгенерированный файл должен выглядеть примерно так…
<template>
</template>
<script>
import { mapState } from 'vuex'
export default {
data () {
return {}
},
computed: mapState({
})
}
</script>
<style lang="sass">
</style>
Чисто и просто. Можно добавить больше или меньше. Впрочем, это как раз то, что мне было нужно.
Итак, чтобы это работало, я создал папку «скрипты» внутри своего проекта Vue и добавил следующее…
scripts
- make
- components.js
- config.js
Внутри файла «config.js» я бы добавил несколько значений по умолчанию…
var exports = module.exports = {}
exports.flavors = {
style: 'sass',
script: null,
template: null
}
exports.css = {
scoped: false
}
И, наконец, в файле «component.js»…
const fs = require('fs')
const defaults = require('./config.js')
const args = process.argv.slice(2)
const componentName = args[0]
const templateFlavor = args[1] || defaults.flavors.template
const scriptFlavor = args[2] || defaults.flavors.script
const styleFlavor = args[3] || defaults.flavors.style
const cssScoped = args[4] || defaults.css.scoped
const source = `<template${(templateFlavor) ? ` lang="${templateFlavor}"` : ''}>
</template>
<script${(scriptFlavor) ? ` lang="${scriptFlavor}"` : ''}>
import { mapState } from 'vuex'
export default {
data () {
return {}
},
computed: mapState({
})
}
</script>
<style${(cssScoped) ? ' scoped' : ''}${(styleFlavor) ? ` lang="${styleFlavor}"` : ''}>
</style>
`
fs.writeFile(
`src/components/${componentName}.vue`,
source,
err => {
if (err) {
return console.log('Could\'t create the component.')
}
return console.log('Component generated')
}
)
Целая куча тарабарщины, но она сводится к нескольким простым вещам:
- Возьмите значения по умолчанию из «config.js».
- Отрежьте первые 2 аргумента по умолчанию из команды «npm run make:component Whatever», так что единственные аргументы, о которых нам нужно беспокоиться, — это те, которые ПОСЛЕ части «npm run make:component» нашей команды.
- Установите различные варианты и укажите, должен ли CSS быть ограниченным или нет. В моем случае я использую только Sass для своих стилей, но вы можете использовать Jade для своего шаблона или CoffeeScript для своего скрипта, например…
«npm run make:component Checkbox jade coffee»
< br /> … потому что args[1] — это вариант шаблона, а args[2] — вариант сценария. - Определите шаблон, который мы хотим для нашего компонента. Ваш пробег может отличаться. Я просто пошел с тем, что мне нужно.
- Завершите все, используя «fs», чтобы создать фактический файл «Checkbox.vue» в нашей папке «src/components».
И это действительно все, что нужно сделать.
Вы можете оживить его, используя более продвинутые плагины, такие как yargs или подобные, чтобы сделать команду более явной.
Получайте удовольствие и попробуйте VueJS, если вы еще этого не сделали.
