VsCode中snippets --- vue自定义代码片段
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
vue自定义代码片段
场景:当我们手上有两个项目(vue2和vue3)时,初始化页面可以使用自定义的代码片段迅速生成,这样可以减少重复编码。
Vue2代码片段
1、点击文件 → 首选项→选择配置用户代码片段
2、在弹出这个窗口中选择新建全局代码片段文件
3、选择后在此处输入文件名后按‘Enter’键确定
4、点击确定后会生成以下文件
5、替换成以下vue2代码片段
里面的内容可以根据自己的需求删减一些不必要的结构!
{
"Print to console": {
"prefix": "vue2", //这里是定义快速呼起指定代码片段的名称
"body": [
"<template>",
" <div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"export default {",
" data() {",
" return {",
"",
" };",
" },",
" computed: {},",
" watch: {},",
" methods: {",
"",
" },",
" created() {",
"",
" },",
" mounted() {",
"",
" },",
" beforeCreate() {},",
" beforeMount() {},",
" beforeUpdate() {},",
" updated() {},",
" beforeDestroy() {},",
" destroyed() {},",
" activated() {},",
" components: {},",
"}",
"</script>",
"",
"<style lang='less' scoped>", //less是css的预处理器 要根据你所选择的处理器来进行更改
"$4",
"</style>"
],
"description": "vue2代码片段"
}
}
6、使用代码片段
在.vue
文件输入vue后会自动弹出列表,自行选择要生成的代码片段
Vue3代码片段
大致步骤和上诉一致,只有代码片段内容不同
使用defineComponent语法
{
"Print to console": {
"prefix": "vue3",//使用vue3快速选择该代码片段
"body": [
"<template>",
"$1", //默认光标
"</template>",
"<script>",
" ",
"import { defineComponent, getCurrentInstance, onMounted, onBeforeMount, reactive, toRefs } from 'vue'",
"export default defineComponent({",
"name:'',",
"props: { },",
"emits:[],",
"components: {",
" ",
"},",
"setup(props, ctx){",
"const { proxy } = getCurrentInstance();",
"const state = reactive({",
" ",
"})",
"onMounted(() => {",
" ",
"})",
"onBeforeMount(() => {",
" ",
"})",
" ",
"return {",
"...toRefs(state),",
" ",
"}",
"}",
"})",
"</script>",
"<style scoped lang=\"scss\">", //根据项目中使用的语言动态填写lang的值
" ",
"</style>",
" "
],
"description": "vue3的defineComponent语法代码片段"
}
}
使用setup语法糖
{
"Print to console": {
"prefix": "v3-setup", //使用v3-setup快速选择该代码片段
"body": [
"<template>",
"$1", //默认光标
"</template>",
"<script setup lang=\"ts\">",
"import { getCurrentInstance, onBeforeMount, onMounted, reactive } from 'vue'",
"const { proxy } = getCurrentInstance();",
"const emits = defineEmits([])",
"const props = defineProps({",
" ",
"})",
"const state = reactive({",
" ",
"})",
"onBeforeMount(() => {",
" ",
"})",
"onMounted(() => {",
" ",
"})",
"defineExpose({ state })",
" ",
"</script> ",
"<style lang=\"scss\" scoped>", //根据项目中使用的语言动态填写lang的值
" ",
"</style>"
],
"description": "vue3的setup代码块"
}
}
GitHub 加速计划 / vu / vue
207.53 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 4 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)