vscode如何编辑vue？VSCode一键生成.vue模版

安装Vetur插件

Vetur插件可以识别vue文件，如下图所示

打开插件管理

搜索到插件点击安装即可

1. 找到配置文件！

中文：文件->首选项->用户代码片段->选择vue.json确定英文：Code->Preferences->User Snippets

设置菜单

搜索

2. 直接贴代码

{ // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. 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": { "prefix": "log", "body": [ "console.log('$1')", "$2" ], "description": "Log output to console" }, "Create VUE template": { "prefix": "vue", "body": [ "<template>", " <div>", " <PageHeaderLayout>", " $1", " </PageHeaderLayout>", " </div>", "</template>", "", "<script>", "// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）", "import PageHeaderLayout from '@/layouts/PageHeaderLayout'", "import ApeDrawer from '@/components/ApeDrawer'", "import ModalDialog from '@/components/ModalDialog'", "import ApeUploader from '@/components/ApeUploader'", "import ApeEditor from '@/components/ApeEditor' ", "import { mapGetters } from 'vuex'", "", "export default {", " components: {", " PageHeaderLayout,", " ApeDrawer,", " ModalDialog,", " ApeUploader,", " ApeEditor", " },", " // 定义属性", " data() {", " return {", " $2", " }", " },", " // 计算属性，会监听依赖属性值随之变化", " computed: {", " ...mapGetters(['userPermissions','buttonType'])", " },", " // 监控data中的数据变化", " watch: {},", " // 方法集合", " methods: {", " $3", " },", " // 生命周期 - 创建完成（可以访问当前this实例）", " created() {", " $4", " },", " // 生命周期 - 挂载完成（可以访问DOM元素）", " mounted() {", " $5", " },", " beforeCreate() {}, // 生命周期 - 创建之前", " beforeMount() {}, // 生命周期 - 挂载之前", " beforeUpdate() {}, // 生命周期 - 更新之前", " updated() {}, // 生命周期 - 更新之后", " beforeDestroy() {}, // 生命周期 - 销毁之前", " destroyed() {}, // 生命周期 - 销毁完成", " activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发", "}", "</script>", "", "<style lang='stylus' scoped>", " $6", "</style>" ], "description": "Create VUE template" }}

3. 说重点
1. "Print to console"、"Create VUE template"`就是起了一个名字（key），就是说可以定义很多规则让自己的开发速度坐上火箭！
2. prefix，很重要，快捷标签。在新建的vue文件用输入它，并选择回车后，自己定义的结构就生成了，不。
3. body，这个非常重要，就是生成的结构内容了，直接导致你的火箭速度。
4. $1,$2,$3……，这是是啥呢，就是你快捷生成结构后，光标所在的位置，当然肯定是在1位置。在我们定义结构后肯定个有些地方时要修改或者增加你内容你的，但是移动鼠标/触摸板去找到这些位置这是我们习惯的用法。有了上面的定义，直接TAB键，就会依次准备定位到了该位置。神速……

• 4. 总结
• 没啥好总结，去飞吧！

HyperfCMS在等你，https://wiki.hyperfcms.com/

HyperfCMS 是基于 Swoole Hyperf VUE Element UI Ant Design 设计标准 Ant Design Pro 样式参考 实现的高性能(PHP协程、PHP微服务)、高灵活性、前后端分离(后台)，具有简单大气设计的CMS系统。