一键生成HTML vue文档
html
Ctrl+shift+p 打开 ，选择 Preferences：User configure snippets，输入html,选择html.json
// 将下面的注释替换为自定义模板
{
// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. 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": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
}
替换的内容：
// 自定义模板
"Print to console": {
"prefix": "html",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\" />",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />",
" <title>Document</title>",
"</head>",
"<body>",
" <!-- 被app实例所控制的区域 -->",
" <div id=\"app\"></div>",
"",
" <script src=\"./vue.js\"></script>",
" <script>",
" // 创建实例对象",
" const app = new Vue({",
" // 指定控制的区域",
" el:'#app',",
" data:{},",
" methods:{}",
" });",
" </script>",
"</body>",
"",
"</html>",
],
"description": "Log output to console"
}
新建HTML文件，输入html即可生成
vue模板
选择vue.json.
vue 自定义模板:
// An highlighted block
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $1 -->",
"<template>",
"<div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"",
"export default {",
"components: {},",
"data() {",
"return {",
"",
"}",
"},",
"computed: {},",
"watch: {},",
"methods: {",
"",
"},",
"created() {",
"",
"},",
"mounted() {",
"",
"},",
"}",
"</script>",
"<style lang='scss' scoped>",
"$4",
"</style>"
],
"description": "Log output to console"
}
新建vue文件，输入vue即可生成