关于商品活动的H5页面技术总结

背景

在单个html文件里面使用vue3、jquery等其他第三方js库，实现规定的页面效果，其中主要功能是从商品json数据中读取数据，然后可以通过搜索框、下拉框、左侧菜单来筛选商户信息。

页面布局

技术要点：

1、通过路由来进行页面布局

 <div class="tab-pane" ><router-view name="routerView-1"></router-view><div class="content-wrapper"><router-view name="routerView-2"></router-view><router-view name="routerView-3"></router-view><router-view name="routerView-4"></router-view></div></div>

  // 创建路由const router = createRouter({history: createWebHashHistory(),routes: [{path: '/',components: {routerView-1: routerView-1,}},{path: '/path2',components: {routerView-1: routerView-1,routerView-2: routerView-2,routerView-3: routerView-3,}},{path: '/path3',components: {routerView-1: routerView-1,routerView-2: routerView-2,}},]});

（1）在视图中通过路由组件名字来显示，如果路由路径下没有传入对应的组件，那么视图中就不会显示该路由视图。

（2） 在页面中，可以有多个路由出口，其中出口内容可以通用命名来指定，其中如果传入对应的组件，那么该路由视图出口就有内容，否则就不会展示，相当于没有内容。

（3） 其中路由创建、组件定义都是在 const app = createApp(App);的App之外定义的，然后app.use（router)就可以引用进来。

（4）在单个html页面中定义组件，其中必须要引入vue，组件代码模板是：

 const module = {template: ``,setup() {return { };}};

其中如果需要用到vue中的App对象里面的内容，那么就会使用到provide、inject，provide需要在App对象里面注入组件需要的数据，inject是取出注入的数据。inject可以在不同的组件中使用。

2、布局CSS设置

现在实现一个效果，就是在div里面展示商户地址和商户类型，是左右布局展示，其中类型在右边底部，其中类型一定会显示出来，而地址始终在类型的左边，其中地址过长时会自动换行。

<div class="address-type"><div class="address"></div><div class="type"></div>
</div>

css设置如下：

.address-type {display: flex;align-items: center;justify-content: space-between;
}
.address {flex: 1;text-alin: left;
}
.type {flex-shrink: 0;text-align: right;align-self: flex-end;width: auto;
}