乐趣区

vscode 创建vue模板

(确保编辑器已经安装了插件 vetur、vueHelper)1、ctrl+shift+p 输入 snippets 选中它 输入 vue》vue.json 2、或者操作 文件》首选项》用户代码片段》vue》vue.json

复制如下 也可自由编辑
{
“Print to console”: {
“prefix”: “vue”,
“body”: [
“<!– $1 –>”,
“<template>”,
“<div class=’$2′>$5</div>”,
“</template>”,
“”,
“<script>”,
“”,
“// 导入的其他文件 例如:import moduleName from ‘modulePath’;”,
“”,
“export default {“,
“”,
“//import 所引入的组件注册 ”,
“components: {“,
“”,
“},”,
“”,
“data() {“,
” return {“,
“”,
” };”,
“},”,
“”,
“// 监听属性 ”,
“computed: {“,
“”,
“},”,
“”,
“// 监控 data 中的数据变化 ”,
“watch: {“,
“”,
“},”,
“”,
“// 方法集合 ”,
“methods: {“,
“”,
“},”,
“”,
“// 生命周期 – 组件实例刚被创建 ”,
“beforeCreate() { “,
“”,
“},”,

“// 创建完成 访问当前 this 实例 ”,
“created() {“,
“”,
“},”,
“// 挂载之前 ”,
“beforeMount() { “,
“”,
“},”,

“// 挂载完成 访问 DOM 元素 ”,
“mounted() {“,
“”,
“},”,

“// 更新之前 ”,
“beforeUpdate() { “,
“”,
“},”,

“// 更新之后 ”,
“updated() { “,
“”,
“},”,

“//for keep-alive 缓存功能,组件被激活时调用 ”,
“activated() {“,
“”,
“},”,

“//for keep-alive 组件被移除时调用 ”,
“deactivated() {“,
“”,
“},”,

“// 组件销毁之前调用 ”,
“beforeDestroy() {“,
“”,
“},”,

“// 组件销毁之后调用 ”,
“destroyed() {“,
“”,
“},”,

“}”,
“</script>”,
“<style lang=’scss’ scoped>”,
“//@import url($3); 引入公共 css 类 ”,
“$4”,
“</style>”
],
“description”: “Log output to console”
}
}
最后:保存 然后新建 .vue 文件,如果新建的页面啥都没有 在这个页面输入 vue 回车 OK

退出移动版