前端VUE頁面快速生成

VSCode左下角設置圖標  ==>  用戶代碼片段  ==>  搜索 vue.json ==>  回車

復制粘貼以下代碼

{
    // 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": "log",
    //     "body": [
    //         "console.log('$1');",
    //         "$2"
    //     ],
    //     "description": "Log output to console"
    // }
    "Print to console": {
        "prefix": "vue",
        "body": [
        "<template>"
        "  <div>代碼片段生成</div>"
        "</template>"
        ""
        "<script>"
        "export default {"
        "  data: function() {"
        "    return {}"
        "  },"
        "  methods: {},"
        "  created() {}"
        "}"
        "</script>"
        ""
        "<style lang='less' scoped>"
        "</style>"
        ""
        ],
        "description": "vue模板一鍵生成"
    }
}

保存

 

然后任何的vue 文件中都能通過 vue 指令 一鍵生成頁面所需的vue模板

空頁面第一次打沒有提示的話, 是你的電腦速度不行, 等2s鍾, 刪除 從新打, 就會出 vue 提示

生成的模板如下

<template>
  <div>代碼片段生成</div>
</template>

<script>
export default {
  data: function() {
    return {};
  },
  methods: {},
  created() {}
};
</script>

<style lang='less' scoped>
</style>

style 需要注意以下, 如果項目中 生成的是 app.vue , 需要刪除 scoped , 不然 定義的全局樣式 不會生效 , 也可以通過 main.js 中單獨引入一個css 文件

使用的預編譯 是 less 如果需要寫 原生的 css 代碼, 請刪除 lang = 'less' , 不然 也會報錯

 

關於 vue 格式化 函數前沒有空格 , 函數結尾會生成 分號, 或者單雙引號的問題, 請看

https://www.cnblogs.com/liuyuexue520/p/13099714.html