vue中快速生成template

转载

网络安全守护先锋 2024-09-09 09:39:58

文章标签 vue中快速生成template vue.js Vue 代码片段 css 文章分类 机器学习人工智能

1.在开发过程中，无论我们添加页面也好还是添加组件也好。都需要不停的新建Vue文件（或者其他框架或者html/js/css文件）

以Vue项目为例，我们新建一个component或view的时候，需要新建一个.vue文件，然后写、

一般来说一个.vue 文件的格式如下:

<template>
    <div />
</template>

<script>
export default {
    data(){
        return {
            name:'123'
        }
    }
}
</script>

<style lang>

<style>

这样我们每次再页面开发之前都需要进行如下操作:

新建component/view 的对应的.vue文件/文件夹
然后打开页面写template,script,style
如果是css单独写的还要新建一个.css(less/scss等)。

假设每次我们完成上边这一系列操作需要30秒，我们一个项目有 50个vue文件。就需要1500秒，约等于25分钟。如果我们做5个vue项目，我们相当于浪费了两个小时再写这种重复性高、无聊且枯燥的代码。

作为一个程序猿有追求的程序猿，怎么能忍受在这种地方浪费大好的青春。

基于vscode的Snippets

通过vscode 的snippets我们可以自己配置自定义的snippets，从而实现快捷生成代码片段：

在Vscode里按F1，输入snippets -> 选择配置用户代码片段

选择后出现选择配置的界面，这里我们对Vue文件的代码片段进行配置，所以选择Vue.json

在打开的Vue.json里会有一段简单的说明和一个例子告诉我们如何编写代码片段，我们在vue.json中编写如下片段：

// 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文件，输入tscomponents，会出现代码提示：

确定以后会生成我们配置的代码片段：

上边生成的代码是经过格式化的，因为我们在JSON中配置的代码片段并没有调整缩进，想要生成的时候就缩进只需要在需要缩进的行的开始引号后加对应的空格即可

因为这个方案还是需要手动创建vue文件和.less文件、并且组件的name需要每次手动输入，这一点也不geek

基于plop使用命令行自动生成.vue文件

plop 不仅限于vue项目，在此只是使用vue项目为例

plop的介绍可以看官网，plop功能主要是基于inquirer和handlebars

简单的说就是通过提前配置要生成的页面模板，并且在命令行中接收指定的参数，从而生成我们需要的模板。

这里简单介绍一下我们实现的基础模板生成的流程，关于plop的 API 和其他相关内容不在赘述，感兴趣的朋友可以前往官网查阅。

安装plop

首先我们按照官网的说明在项目中安装plop

npm install --save-dev plop

基本配置

由于plop的模板基于handlebars，我们在茛目录下创建一个piop-templates文件夹，并在piop-teemplates/view里新建一个index.hbs

<template>

    <div />
    
<template>

<script>
    export default {
        name: '{{ properCase name }}',
        props: {},
        data() {
            return {}
        },
        created() {},
        mounted() {},
        methods: {}
    }

</script>

<style lang="scss" scoped>

</style>

然后编写plopfile.js

module.exports = function(piop){
    
    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;
        }
    })
}

然后在 package.json 中设置 script