vue一键生成HTML文档

最新推荐文章于 2024-04-11 03:04:42 发布

是炎炎哦（谁的小马甲）

最新推荐文章于 2024-04-11 03:04:42 发布

阅读量1.6k

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/weixin_45650440/article/details/109952967

版权

一键生成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即可生成

是炎炎哦（谁的小马甲）

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue一键生成HTML文档

一键生成HTML vue文档htmlCtrl+shift+p 打开，选择 Preferences：User configure snippets，输入html下面展示一些内联代码片。// 将下面的注释替换为自定义模板{ // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // description.
复制链接

扫一扫