一键快速生成自定义vue3模板代码
根据上图打开配置用户代码片段
搜索vue.jsond打开
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $0 -->",
"<template>",
" <div></div>",
"</template>",
"",
"<script lang='ts'>",
"import { reactive,toRefs,onBeforeMount,onMounted} from 'vue'",
"interface DataProps {}",
"export default {",
" name: '',",
" setup() {",
" console.log('1-开始创建组件-setup')",
" const data: DataProps = reactive({",
"",
" })",
" onBeforeMount(() => {",
" console.log('2.组件挂载页面之前执行----onBeforeMount')",
" })",
" onMounted(() => {",
" console.log('3.-组件挂载到页面之后执行-------onMounted')",
" })",
" const refData = toRefs(data);",
" return {",
" ...refData,",
" }",
"",
" }",
" };",
"</script>",
"<style scoped>",
"</style>"
],
"description": "a vue template"
},
"vue3模版代码":{
"prefix": "vue3",
"body": [
"<!-- vue3代码 小C学安全 -->",
"<template>",
" <div></div>",
"</template>",
"",
"<script setup lang='ts'>",
"import { ref,reactive} from 'vue'",
"</script>",
"<style scoped>",
"</style>"
],
"description": "a vue3 template"
}
}
将以上代码替换并保存
打开新的组件文件
浏览器自动打开
找到 package.json 配置文件!
"scripts": {
"dev": "vite --open",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
