以前开发vue项目的时候，创建新的vue文件，里面空白的，还得一个个写，然后就一味的粘贴复制，很累啊，然后在简书借鉴到一篇文章，使用vs code创建vue代码片段，然后进行小的修改，如下：
1.vue代码片段
创建用户代码片段
设置→用户代码片段
用户代码片段
然后再弹出的输入框中输入vue，然后回车(Enter)，效果如下：
vue.json
粘贴复制就好啦
{
"vue-template": {//模板名称
"prefix": "vue",//触发条件
"body": [//内容
"<!--",
"* @description ${1:参数1}",
"* @fileName ${TM_FILENAME_BASE}",
"* @author userName",
"* @date ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
"* @version V1.0.0",
"!-->",
"<template>",
" <div id='${TM_FILENAME_BASE}'",
"\t\t\t class='${TM_FILENAME_BASE}'>",
" </div>",
"</template>",
"",
"<script>",
"export default {",
" props: { // 父辈向子辈传参",
" },",
" name: '${TM_FILENAME_BASE}',",
" data () {",
" return {",
"",
" }",
" },",
" created () { // 实例被创建之后执行代码",
"",
"\t},",
" computed: { // 计算属性",
"",
"\t},",
" components: { // 组件的引用",
"",
"\t},",
" methods: { // 方法",
"",
"\t},",
" mounted () { // 页面进入时加载内容",
"",
"\t},",
" watch: { // 监测变化",
"",
"\t}",
"}",
"</script>",
"<style scoped lang='less'>",
"</style>"
],
"description": "vue代码片段" //描述
}
}
使用vue的代码片段
image.png
出现提示后，按下回车(Enter),然后就会出现想要的结果了。如下图：
效果图
可能有的小伙伴设置完不好用，来试试这份setting.json
2.html5-vue代码片段
创建用户代码片段
设置→用户代码片段
新建全局代码片段
新建另存为
名字自定义 ****.json
{
"Html5-Vue": { //模板名称
"prefix": "hv",//触发条件
"body": [//内容
"<!--",
"* @description ${1:参数1}",
"* @fileName ${TM_FILENAME_BASE}",
"* @author userName",
"* @date ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
"* @version V1.0.0",
"!-->",
"<!DOCTYPE html>",
"<html lang=\"zh-CN\">\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>${TM_FILENAME_BASE}</title>",
"\t<script src=\"./vue.js\"></script>",
"</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\t\treturn {",
"",
"\t\t\t\t}",
"\t\t\t},",
"\t\t\tcreated()\t{ // 实例被创建之后执行代码",
"",
"\t\t\t},",
"\t\t\tcomputed: { // 计算属性",
"",
"\t\t\t},",
"\t\t\tcomponents: { // 组件的引用",
"",
"\t\t\t},",
"\t\t\tmethods: { // 方法",
"",
"\t\t\t},",
"\t\t\tmounted()\t{ // 页面进入时加载内容",
"",
"\t\t\t},",
"\t\t\twatch: { // 监测变化",
"",
"\t\t\t}",
"\t\t});",
"",
"\t</script>",
"</body>\n",
"</html>"
],
"description": "快速创建在html5编写的vue模板"//描述
}
}
搭配这份配置更好用setting.json
为了防止大家更改模板时出现不必要的错误，我给大家简单说一下模板中的东西：
必要的解释
不要纠结一开头写的："Html5-Vue"，这只是一个模板名字而已。
"prefix": ""这里规定的是触发模板的关键词，我这里规定触发词为vue。
我们的模板都是在"body":[]中编写的。
每一行模板代码都要用双引号""来包括。
如果双引号包括的代码中间也出现了双引号，那么需要用转义字符\转义。
\n意味着换行，\t是制表符，这两个用于生成时模板的缩进，让生成出来的模板便于阅读。
模板中出现的$1代表着光标，它的位置即光标的默认位置，可以有多个光标：$2,$3,$4等。
"description":""双引号包括的是对模板描述，同时也是你在.html页面输入触发词后，智能提示中出现的对触发词的解释。
千万别把Vscode中html.json文件自带的{}覆盖了，只需覆盖注释部分，或直接写到注释下面即可。
网友评论