小白零基础上手使用前端vue3（2）vscode配置代码片段

配置方法：文件-首选项-配置用户代码片段-vue.json

注：不喜欢用可以不配置

{
    // 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": "uni-vue2", // uniapp+vue2 模板提示词
        "body": [
            "<template>",
            "<view class='container'> </view>",
            "</template>",
            "<script>",
            "import { createNamespacedHelpers } from 'vuex';",
            "export default {",
            "data() {",
                "return{}",
            "},",
            "props: {},",
            "components: {},",
            "computed: {},",
            "created() {},",
            "methods: {},",
            "};",
            "</script>",
            "<style lang='scss' scoped>",
            "</style>",
        ],
        "description": "uniapp+vue2 模板"
    },
    "C": {
        "prefix": "uni-vue3", //uniapp+vue3 模板提示词
        "body": [
            "<template>",
            "<view class='page-container'> </view>",
            "</template>",
            "<script setup lang='ts'>",
            "/**",
            " * 模块引入",
            " */",
            "import { reactive, getCurrentInstance } from 'vue';",
            "import { onLoad } from '@dcloudio/uni-app';",
            "const { proxy } = getCurrentInstance();",
            "/**",
            " * 接口",
            " */",
            "/**",
            " * 数据",
            " */",
            "const state = reactive({});",
            "/**",
            " * 初始方法",
            " */",
            "onLoad(() => {});",
            "/**",
            " * 功能方法",
            " */",

            "/**",
            " * 子组件方法",
            " * const refName = ref(null);",
            " * refName.value.childFn()",
            " */",

            "/**",
            " * 生命周期方法",
            " * onShareAppMessage  分享好友",
            " * onShareTimeline 分享朋友圈",
            " * onReachBottom 页面内触底",
            " */",
            "</script>",
            "<style lang='scss' scoped>",
            "@import url('@/static/css/theme.scss');",
            ".page-container {}",
            "</style>",

        ],
        "description": "uniapp+vue3 模板"
    },
    "E": {
        "prefix": "uni-vue3-com",//uniapp+vue3+子组件 模板提示词
        "body": [
            "<template>",
            "<view class='com-page'> </view>",
            "</template>",
            "<script setup lang='ts'>",
            "/**",
            " * 模块引入",
            " */",
            "import { reactive, getCurrentInstance ,onMounted} from 'vue';",
            "const { proxy } = getCurrentInstance();",
            "/**",
            " * 接口",
            " */",
            "/**",
            " * 父组件数据",
            " */",
            "const props = defineProps({",
                "value: {",
                "type: Object,",
                "default: {},",
                "},",
            "})",
            "/**",
            " * 数据",
            " */",
            "const state = reactive({});",
            "/**",
            " * 初始方法",
            " */",
            "onMounted(() => {});",
            "/**",
            " * 功能方法",
            " */",

            "/**",
            " * 父组件方法",
            " * const emit = defineEmits(['function']);",
            " * emit('function', data);",
            " */",

            "/**",
            " * 父组件传递生命周期方法",
            " * onShareAppMessage  分享好友",
            " * onShareTimeline 分享朋友圈",
            " * onReachBottom 页面内触底",
            " */",
            "/**",
            "* 暴露子组件方法",
            " * defineExpose({childFn})",
            "*/",
            "</script>",
            "<style lang='scss' scoped>",
            "@import url('@/static/css/theme.scss');",
            ".com-page{}",
            "</style>",

        ],
        "description": "uniapp+vue3+子组件 模板"
    },
    "F": {
        "prefix": "ele-vue3",  //ele+vue3提示词
        "body": [
            "<template>",
            "<div class='page-container'></div>",
            "</template>",
            "<script setup lang='ts'>",
            "import { ElMessage } from 'element-plus';",
            "import { reactive, ref } from 'vue';",
            "import { useRouter } from 'vue-router';",
            "import { useRoute } from 'vue-router';",
            "const route = useRoute();",
            "const router = useRouter();",
            "/**",
            " * 功能方法",
            " */",
            "</script>",
            "<style lang='scss' scoped>",
            ".page-container {",
            "}",
            "</style>",
        ],
        "description": "ele+vue3提示词"
    }
}