在VSCode中,建立一個.vue文件的模板

具體步驟以下:

一、使用command + Shift + P召喚出控制檯,而後輸入snippets(跟着自動提示走就好了)並選擇。

二、接下來輸入vue並選擇,VSCode會自動生成一個vue.json的文件。這裏就是咱們要輸入模板的地方了。

三、輸入模板,具體格式以下(這是我用的格式,固然也可根據本身的喜愛進行修改)其中$0表明模板生成後,光標停留的位置。

{
// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
// same ids are connected.
// Example:
"Print to console": {
    "prefix": "vue",
    "body": [
        "<template>",
        "  <div class=\"\">$0</div>",
        "</template>",
        "",
        "<script>",
        "export default {",
        "  components:{},",
        "  data(){",
        "    return {",
        "    }",
        "  },",
        "  created(){},",
        "  mounted(){}",
        "  watch:{},",
        "  computed:{},",
        "  methods:{},",

        "}",
        "</script>",
        "<style lang=\"scss\" scoped>",
        "</style>"
    ],
    "description": "A vue file template"
}

}css

四、建立一個.vue 文件,而後輸入「vue」,點擊「tab」便可生成模板。

tips:

在vscode中使用插件是注意項:不要使用:IntelliSense for CSS, SCSS class names in HTML and Slim這個插件,他會和tab的自動補全衝突的。
圖片描述vue

相關文章
相關標籤/搜索