If you need to get a better reading experience, you can click bid farewell to hand knock template, template automatically generate a base (Vue) , vuepress reading experience to be more comfortable
During development, whether we add a page or not, add components or. Vue need to keep the new file (or other frame or html / js / css files)
To Vue project, we create a new component or view, when .vue need to create a file, and then write <template>, <script>, <style>. Finally, we write business code. If a class style to write Vue and Vue also need to introduce both Component on each page.
Generally a .Vue file format is as follows:
<template>
<div />>
</template>
<script>
export default{
name:''
}
</script>
<style lang>
</style>
So every time we need to develop before the page is the following:
1, the corresponding document .vue new component / view / folder
2, then open the page write template, script, style
3, if it is to write separate css also create a new .css (less / scss, etc.).
Every time we assume that this series of operations to complete the top takes 30 seconds, we have a 50 Vue project files. It requires 1500 seconds, equal to about 25 minutes. If we do 5 Ge vue project, we have the equivalent of a waste of two hours to write high this repetitive and boring and tedious code.
As a bother batch burst pursuit of programs ape, how can stand in this place a great waste of youth.
Based vscode of Snippets
By vscode the snippets we can configure their own custom snippets, enabling fast and generate code fragment:
- In VsCode in press F1, input snippets -> user to select the configuration snippet
Select the configuration interface of choice after, where we configure the Vue snippet file, so choose Vue.json
There will be a simple explanation and an example in the open Vue.json tells us how to write code fragment, we write the following fragment in vue.json in:
// vue.json
{
"生成组件结构":{
"prefix":"tscomponent",
"body": [
"<template>"
"<div class></div>"
"</template>"
"<script lang='ts'>"
"import { Component, Vue } from 'vue-property-decorator';"
"@Component({"
"name: ''"
"})"
"export default class extends Vue {}"
"</script>"
"<style lang='less'>"
"</style>"
]
}
}
Vue then open a file, enter tscomponent , there will be code hints:
After determining the generated snippet we configured:
::: tip
On top of the generated code is formatted as code snippet we configured in JSON does not adjust indentation, indentation when you want to generate only need to add a space after the start of the corresponding quote line indent that is can
:::
Because the program still need to manually create files and .less vue file, and name the need to manually enter each component, this is not geek
Later, the Vue-element-admin study authors write hand touch hands with you with the Vue line and the background of the article to see the authors use plop generated code program, will study a little plop use the experience in my project a plop, that feeling, word, cool acid.
The line is automatically generated based plop .vue file using the command
plop is not limited vue project, just use this project as an example vue
plop introduces you can see the official website , plop function is mainly based on inquirer and handlebars
Simply put, is through the advance configuration page template to be generated, and accepts the parameters specified on the command line, we need to generate a template.
Briefly outline the basic template generation processes we achieve, plop on the API and other related content will not be repeated, interested friends can go to the official website to view.
Installation plop
First we install plop in the project in accordance with the instructions of the official website
npm install --save-dev plop
basic configuration
Due to plop based template handlebars, we create a plop-templates folder in the root directory, and create a new index.hbs in plop-templates / view in
<template>
<div />
</template>
<script>
export default {
name: '{{ properCase name }}',
props: {},
data() {
return {}
},
created() { },
mounted() { },
methods: {}
}
</script>
<style lang="" scoped>
</style>
Then write plopfile.js
module.exports = function(plop){
plop.setGenerator('test',{
description: 'generate a test',
prompts: [
{
type: 'input',
name: 'name',
message: 'view name please',
}
}
],
actions: data => {
const name = '{{name}}';
const actions = [
{
type: 'add',
path: `src/views/${name}/index.vue`,
templateFile: 'plop-templates/view/index.hbs',
data: {
name: name
}
}
];
return actions;
})
}
Script is then provided in the package.json
"script":{
"new: "plop"
}
Set up and run the script
Run npm run new or yarn new
According to the template file generation vue
Then enter the name'll see later
This time we can see the generated files views vue project / test / index.vue in
According folder and will generate the corresponding page name me what you input, and component name also have value after this command is executed.
name value is returned to the hbs through action when inserted into the page, this specific
sub-content can refer to the official documentation of plop and handlebars.
Of course, plop use is not just generating static template, we can play for free content generated configuration file to be displayed, file generation position, CSS processor type, JS / TS. Even while generating Router file.
Due to space reasons will not repeat, plop on further usage can refer to the use of this project
