Visual Studio Code创建 Vue 基础代模板-CFANZ编程社区

VSCode（Visual Studio Code）也是支持用户去创建自己想要的代码段的

创建的步骤：

‘文件’ → ‘首选项’ → ‘用户代码段’ （依次进入）

Visual Studio Code创建 Vue 基础代模板_html5

进来之后会有这么一个框，不要慌张，也不要迷茫

对什么文件创建代码模板，就在搜索框中输入文件名如‘html’

下面会出现新的提示，点击鼠标或者按Enter键都可以进入编辑页面

Visual Studio Code创建 Vue 基础代模板_html_02

进来之后可能会是下图这个样子

Visual Studio Code创建 Vue 基础代模板_js_03

敲黑板啦

在上图的大括号中写入下面的代码片段，保存就🆗啦！！！

"Html5-Vue": {
        "prefix": "Vue",// Vue 是模板名称 
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">\n",
            "<head>",
            "\t<meta charset=\"UTF-8\">",
            "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
            "\t<title>Document</title>",
            "\t<script src=\"./lib/vue-2.6.11.js\"></script>",//Vue包的路径
            "</head>\n",
            "<body>",
            "\t<div id=\"app\">$1</div>\n",
            "\t<script>",
            "\t\tvar vm = new Vue({",
            "\t\t\tel: '#app',",
            "\t\t\tdata: {},",
            "\t\t\tmethods: {}",
            "\t\t});",
            "\t</script>",
            "</body>\n",
            "</html>"
        ],
        "description": "Vue代码块" //提示语 根据自己的喜好更改
    }

上述代码中注释的部分根据自己的实际情况和喜好更改，尤其是导包那句，项目不同包管理文件夹可能也不同，编写代码的时候根据项目对语句进行调整。

当然代码段中的其他部分也是可以更改的，毕竟这可以自定义的代码模板，全凭个人喜好