HBuilderX - 使用自定义代码块创建页面模板

墨蓝 2021-07-26 02:05 1234阅读 0赞

# HBuilderX 使用自定义代码块创建页面模板 #

1.  **进入代码块页面**  
    ![在这里插入图片描述][20201020095459478.png_pic_center]  
    工具 ——》 代码块设置 ——》 vue代码块，进入代码块页面。如下图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center]
2.  **设置代码块**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 1]  
    这里为我设置的一个代码块，如需其他格式的可根据内容自定义
    
        "unitemp":{
        	"prefix":"unitemp",
        	"body":[
        		"<template>",
        			"<view class=\"wrap\">",
        				"<view>Demo$1</view>",
        			"</view>",
        		"</template>",
        		"",
        		"<script>", "export default {", "data() {", "return {}", "}", "}", "</script>",
        		"",
        		"<style>", "</style>"
        	],
        	"project":"uni-app",
        	"scope":"source.vue.html"
        }
3.  **使用代码块**
    
    敲入关键字，回车即可，这里为 `unitemp`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 2]  
    实现效果如下，`Ctrl`\+`K` 重排代码格式即可  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 3]

[20201020095459478.png_pic_center]: /images/20210725/06b51098b71a4d5c904a7338d5e928f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/e6ebb9ba56b64f9e91fec1c5933f24c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/8626f39ecfcd4f51971693346a154a36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/730d94972b6e4b51a332460b088e0f5b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210725/66e36204fbf94062bd32309c9c6e27c2.png