1.设置.vue模板

打开编辑器,点击文件 —— 首选项 —— 用户代码片段,会弹出来一个输入框。

在输入框输入vue,回车,会打开一个vue.json文件。

在里面复制以下代码:

{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $1 -->",
"<template>",
"<div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
"//例如:import 《组件名称》 from '《组件路径》';",
"",
"export default {",
"//import引入的组件需要注入到对象中才能使用",
"components: {},",
"data() {",
"//这里存放数据",
"return {",
"",
"};",
"},",
"//监听属性 类似于data概念",
"computed: {},",
"//监控data中的数据变化",
"watch: {},",
"//方法集合",
"methods: {",
"",
"},",
"//生命周期 - 创建完成(可以访问当前this实例)",
"created() {",
"",
"},",
"//生命周期 - 挂载完成(可以访问DOM元素)",
"mounted() {",
"",
"},",
"beforeCreate() {}, //生命周期 - 创建之前",
"beforeMount() {}, //生命周期 - 挂载之前",
"beforeUpdate() {}, //生命周期 - 更新之前",
"updated() {}, //生命周期 - 更新之后",
"beforeDestroy() {}, //生命周期 - 销毁之前",
"destroyed() {}, //生命周期 - 销毁完成",
"activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发",
"}",
"</script>",
"<style lang='scss' scoped>",
"//@import url($3); 引入公共css类",
"$4",
"</style>"
],
"description": "Log output to console"
}
}

模板内容可按自己的喜好自行修改。

然后新建一个.vue文件,输入vue然后按tab键。

2.如果第一步没有成功

如果第一步成功是最好的,万一按tab键没有成功生成模板,而是多了一个空格:

步骤一:点击文件 —— 首选项 —— 设置,修改以下设置:

"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"emmet.triggerExpansionOnTab": true

步骤二:点击编辑器右下角笑脸左边的文件类型,选择配置文件关联,输入vue然后回车。右下角的文件类型就会从html变成vue。这时再用tab键就可以成功生成模板了~

vscode里使用.vue代码模板的方法的更多相关文章

  1. 在普通js文件里引入vue实例的方法

    首先是我是写了一个 Loading 插件然后 是挂在打vue.prototype 原型上的. 在main.js中use使用了这个插件. 至此vue原型是就被我挂上 $loadding方法了. 然后我想 ...

  2. vscode eslint配置vue遇到的问题

    一.准备工作 vscode里安装eslint和vetur插件,全局安装eslint,并在项目根目录中eslint --init 二.Cannot find module 'eslint-config- ...

  3. VUE源代码调试方法

    前两条出自: https://link.zhihu.com/?target=http%3A//www.orzzone.com/vuejs-project-debug.html https://www. ...

  4. 千锋教育Vue组件--vue基础的方法

    课程地址: https://ke.qq.com/course/251029#term_id=100295989 <!DOCTYPE html> <html> <head& ...

  5. Vue实例和方法

    github地址:https://github.com/manlili/vue_learn里面的lesson03 一 实例 每个 Vue 实例都会代理其 data 对象里所有的属性,改变data,vu ...

  6. Vue.observable()使用方法

    前言 随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js ...

  7. VSCode 快速生成 .vue 模版

    VSCode 快速生成 .vue 模版 安装vscode 官网:https://code.visualstudio.com/ 安装 Vetur 插件,识别 vue 文件 插件库中搜索Vetur,点击安 ...

  8. Entity Framework 手动使用migration里面的up 和down方法。

    add-migration -IgnoreChanges 201606100717405_201606100645298_InitialCreate 执行这一句后 ,清空使用map生成的代码,个人不太 ...

  9. Java Native Interface 五 JNI里的多线程与JNI方法的注册

    本文是<The Java Native Interface Programmer's Guide and Specification>读书笔记 JNI里的多线程 在本地方法里写有关多线程的 ...

随机推荐

  1. Unity3D|-使用ScriptableObject脚本化对象来制作一个简单的对象池

    ScriptableObject是一个用于生成单独Asset的结构.同时,它也能被称为是Unity中用于处理序列化的结构. 可以作为我们存储资源数据的有效方案.同时此资源可以作为我们AB包的有效资源! ...

  2. Oracle创建表、修改字段类型

    1.创建表 1.创建表 create table SCM_PER( --SCM_PER表名 ID ) primary key,--主键ID USERID ),--用户ID --Permission v ...

  3. Python 入门小实例笔记

    实例1:打印用户输入的姓名与手机号码知识点:编码,获取输入,变量,标准输出 #encoding=utf-8 import time #1.提示用户输入信息 name = input ("请输 ...

  4. LeetCode--036--有效的数独(java)

    判断一个 9x9 的数独是否有效.只需要根据以下规则,验证已经填入的数字是否有效即可. 数字 1-9 在每一行只能出现一次. 数字 1-9 在每一列只能出现一次. 数字 1-9 在每一个以粗实线分隔的 ...

  5. 杂记:Django和static,Nginx配置路径,json_schema

    前记:知识无处不在,要懂得珍惜,找到适合自己的方法高效地学习有价值的知识,不念过去,不畏将来. Django对待静态资源,在非前后端分离时的常识 Django会对项目app下的static文件夹的静态 ...

  6. php 类名和方法名相同(构造函数)

    //php 5.6class father{ public function __construct() { echo __METHOD__; }} class son extends father{ ...

  7. mac系统 安装pip,用python读写excel(xlrd、xlwt)安装

    1: 先安装python, 下载地址:https://www.python.org/downloads/release/python-372/ 2: 安装pip 下载一个get-pip.py的文件  ...

  8. vue-实例生命周期钩子(不太明白)

    每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项}) 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要 ...

  9. servlet进行用户名和密码校验

    效果截图: 链接:https://pan.baidu.com/s/1eR051bUPerpEM3TDLtq9Xw 提取码:rjpy

  10. 上海MVP见面会

    很愉快,很有收获的一次见面!