1. 先 选择 首选项 里面的 代码片段 （建议直接选择 全局作用域）
image
<br />
2. Vue 部分代码块
{
// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. 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": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
// 代码块里面的 命令 解析
// scope：作用文件类型。 例如： 指定作用范围类型"css, javascript" 建议 不用添加这个属性
// prefix： 触发代码块的字符串。 唤醒代码块的 快捷命令
// body：代码块的主体内容。
// description：代码块的简单介绍与描述。
// 重要：
// 1 代码块书写格式： 在 原文件 中 将代码粘贴过来、 每一行的代码都需要加上 双引号 ""
// 2. $ 在代码块里不显示的问题、 $$ 打两个 $ 即可。 第二个 $ 会被展示出来
// 3. 多个代码块用逗号 , 隔开
// 4. Expected comma；缺少逗号的意思。 检查代码块前后是否缺少逗号。
// 5. 选中一样的英语词， 再按快捷键 Ctrl + D 就可以将多个一样的英文词快速选中
"message error": {
"prefix": "error", //唤醒代码块的命令
"body": [
"this.$$message.error('获取参数列表失败！')",
], //代码块的主体
"description": "error" // 获取参数错误提示
},
"message success": {
"prefix": "success", //唤醒代码块的命令
"body": [
"this.$$message.success('获取参数列表成功！')",
], //代码块的主体
"description": "success" // 获取参数成功提示
},
"message info": {
"prefix": "info", //唤醒代码块的命令
"body": [
"this.$$message.info('获取参数提示信息！')",
], //代码块的主体
"description": "info" // 获取参数成功提示
},
"message warning": {
"prefix": "warning", //唤醒代码块的命令
"body": [
"this.$$message.warning('获取参数提示信息！')",
], //代码块的主体
"description": "warning" // 获取参数警告提示
},
// vue 单文件 代码块
"message vueComponent": {
"prefix": "vueComponent", //唤醒代码块的命令
"body": [
"<template>",
"<div>",
"这是 Home 根组件",
"</div>",
"</template>",
"<script>",
"export default {",
"data() {",
"return {};",
"},",
"created() {},",
"methods: {},",
// 计算属性
"computed: {},",
"}",
"</script>",
// scoped 防止 css 重叠
// 注意： 这里是单引号 （但应该是双引号）
"<style lang='less' scoped>",
"</style>",
], //代码块的主体
"description": "vueComponent" // 获取参数成功提示
},
// 搭建 axios 请求路径
"message axiosPath": {
"prefix": "axiosPath", //唤醒代码块的命令
"body": [
// 导入 axios 并设置 默认地址
"import axios from 'axios'",
"axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'",
"Vue.prototype.$http = axios",
// 调用接口
// 获取左侧菜单数据
"async getMenuList() {",
"const {data: res} = await this.$$http.get('menus')",
"console.log(res)",
"}",
], //代码块的主体
"description": "axiosPath" // 配置 axios 的请求路径
},
// 发送 http 请求代码块 get 请求
"message get": {
"prefix": "get", //唤醒代码块的命令
"body": [
// 在发送请求之前， 需要添加 awiat 和 async async 是添加在父级函数上
"const {data: res} = await this.$$http.get('')",
], //代码块的主体
"description": "get" // 获取参数错误提示
},
// post 请求
"message post": {
"prefix": "post", //唤醒代码块的命令
"body": [
// 在发送请求之前， 需要添加 awiat 和 async async 是添加在父级函数上
"const {data: res} = await this.$$http.post('')",
], //代码块的主体
"description": "post" // 获取参数错误提示
},
// put 请求
"message put": {
"prefix": "put", //唤醒代码块的命令
"body": [
// 在发送请求之前， 需要添加 awiat 和 async async 是添加在父级函数上
"const {data: res} = await this.$$http.put('')",
], //代码块的主体
"description": "put" // 获取参数错误提示
},
// delete 请求
"message delete": {
"prefix": "delete", //唤醒代码块的命令
"body": [
// 在发送请求之前， 需要添加 awiat 和 async async 是添加在父级函数上
"const {data: res} = await this.$$http.delete('')",
], //代码块的主体
"description": "delete" // 获取参数错误提示
},
// 添加 全局样式 global
"message global": {
"prefix": "global", //唤醒代码块的命令
"body": [
"html, body, #app {",
"height: 100%;",
"margin: 0;",
"padding: 0;",
"}",
// 导入 css 全局样式 在main.js中导入 css文件
// 不要忘记导入到某一个 css 的页面
"import './assets/css/global.css'",
], //代码块的主体
"description": "global" // 获取参数错误提示
},
// vue table 展开列 和 索引列
"message expand": {
"prefix": "expand", //唤醒代码块的命令
"body": [
"<!-- 展开列 下面的单引号建议改为双引号 -->",
"<el-table-column type='expand'></el-table-column>",
"<!-- 添加 index 索引 -->",
"<el-table-column type='index' label='#'></el-table-column>",
], //代码块的主体
"description": "expand" // 获取参数错误提示
},
// vue form 表单重置
"message reset": {
"prefix": "reset", //唤醒代码块的命令
"body": [
// 重置表单 addFormRef 是表单的引用
"this.$$refs.addFormRef.resetFields()",
], //代码块的主体
"description": "reset" // 获取参数错误提示
},
// vue form 表单预验证
"message valid": {
"prefix": "valid", //唤醒代码块的命令
"body": [
// 表单预验证 addFormRef 是表单的引用
"this.$refs.addFormRef.validate(valid => {",
// console.log(validate) 返回 的是 false 和 true
// true 表示 预验证 通过、 false 表示 预验证 没通过
"if(!valid) {",
"return this.$$message.error('请添加必要的参数项！！')",
"}",
// 执行添加的业务逻辑 表单校验完成后， 就可以发起请求了
"this.$$message.success('成功！')",
"})",
], //代码块的主体
"description": "valid" // 获取参数错误提示
},
// vue Message Box 弹框
"message messageBox": {
"prefix": "messageBox", //唤醒代码块的命令
"body": [
// 根据Id删除对应的用户信息
"async removeUserById() {",
"const confirmResult = await this.$$confirm('此操作将永久删除该用户, 是否继续?', '提示', {",
"confirmButtonText: '确定',",
"cancelButtonText: '取消',",
"type: 'warning'",
"}).catch( err => {",
"return err",
"})",
// 如果用户确认删除，则返回值为字符串 confirm
// 如果用户取消了删除，则返回值为字符串 cancel
// console.log(confirmResult)
"if(confirmResult !== 'confirm') {",
"return this.$$message.info('已取消删除该用户')",
"}",
"console.log('删除成功')",
], //代码块的主体
"description": "messageBox" // Message Box 弹框
},
// console.log() 代码块
"message log": {
"prefix": "log", //唤醒代码块的命令
"body": [
"console.log('ok')",
], //代码块的主体
"description": "log" // log 的代码块
},
// 作用域插槽 代码块
"message scope": {
"prefix": "scope", //唤醒代码块的命令
"body": [
"<template slot-scope='scope'>",
"</template>"
], //代码块的主体
"description": "scope" // scope 的代码块
},
// 定义全局的时间过滤器 dataFormat 调用
"message dataFormat": {
"prefix": "dataFormat", //唤醒代码块的命令
"body": [
// 定义一个全局的 时间过滤器
"Vue.filter('dataFormat', function(originVal) {",
"const dt = new Date(originVal)",
// 年月日 y-m-d
"const y = dt.getFullYear()",
// 月份是从 0 开始的，所以需要加1
// padStart() 方法用另一个字符串填充当前字符串
"const m = (dt.getMonth() + 1 +'').padStart(2, '0')",
"const d = (dt.getDate() + '').padStart(2, '0')",
// 小时分钟秒 hh:mm:ss
"const hh = (dt.getHours() + '').padStart(2, '0')",
"const mm = (dt.getMinutes() + '').padStart(2, '0')",
"const ss = (dt.getSeconds() + '').padStart(2, '0')",
// return 年月日 时分秒
"return `${y",
"}-${m",
"}-${d",
"} ${hh",
"}:${mm",
"}:${ss",
"}`",
"})",
], //代码块的主体
"description": "dataFormat" // 时间过滤器 将时间戳转换为年月日 时分秒
},
// 表单校验规则 required
"message required": {
"prefix": "required", //唤醒代码块的命令
"body": [
"{ required: true, message: '请输入商品名称', trigger: 'blur' },",
], //代码块的主体
"description": "required" // 表单校验规则
},
}
