0
点赞
收藏
分享

微信扫一扫

Visual Studio Code创建 Vue 基础代模板


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代码块" //提示语 根据自己的喜好更改
}

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

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


举报

相关推荐

0 条评论