uniapp+vue2+json-server+uView项目(day3)

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第10天，点击查看活动详情

上一篇文章中我们发送了get请求并且获取到了数据，将数据渲染到了页面上，具体的实现代码如下所示：

<view class="box" v-for="(item, index) in newsData" :key="index">
      <view class="word" @click="toDetail(item.id)">
        <view class="title">{{ item.title }}</view>
        <view class="time"> 发布时间：{{ item.time }} </view>
        <view class="num"> 浏览数：{{ item.num }} </view>
        <view class="author"> 来源：{{ item.author }} </view>
      </view>
      <view>
        <img class="img" @click="toDetail(item.id)" :src="item.img" alt="" />
        <view>

• 接下来我们要给文章的下面添加一个叉号按钮，功能是用户点击叉号后弹出模态框提示用户是否减少该类文章的推荐，用户点击确认之后删除这篇文章，需要request发送delete请求，按钮需要用到uView组件库中的按钮，uView组件库的引入如下所示
• uView组件库的引入，首先我们打开uView的官网：www.uviewui.com/ ，找到安装目录，然后在我们项目的终端输入： npm install uview-ui@2.0.31 ,如果安装了yarn的可以使用yarn add uview进行快速安装，稍等一会后就安装成功了，可以在package.json文件中看到如下的组件库的版本信息：

安装完成之后需要跟着官方文档进行配置，如下图所示：

• 大致上就是在main.js文件里面import引入uView组件库，然后vue.use(uView)，然后再在uni.css文件里面引入uview的主体样式@import 'uview-ui/theme.scss';然后再在app.vue文件的style样式里面引入uview-ui的scss样式库，如下图所示：

• 这样uview组件库就引入成功了，之后就可以使用里面的组件了。