uniapp使用代码块创建组件模板

uniapp使用代码块创建组件模板

HBuilderX将 uni-app 常用代码封装成了以 u 开头的代码块，如在 template 标签内输入 ulist 回车，会自动生成如下代码：

通过点击介绍-高效开发技巧可以看到如下使用代码块创建的组件模板

<view class="uni-list">
    <view class="uni-list-cell">
        <view class="uni-list-cell-navigate uni-navigate-right" v-for="(item,index) in list" :key="index">
            {{item.value}}
        </view>
    </view>
</view>

hbuilder具体操作步骤

进入hbuilderX菜单 工具-代码块设置-vue代码块，然后在右边输入以下代码，最后保存重开hbuilderX后进入输入ulist即可。

	"ulist": {
		"body": [
"<view class=\"uni-list\">",
	"\t<view class=\"uni-list-cell\">",
			"\t\t<view class=\"uni-list-cell-navigate uni-navigate-right\">",
			"\t\t\t例子",
			"\t\t</view>",
	"\t</view>",
"</view>"
		],
		"prefix": "ulist",
		"project": "uni-app",
		"scope": "source.vue.html"
	}