vs2013新建html5,使用vs code创建vue/html5-vue代码片段

以前开发vue项目的时候，创建新的vue文件，里面空白的，还得一个个写，然后就一味的粘贴复制，很累啊，然后在简书借鉴到一篇文章，使用vs code创建vue代码片段，然后进行小的修改，如下：

1.vue代码片段

创建用户代码片段

设置→用户代码片段

用户代码片段

然后再弹出的输入框中输入vue，然后回车(Enter)，效果如下：

vue.json

粘贴复制就好啦

{

"vue-template": {//模板名称

"prefix": "vue",//触发条件

"body": [//内容

"",

"",

"

"\t\t\t class='${TM_FILENAME_BASE}'>",

"

",

"",

"",

"

"export default {",

" props: { // 父辈向子辈传参",

" },",

" name: '${TM_FILENAME_BASE}',",

" data () {",

" return {",

"",

" }",

" },",

" created () { // 实例被创建之后执行代码",

"",

"\t},",

" computed: { // 计算属性",

"",

"\t},",

" components: { // 组件的引用",

"",

"\t},",

" methods: { // 方法",

"",

"\t},",

" mounted () { // 页面进入时加载内容",

"",

"\t},",

" watch: { // 监测变化",

"",

"\t}",

"}",

"",

"

""

],

"description": "vue代码片段" //描述

}

}

使用vue的代码片段

image.png

出现提示后，按下回车(Enter),然后就会出现想要的结果了。如下图：

效果图

可能有的小伙伴设置完不好用，来试试这份setting.json

2.html5-vue代码片段

创建用户代码片段

设置→用户代码片段

新建全局代码片段

新建另存为

名字自定义 ****.json

{

"Html5-Vue": { //模板名称

"prefix": "hv",//触发条件

"body": [//内容

"",

"",

"\n",

"

",

"\t",

"\t",

"\t",

"\t

${TM_FILENAME_BASE}",

"\t",

"\n",

"

",

"\t

$1

\n",

"\t

"\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",

"\n",

""

],

"description": "快速创建在html5编写的vue模板"//描述

}

}

为了防止大家更改模板时出现不必要的错误，我给大家简单说一下模板中的东西：

必要的解释

不要纠结一开头写的："Html5-Vue"，这只是一个模板名字而已。

"prefix": ""这里规定的是触发模板的关键词，我这里规定触发词为vue。

我们的模板都是在"body":[]中编写的。

每一行模板代码都要用双引号""来包括。

如果双引号包括的代码中间也出现了双引号，那么需要用转义字符\转义。

\n意味着换行，\t是制表符，这两个用于生成时模板的缩进，让生成出来的模板便于阅读。

模板中出现的$1代表着光标，它的位置即光标的默认位置，可以有多个光标：$2,$3,$4等。

"description":""双引号包括的是对模板描述，同时也是你在.html页面输入触发词后，智能提示中出现的对触发词的解释。

千万别把Vscode中html.json文件自带的{}覆盖了，只需覆盖注释部分，或直接写到注释下面即可。