在开发实践中，会使用到各种第三方组件，比如Element UI，通常的做法是到官网中复制模板再在本地根据设计要求进行修改，或是从其它已经实现的组件中复制相似的内容。但每次复制粘贴确实比较麻烦。

在HBuilderx中可以设置代码块来创建自己的模板库，通过代码提示快速引用已经编辑好的模板，从而提高效率。

一、实现步骤

以下以Vue模板为例介绍在HBuilderX中设置自定义代码块的方法。

1、在vue文件的template中编辑好组件内容

2、打开自定义代码块配置文件

点击菜单”工具“——”代码块设置“——”vue代码块“

3、自定义代码块编辑区

在打开的配置文件的左边是开发工具已经定义好代码块，右边为自定义代码块编辑区

4、编写代码块

修改完毕，保存即刻生效，无需重启。

5、在页面中使用

在Vue模板中输入”el“，可在语法提示中看到”Vue el-alert “，回车后可直接添加模板

二、语法说明