WebStrom、VSCode、HBulider配置新建 .vue 文件模板。

606 阅读1分钟

WebStrom

1、File ——> Settings

企业微信截图_16280606429137.png

2、Editor ——> File and Code Templates

image.png

复制以下内容到模板框中,记得修改作者哦,不然有BUG找到不人,点击Apply即可

<!--
 * @Descripttion: (对该文件的信息描述)
 * @Author: (作者)
 * @Date: (当前时间)
 -->
<template>
#[[$END$]]#
</template>

<script>
export default {
name: "${COMPONENT_NAME}",
components: {},
props: {},
data() {
    return {
    }
},
watch: {},
computed: {},
methods: {},
created() {},
mounted() {},
}
</script>

<style lang="scss" scoped>

</style>

VSCode

1、打开vscode,在菜单栏中选择 文件 / 首选项 / 用户片段,这时就会打开搜索栏

image.png

2、新建/修改用户片段:输入vue.json

image.png

3、手动配置vue.json文件

复制以下代码,粘贴到vue.json文件中,修改第七行作者信息

{
    "Print to console":{
    "prefix""vue",
        "body": [
            "<!--",
            " * @Descripttion: (对该文件的信息描述)",
            " * @Author: 作者",
            " * @Date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR-$CURRENT_MINUTE-$CURRENT_SECOND",
            "-->",
            "<template>",
            "  <div class=\"main_content\">$8</div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "  components: {},",
            "  props: {},",
            "  data() {",
            "    return {",
            "    }",
            "  },",
            "  watch: {},",
            "  computed: {},",
            "  methods: {},",
            "  created() {},",
            "  mounted() {}",
            "}",
            "</script>",
            "<style lang=\"scss\" scoped>",
            "</style>"
        ],
        "description""A vue file template"
 }
 }

HBulider

1、选择工具-代码块设置-vue代码块,这时编辑器会自动打开vue.json文件

image.png

2、复制以下内容至vue.json文件中,修改第七行的作者姓名

{
    "A vue file template":{
    "prefix": "vue",
        "body": [
            "<!--",
            " * @Descripttion: (对该文件的信息描述)",
            " * @Author: 作者",
			" * @Date: 当前时间" , 
            "-->",
            "<template>",
            "  <div class=\"main_content\">$8</div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "  components: {},",
            "  props: {},",
            "  data() {",
            "    return {",
            "    }",
            "  },",
            "  watch: {},",
            "  computed: {},",
            "  methods: {},",
            "  created() {},",
            "  mounted() {}",
            "}",
            "</script>",
            "<style lang=\"scss\" scoped>",
            "</style>"
        ],
        "description": "A vue file template"
 }
 }