在HBuilder X中基于vue3创建一个组合式自定义模板

为什么要创建自定义模板？

我们在HBuilder X中开发项目的时候HBuilder X提供的模板太过局限，我们可以自己创建一个方便自己开发的模板，提高我们的开发效率

创建步骤：

1.先在HBuilder X创建一个组合式空模板

2.在这个页面上写下自己 自定义的模板，这里我自定义了一个基于vue3的模板

<template>
	<view class="">
		
	</view>
</template>

<script setup>
	/**
	 * setup表示语法糖,以一种更简洁和更接近JavaScript模块的方式来编写组件逻辑,
	 * 并且使用了它之后就不用像在vue2那样，在export default 对象中声明 setup() 函数
	 */
</script>

<style lang="scss" scoped>	
/**
 * lang="scss" 声明style的语言是“scss”(是一个CSS扩展语言,也是CSS预处理器,在vue项目构建的时候会转成标准的CSS代码)
 * scoped是表示在此页面写的样式不会污染到其他页面，只在当前页面有效
*/
	       
</style>

3.先Ctrl+A然后Ctrl+C，复制你在这个页面写的所有东西，然后右击此项目的pages文件夹点击新建页面里面的自定义模板

4.在弹出的文件夹里面右击创建一个文本文件，然后改成你想要的名字，这里创建一个vue3.vue文件

在你新建的时候不显示扩展名怎么办？

以windows11为例

5.选择你刚刚创建好的文件右击，然后再选择再记事本里面编辑，把你复制的代码Ctrl+V粘贴到里面Ctrl+S保存之后关闭，就可以在HBuilder X右击新建页面的时候看到刚才添加的模板了