- 新建一个名为post list的内容列表组件,放入up post components目录下。
- 组件文件名为post list.tsx,设置组件属性,包括一个data属性,其类型为post list。
- 在components目录中新建一个style目录,将项目的公共样式post list.css放入此目录下。
- 导入样式表到post list组件,使用input从当前目录的style中导入post list.css。
- 创建一个页面组件post配置,利用所创建的post list组件,并设置其data属性为请求返回的内容列表数据。
- 另外新建一个post st item文件,定义名为post list item的组件,设置其data属性类型为post。
- 在post list组件视图中,添加类名为post list的包装元素,绑定样式,使用props data映射为item并返回post list item组件实例,设置其data属性为item并设置key属性为item的id。
- 编辑post list item组件,从props结构需要的data,包括title、content、user属性,然后设置视图显示内容,包括图像、标题、内容和用户名。
- 最后在浏览器预览内容列表的显示效果。