vscode 创建vue代码片段
下载vscode, 各版本地址: code.visualstudio.com/updates/v1_…
1、打开vscode编辑器 找到左下角设置，点用户代码片段
2、选择新建全局代码片段文件
3、设置vue2代码片段
prefix: 生成代码块的快捷键
body: 代码片段的内容
description: 代码片段描述
复制以下代码粘贴到 vue.json 中，保存即可
{
"Print to console": {
"prefix": "v2",
"body": [
"<template>",
" <div class=\"\">\n",
" </div>",
"</template>\n",
"<script>",
"export default {",
" name: '',",
" props: {\n",
" },",
" components: {\n",
" },",
" data() {",
" return {\n",
" };",
" },",
" computed: {\n",
" },",
" watch: {\n",
" },",
" created() {\n",
" },",
" mounted() {\n",
" },",
" methods: {\n",
" },",
"}",
"</script>\n",
"<style scoped lang=\"scss\">",
"",
"</style>",
],
"description": "Vue 2 Single File Component Template"
}
}
4、设置vue3代码片段
prefix: 生成代码块的快捷键
body: 代码片段的内容
description: 代码片段描述
复制以下代码粘贴到 vue.json 中，保存即可
{
"Vue 3 Template": {
"prefix": "v3",
"body": [
"<template>",
" <div class=\"\">",
" $1",
" </div>",
"</template>",
"",
"<script setup>",
"import { ref, computed, nextTick, watch, onMounted } from \"vue\"",
"import { useStore } from \"vuex\"",
"import { useRouter, useRoute } from \"vue-router\"",
"",
"const store = useStore()",
"const router = useRouter()",
"const route = useRoute()",
"",
"const total = ref(0)",
" $2",
"</script>",
"",
"<style scoped lang=\"scss\">",
" $3",
"</style>"
],
"description": "Vue 3 Single File Component Template"
}
}
5、导出 | 导入
vscode 相关设置和安装的插件等等，都可以导出，以便后续更方便使用
