安装Vetur插件
Vetur插件可以识别vue文件，如下图所示
创建自己的模板
- 找到配置文件！
中文：文件->首选项->用户代码片段->选择vue.json确定
英文：Code->Preferences->User Snippets- 直接贴代码
{
// 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"
}
}- 说重点
- "Print to console"、"Create VUE template"`就是起了一个名字（key），就是说可以定义很多规则让自己的开发速度坐上火箭！
- prefix，很重要，快捷标签。在新建的vue文件用输入它，并选择回车后，自己定义的结构就生成了，不。
- body，这个非常重要，就是生成的结构内容了，直接导致你的火箭速度。
- $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系统。