hbuilder个人简介,怎么用hbuilder做个人介绍

首页 > 实用技巧 > 作者:YD1662023-11-14 03:48:26

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

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

一、实现步骤

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

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

hbuilder个人简介,怎么用hbuilder做个人介绍(1)

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

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

hbuilder个人简介,怎么用hbuilder做个人介绍(2)

3、自定义代码块编辑区

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

hbuilder个人简介,怎么用hbuilder做个人介绍(3)

4、编写代码块

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

hbuilder个人简介,怎么用hbuilder做个人介绍(4)

5、在页面中使用

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

hbuilder个人简介,怎么用hbuilder做个人介绍(5)

二、语法说明

hbuilder个人简介,怎么用hbuilder做个人介绍(6)

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.