1、打开 HBuilder -> 工具 -> 代码块设置 -> vue代码块 -> 自定义代码块
2、添加自己所需要的代码块 我们选择自定义代码块之后,在vue.json文件右侧 自定义代码块 中复制我们所需要的代码块 也可以自己定义
下面的是 vue2和vue3的模版代码块
{
"vue2": {
"key": "vue2",
"prefix": "vue2",
"body": [
"<template>",
"\t<view class=\"page\">vue2模板</view>",
"</template>",
"",
"<script>",
"\texport default {",
"\t\tname: \"Name\",",
"\t\tdata() {",
"\t\t\treturn {};",
"\t\t},",
"\t\tonLoad() {},",
"\t\tonShow() {},",
"\t\tmethods: {}",
"\t};",
"</script>",
"",
"<style lang=\"scss\" scoped>",
"",
"</style>"
],
"triggerAssist": true,
"description": "uniapp vue2 的页面模板"
},
"vue3": {
"key": "vue3",
"prefix": "vue3",
"body": [
"<template>",
"\t<view class=\"page\">vue3页面模板</view>",
"</template>",
"",
"<script setup>",
"\timport {",
"\t\tonLoad",
"\t} from '@dcloudio/uni-app'",
"\timport {",
"\t\tref,",
"\t\treactive",
"\t} from 'vue'",
"\timport {",
"\t\tstore",
"\t} from '@/store/index.js'",
"\tonLoad(() => {})",
"</script>",
"",
"<style lang=\"scss\" scoped>",
"",
"</style>"
],
"triggerAssist": true,
"description": "uniapp vue3 的页面模板"
}
}
3、输入vue3 || vue2 即可生成模版代码块