代码生成通过替换模板中的特殊 flag 工作,使用 flag 代码片段或模板命令(如 vue)可以生成带有 flag 的模板代码
<template>
<div class="container"></div>
</template>
<script>
export default {
data() {
return {
/* DATA APPEND FLAG, dont del this line */
};
},
computed: {
/* COMPUTED APPEND FLAG, dont del this line */
},
methods: {
/* METHOD APPEND FLAG, dont del this line */
},
};
</script>
执行代码生成命令会进行以下动作:
在光标选中处生成对应功能的代码块
涉及变量及函数生成的命令会要求用户输入变量/函数的标识字段
在 option 组件中声明组件所需的变量和函数
举个栗子:
F1 执行 elForm 命令,输入变量标识 test
则在光标处生成 el-form 组件结构,绑定 testForm 对象,同时在 data 中声明变量 testForm
<template>
<div class="container">
<el-form :model="testForm">
<el-form-item label="label" prop="prop"> </el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
testForm: {},
/* DATA APPEND FLAG, dont del this line */
};
},
computed: {
/* COMPUTED APPEND FLAG, dont del this line */
},
methods: {
/* METHOD APPEND FLAG, dont del this line */
},
};
</script>