第四篇【传奇开心果系列】Vant开发移动应用示例：在线教育

最新推荐文章于 2024-06-22 08:12:52 发布
置顶 最新推荐文章于 2024-06-22 08:12:52 发布
阅读量239 收藏
点赞数 9
分类专栏： Vant of Vue 开发移动应用示例 文章标签： vue.js android ios ui 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jackchuanqi/article/details/135733794
版权

传奇开心果博文系列

  • 系列博文目录
    • Vant开发移动应用示例系列博文
  • 博文目录
    • 一、项目目标
    • 二、编程思路
    • 三、初步实现项目目标示例代码
    • 四、第一次扩展示例代码
    • 五、第二次扩展示例代码
    • 六、第三次扩展示例代码
    • 七、第四次扩展示例代码
    • 八、第五次扩展示例代码
    • 九、归纳总结

系列博文目录

Vant开发移动应用示例系列博文

博文目录

一、项目目标

在这里插入图片描述使用vant实现在线教育应用：提供在线课程、学习资料、作业提交等功能，可以用于在线教育、培训机构等。

二、编程思路

在这里插入图片描述使用vant框架可以很方便地实现教育类小程序的各种功能。以下是一些常见功能的实现方式：

  1. 在线课程列表：使用vant的列表组件 van-list 来展示在线课程列表，并通过接口获取课程数据进行渲染。可以添加点击事件，跳转到课程详情页面。

  2. 课程详情页：使用vant的卡片组件 van-card 来展示课程详情，包括课程名称、讲师信息、课程简介等。可以在页面中添加按钮或其他交互组件，如购买按钮或加入学习按钮。

  3. 学习资料：使用vant的文件选择器 van-uploader 来实现学习资料的上传和下载功能。学生可以上传作业或下载老师提供的学习资料。

  4. 作业提交：使用vant的表单组件 van-form 和输入框组件 van-field 来实现作业提交功能。学生可以在表单中填写作业内容，并通过接口将作业提交到服务器。

除了以上功能，还可以结合vant的其他组件来实现更多教育类小程序的功能，如在线测试、讨论区、学习打卡等。同时，vant框架也提供了样式定制和主题配置的能力，可以根据自己的需求进行个性化定制。

三、初步实现项目目标示例代码

在这里插入图片描述当然，以下是一个使用vant框架实现教育类小程序的示例代码：

<!-- index.vue -->
<template>
  <view class="container">
    <van-list v-model="courseList" class="course-list">
      <template #default="{ item }">
        <van-cell title="{{ item.name }}" :is-link="true" @click="goToCourseDetail(item.id)" />
      </template>
    </van-list>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      courseList: [], // 在线课程列表数据
    };
  },
  mounted() {
    this.fetchCourseList(); // 获取在线课程列表数据
  },
  methods: {
    fetchCourseList() {
      // 调用接口获取在线课程列表数据
      // 将返回的数据赋值给courseList
      this.courseList = [
        { id: 1, name: '课程A' },
        { id: 2, name: '课程B' },
        { id: 3, name: '课程C' },
      ];
    },
    goToCourseDetail(courseId) {
      // 跳转到课程详情页，将课程ID作为参数传递
      uni.navigateTo({
        url: `/pages/course-detail?id=${courseId}`,
      });
    },
  },
};
</script>

这是一个简单的示例，展示了如何使用vant的列表组件 van-list 和单元格组件 van-cell 来展示在线课程列表，并通过点击事件跳转到课程详情页。

在实际开发中，您还需要创建相应的页面和组件，并根据业务需求进行逻辑处理和接口调用。以上示例只是一个基础的参考，具体的实现方式会根据您的具体需求和项目架构而有所不同。

四、第一次扩展示例代码

在这里插入图片描述扩展示例代码，添加更多功能：

<!-- index.vue -->
<template>
  <view class="container">
    <van-list v-model="courseList" class="course-list">
      <template #default="{ item }">
        <van-cell title="{{ item.name }}" :is-link="true" @click="goToCourseDetail(item.id)" />
      </template>
    </van-list>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      courseList: [], // 在线课程列表数据
    };
  },
  mounted() {
    this.fetchCourseList(); // 获取在线课程列表数据
  },
  methods: {
    fetchCourseList() {
      // 调用接口获取在线课程列表数据
      // 将返回的数据赋值给courseList
      this.courseList = [
        { id: 1, name: '课程A' },
        { id: 2, name: '课程B' },
        { id: 3, name: '课程C' },
      ];
    },
    goToCourseDetail(courseId) {
      // 跳转到课程详情页，将课程ID作为参数传递
      uni.navigateTo({
        url: `/pages/course-detail?id=${courseId}`,
      });
    },
  },
};
</script>

<!-- course-detail.vue -->
<template>
  <view class="container">
    <van-card :title="course.name">
      <p>{{ course.teacher }}</p>
      <p>{{ course.description }}</p>
      <van-button type="primary" text="购买" />
    </van-card>
    <van-uploader :file-list="fileList" @after-read="handleFileUpload" />
    <van-form @submit="submitHomework">
      <van-field label="作业内容" type="textarea" v-model="homeworkContent" />
      <van-button type="info" text="提交作业" />
    </van-form>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      course: {}, // 课程详情数据
      fileList: [], // 学习资料文件列表
      homeworkContent: '', // 作业内容
    };
  },
  mounted() {
    this.fetchCourseDetail(); // 获取课程详情数据
  },
  methods: {
    fetchCourseDetail() {
      const courseId = this.$route.params.id;
      // 调用接口根据课程ID获取课程详情数据
      // 将返回的数据赋值给course
      this.course = {
        id: courseId,
        name: '课程A',
        teacher: '张老师',
        description: '这是一门很有趣的课程。',
      };
    },
    handleFileUpload(file) {
      // 将上传的文件添加到fileList中
      this.fileList.push(file);
    },
    submitHomework() {
      // 将作业内容和附件文件提交到服务器
      // 可以调用相应的接口进行处理
      console.log('作业内容:', this.homeworkContent);
      console.log('附件文件:', this.fileList);
    },
  },
};
</script>

以上示例代码扩展了课程详情页面，添加了学习资料上传和作业提交的功能。使用vant的文件选择器 van-uploader 实现学习资料的上传，通过事件 @after-read 处理上传后的文件列表。使用vant的表单组件 van-form 和输入框组件 van-field 实现作业提交功能，通过事件 @submit 处理提交作业的逻辑。

五、第二次扩展示例代码

在这里插入图片描述继续扩展示例代码，添加更多功能：

<!-- index.vue -->
<template>
  <view class="container">
    <van-list v-model="courseList" class="course-list">
      <template #default="{ item }">
        <van-cell title="{{ item.name }}" :is-link="true" @click="goToCourseDetail(item.id)" />
      </template>
    </van-list>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      courseList: [], // 在线课程列表数据
    };
  },
  mounted() {
    this.fetchCourseList(); // 获取在线课程列表数据
  },
  methods: {
    fetchCourseList() {
      // 调用接口获取在线课程列表数据
      // 将返回的数据赋值给courseList
      this.courseList = [
        { id: 1, name: '课程A' },
        { id: 2, name: '课程B' },
        { id: 3, name: '课程C' },
      ];
    },
    goToCourseDetail(courseId) {
      // 跳转到课程详情页，将课程ID作为参数传递
      uni.navigateTo({
        url: `/pages/course-detail?id=${courseId}`,
      });
    },
  },
};
</script>

<!-- course-detail.vue -->
<template>
  <view class="container">
    <van-card :title="course.name">
      <p>{{ course.teacher }}</p>
      <p>{{ course.description }}</p>
      <van-button type="primary" text="购买" />
    </van-card>
    <van-uploader :file-list="fileList" @after-read="handleFileUpload" />
    <van-form @submit="submitHomework">
      <van-field label="作业内容" type="textarea" v-model="homeworkContent" />
      <van-button type="info" text="提交作业" />
    </van-form>
    <van-tabbar v-model="activeTab" class="tabbar">
      <van-tabbar-item icon="home-o" text="首页" to="/" />
      <van-tabbar-item icon="comment-o" text="讨论区" to="/discussion" />
      <van-tabbar-item icon="star-o" text="打卡" to="/check-in" />
    </van-tabbar>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      course: {}, // 课程详情数据
      fileList: [], // 学习资料文件列表
      homeworkContent: '', // 作业内容
      activeTab: 0, // 当前选中的底部导航栏项
    };
  },
  mounted() {
    this.fetchCourseDetail(); // 获取课程详情数据
  },
  methods: {
    fetchCourseDetail() {
      const courseId = this.$route.params.id;
      // 调用接口根据课程ID获取课程详情数据
      // 将返回的数据赋值给course
      this.course = {
        id: courseId,
        name: '课程A',
        teacher: '张老师',
        description: '这是一门很有趣的课程。',
      };
    },
    handleFileUpload(file) {
      // 将上传的文件添加到fileList中
      this.fileList.push(file);
    },
    submitHomework() {
      // 将作业内容和附件文件提交到服务器
      // 可以调用相应的接口进行处理
      console.log('作业内容:', this.homeworkContent);
      console.log('附件文件:', this.fileList);
    },
  },
};
</script>

以上示例代码在课程详情页面添加了底部导航栏功能，使用vant的 van-tabbar 和 van-tabbar-item 组件来实现。通过设置 activeTab 的值来控制当前选中的导航栏项，并使用 to 属性设置导航栏项的跳转路径。

六、第三次扩展示例代码

在这里插入图片描述继续扩展示例代码，添加更多功能：

<!-- index.vue -->
<template>
  <view class="container">
    <van-list v-model="courseList" class="course-list">
      <template #default="{ item }">
        <van-cell title="{{ item.name }}" :is-link="true" @click="goToCourseDetail(item.id)" />
      </template>
    </van-list>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      courseList: [], // 在线课程列表数据
    };
  },
  mounted() {
    this.fetchCourseList(); // 获取在线课程列表数据
  },
  methods: {
    fetchCourseList() {
      // 调用接口获取在线课程列表数据
      // 将返回的数据赋值给courseList
      this.courseList = [
        { id: 1, name: '课程A' },
        { id: 2, name: '课程B' },
        { id: 3, name: '课程C' },
      ];
    },
    goToCourseDetail(courseId) {
      // 跳转到课程详情页，将课程ID作为参数传递
      uni.navigateTo({
        url: `/pages/course-detail?id=${courseId}`,
      });
    },
  },
};
</script>

<!-- course-detail.vue -->
<template>
  <view class="container">
    <van-card :title="course.name">
      <p>{{ course.teacher }}</p>
      <p>{{ course.description }}</p>
      <van-button type="primary" text="购买" />
    </van-card>
    <van-uploader :file-list="fileList" @after-read="handleFileUpload" />
    <van-form @submit="submitHomework">
      <van-field label="作业内容" type="textarea" v-model="homeworkContent" />
      <van-button type="info" text="提交作业" />
    </van-form>
    <van-tabbar v-model="activeTab" class="tabbar">
      <van-tabbar-item icon="home-o" text="首页" to="/" />
      <van-tabbar-item icon="comment-o" text="讨论区" to="/discussion" />
      <van-tabbar-item icon="star-o" text="打卡" to="/check-in" />
    </van-tabbar>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      course: {}, // 课程详情数据
      fileList: [], // 学习资料文件列表
      homeworkContent: '', // 作业内容
      activeTab: 0, // 当前选中的底部导航栏项
      discussions: [], // 讨论区帖子列表
    };
  },
  mounted() {
    this.fetchCourseDetail(); // 获取课程详情数据
    this.fetchDiscussions(); // 获取讨论区帖子列表
  },
  methods: {
    fetchCourseDetail() {
      const courseId = this.$route.params.id;
      // 调用接口根据课程ID获取课程详情数据
      // 将返回的数据赋值给course
      this.course = {
        id: courseId,
        name: '课程A',
        teacher: '张老师',
        description: '这是一门很有趣的课程。',
      };
    },
    fetchDiscussions() {
      // 调用接口获取讨论区帖子列表数据
      // 将返回的数据赋值给discussions
      this.discussions = [
        { id: 1, title: '关于课程A的问题' },
        { id: 2, title: '分享一些学习心得' },
        { id: 3, title: '作业讨论' },
      ];
    },
    handleFileUpload(file) {
      // 将上传的文件添加到fileList中
      this.fileList.push(file);
    },
    submitHomework() {
      // 将作业内容和附件文件提交到服务器
      // 可以调用相应的接口进行处理
      console.log('作业内容:', this.homeworkContent);
      console.log('附件文件:', this.fileList);
    },
  },
};
</script>

以上示例代码在课程详情页面添加了讨论区功能，通过调用接口获取讨论区帖子列表数据，并展示在页面上。可以根据实际需求进行进一步的交互和功能扩展，比如点击帖子跳转到帖子详情页，发表新的帖子等。

七、第四次扩展示例代码

在这里插入图片描述继续扩展示例代码，添加更多功能：

<!-- index.vue -->
<template>
  <view class="container">
    <van-list v-model="courseList" class="course-list">
      <template #default="{ item }">
        <van-cell title="{{ item.name }}" :is-link="true" @click="goToCourseDetail(item.id)" />
      </template>
    </van-list>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      courseList: [], // 在线课程列表数据
    };
  },
  mounted() {
    this.fetchCourseList(); // 获取在线课程列表数据
  },
  methods: {
    fetchCourseList() {
      // 调用接口获取在线课程列表数据
      // 将返回的数据赋值给courseList
      this.courseList = [
        { id: 1, name: '课程A' },
        { id: 2, name: '课程B' },
        { id: 3, name: '课程C' },
      ];
    },
    goToCourseDetail(courseId) {
      // 跳转到课程详情页，将课程ID作为参数传递
      uni.navigateTo({
        url: `/pages/course-detail?id=${courseId}`,
      });
    },
  },
};
</script>

<!-- course-detail.vue -->
<template>
  <view class="container">
    <van-card :title="course.name">
      <p>{{ course.teacher }}</p>
      <p>{{ course.description }}</p>
      <van-button type="primary" text="购买" />
    </van-card>
    <van-uploader :file-list="fileList" @after-read="handleFileUpload" />
    <van-form @submit="submitHomework">
      <van-field label="作业内容" type="textarea" v-model="homeworkContent" />
      <van-button type="info" text="提交作业" />
    </van-form>
    <van-tabbar v-model="activeTab" class="tabbar">
      <van-tabbar-item icon="home-o" text="首页" to="/" />
      <van-tabbar-item icon="comment-o" text="讨论区" to="/discussion" />
      <van-tabbar-item icon="star-o" text="打卡" to="/check-in" />
    </van-tabbar>
    <view class="discussion-list">
      <van-card v-for="discussion in discussions" :key="discussion.id">
        <p>{{ discussion.title }}</p>
        <van-button type="info" text="查看详情" @click="goToDiscussionDetail(discussion.id)" />
      </van-card>
    </view>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      course: {}, // 课程详情数据
      fileList: [], // 学习资料文件列表
      homeworkContent: '', // 作业内容
      activeTab: 0, // 当前选中的底部导航栏项
      discussions: [], // 讨论区帖子列表
    };
  },
  mounted() {
    this.fetchCourseDetail(); // 获取课程详情数据
    this.fetchDiscussions(); // 获取讨论区帖子列表
  },
  methods: {
    fetchCourseDetail() {
      const courseId = this.$route.params.id;
      // 调用接口根据课程ID获取课程详情数据
      // 将返回的数据赋值给course
      this.course = {
        id: courseId,
        name: '课程A',
        teacher: '张老师',
        description: '这是一门很有趣的课程。',
      };
    },
    fetchDiscussions() {
      // 调用接口获取讨论区帖子列表数据
      // 将返回的数据赋值给discussions
      this.discussions = [
        { id: 1, title: '关于课程A的问题' },
        { id: 2, title: '分享一些学习心得' },
        { id: 3, title: '作业讨论' },
      ];
    },
    handleFileUpload(file) {
      // 将上传的文件添加到fileList中
      this.fileList.push(file);
    },
    submitHomework() {
      // 将作业内容和附件文件提交到服务器
      // 可以调用相应的接口进行处理
      console.log('作业内容:', this.homeworkContent);
      console.log('附件文件:', this.fileList);
    },
    goToDiscussionDetail(discussionId) {
      // 跳转到讨论区帖子详情页，将帖子ID作为参数传递
      uni.navigateTo({
        url: `/pages/discussion-detail?id=${discussionId}`,
      });
    },
  },
};
</script>

以上示例代码在课程详情页面添加了讨论区功能，并展示了讨论区帖子列表。点击帖子的 “查看详情” 按钮，可以跳转到对应的帖子详情页。

八、第五次扩展示例代码

在这里插入图片描述继续扩展示例代码，添加更多功能：

<!-- index.vue -->
<template>
  <view class="container">
    <van-list v-model="courseList" class="course-list">
      <template #default="{ item }">
        <van-cell title="{{ item.name }}" :is-link="true" @click="goToCourseDetail(item.id)" />
      </template>
    </van-list>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      courseList: [], // 在线课程列表数据
    };
  },
  mounted() {
    this.fetchCourseList(); // 获取在线课程列表数据
  },
  methods: {
    fetchCourseList() {
      // 调用接口获取在线课程列表数据
      // 将返回的数据赋值给courseList
      this.courseList = [
        { id: 1, name: '课程A' },
        { id: 2, name: '课程B' },
        { id: 3, name: '课程C' },
      ];
    },
    goToCourseDetail(courseId) {
      // 跳转到课程详情页，将课程ID作为参数传递
      uni.navigateTo({
        url: `/pages/course-detail?id=${courseId}`,
      });
    },
  },
};
</script>

<!-- course-detail.vue -->
<template>
  <view class="container">
    <van-card :title="course.name">
      <p>{{ course.teacher }}</p>
      <p>{{ course.description }}</p>
      <van-button type="primary" text="购买" />
    </van-card>
    <van-uploader :file-list="fileList" @after-read="handleFileUpload" />
    <van-form @submit="submitHomework">
      <van-field label="作业内容" type="textarea" v-model="homeworkContent" />
      <van-button type="info" text="提交作业" />
    </van-form>
    <van-tabbar v-model="activeTab" class="tabbar">
      <van-tabbar-item icon="home-o" text="首页" to="/" />
      <van-tabbar-item icon="comment-o" text="讨论区" to="/discussion" />
      <van-tabbar-item icon="star-o" text="打卡" to="/check-in" />
    </van-tabbar>
    <view class="discussion-list">
      <van-card v-for="discussion in discussions" :key="discussion.id">
        <p>{{ discussion.title }}</p>
        <van-button type="info" text="查看详情" @click="goToDiscussionDetail(discussion.id)" />
      </van-card>
    </view>
    <van-modal v-model="showModal" title="课程评价" show-cancel-button>
      <van-rate v-model="rating" />
      <van-textarea v-model="comment" :rows="3" placeholder="请输入评价内容" />
      <van-button type="info" text="提交评价" @click="submitRating" />
    </van-modal>
  </view>
</template>

<script>
import { reactive } from 'vue';

export default {
  data() {
    return {
      course: {}, // 课程详情数据
      fileList: [], // 学习资料文件列表
      homeworkContent: '', // 作业内容
      activeTab: 0, // 当前选中的底部导航栏项
      discussions: [], // 讨论区帖子列表
      showModal: false, // 是否显示评价模态框
      rating: 0, // 课程评分
      comment: '', // 评价内容
    };
  },
  mounted() {
    this.fetchCourseDetail(); // 获取课程详情数据
    this.fetchDiscussions(); // 获取讨论区帖子列表
  },
  methods: {
    fetchCourseDetail() {
      const courseId = this.$route.params.id;
      // 调用接口根据课程ID获取课程详情数据
      // 将返回的数据赋值给course
      this.course = {
        id: courseId,
        name: '课程A',
        teacher: '张老师',
        description: '这是一门很有趣的课程。',
      };
    },
    fetchDiscussions() {
      // 调用接口获取讨论区帖子列表数据
      // 将返回的数据赋值给discussions
      this.discussions = [
        { id: 1, title: '关于课程A的问题' },
        { id: 2, title: '分享一些学习心得' },
        { id: 3, title: '作业讨论' },
      ];
    },
    handleFileUpload(file) {
      // 将上传的文件添加到fileList中
      this.fileList.push(file);
    },
    submitHomework() {
      // 将作业内容和附件文件提交到服务器
      // 可以调用相应的接口进行处理
      console.log('作业内容:', this.homeworkContent);
      console.log('附件文件:', this.fileList);
    },
    goToDiscussionDetail(discussionId) {
      // 跳转到讨论区帖子详情页，将帖子ID作为参数传递
      uni.navigateTo({
        url: `/pages/discussion-detail?id=${discussionId}`,
      });
    },
    submitRating() {
      // 提交课程评价
      console.log('评分:', this.rating);
      console.log('评价内容:', this.comment);
      this.showModal = false; // 关闭评价模态框
      // 调用接口将评分和评价内容提交到服务器
    },
  },
};
</script>

以上示例代码在课程详情页面添加了课程评价功能。点击 “购买” 按钮后，弹出评价模态框，通过 van-modal 组件实现。可以选择评分并输入评价内容，点击 “提交评价” 按钮后，将评分和评价内容提交到服务器。

九、归纳总结

在这里插入图片描述在前面的示例代码中，我们扩展了一个在线课程平台的功能。以下是这些功能的总结：

  1. 在首页（index.vue）中，展示了在线课程的列表，并通过点击列表项跳转到对应的课程详情页。

  2. 在课程详情页（course-detail.vue）中，展示了课程的详细信息，包括课程名称、教师信息和课程描述。还添加了购买按钮，用于购买课程。

  3. 添加了学习资料上传的功能，使用vant的文件选择器 van-uploader 实现。用户可以上传学习资料文件，并将文件添加到文件列表中。

  4. 添加了作业提交的功能，使用vant的表单组件 van-form 和输入框组件 van-field 实现。用户可以输入作业内容并提交作业。

  5. 添加了底部导航栏的功能，使用vant的 van-tabbar 和 van-tabbar-item 组件实现。用户可以切换到首页、讨论区和打卡页面。

  6. 添加了讨论区的功能，在课程详情页展示了讨论区帖子列表。用户可以点击帖子标题，跳转到帖子详情页。

  7. 添加了课程评价的功能，通过弹出评价模态框，用户可以选择评分并输入评价内容，然后提交评价到服务器。

这些示例代码涵盖了常见的在线课程平台功能，包括课程展示、购买、学习资料上传、作业提交、讨论区、底部导航和课程评价。您可以根据实际需求和项目架构进行相应的调整和扩展。

在这里插入图片描述希望以上总结对您有所帮助！如果您还有其他问题，请随时提问。

传奇开心果编程
关注
  • 9
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
taro3-vant-sample:Taro3 中使用 vant-weapp 的示例
05-26
taro3-vant-sampleTaro3 中使用 vant-weapp 的示例 React 版本需要关注的点引用 vant 组件引用 vant 组件需要在页面的 config 文件中进行配置，如export default { navigationBarTitleText: '首页', usingComponents...
第五篇【传奇开心果系列】vant开发移动应用示例：深度解读高度可定制
jackchuanqi的博客
02-08 2519
Vant作为一个移动端UI组件库，具有高度可定制特性，可以根据项目需求进行灵活的样式和功能定制。样式定制：Vant提供了丰富的主题和样式变量，可以通过修改这些变量来定制组件的样式。开发者可以根据项目的设计需求，修改颜色、字体、间距等样式属性，以适应不同的设计风格和品牌要求。/* 修改按钮的主题颜色 */组件定制：Vant的组件具有良好的封装性，可以通过传递props或使用插槽（slot）来定制组件的行为和外观。开发者可以根据实际需求，自定义组件的属性、事件和内容，以满足特定的功能和交互需求。
介绍Vant入门及使用方法
Nekoneee的博客
01-03 3247
通过本章节你可以了解到 Vant 的安装方法和基本使用姿势。通过本章节你可以了解到 Vant 的一些进阶用法，比如组件插槽用法、多种浏览器适配方式。
vue3+vant 移动端应用（1）
weixin_33953249的博客
05-27 3812
安装Vant npm i vant -S 主要问题如何按需引用、REM适配 按需引入 babel-plugin-import 会在编译过程中将 import 的写法自动转换为按需引入的方式 //安装命令 npm i babel-plugin-import -D 复制代码 安装之后新建立babel.config.js文件 //babel.config.js module.exports = {...
Vant 的使用
H1716762493的博客
08-17 1722
mian.js文件的代码//全局引入=》所有的vant的ui组件全部引入=》缺点会造成项目体积过大，首次项目加载过慢importVantfrom'vant';//引入vantimport'vant/lib/index.css';main.js代码//(1)引入需要的组件import{Button,Rate}from'vant'importVuefrom'vue'//（2）组件进行注册Vue.use(Button)Vue.use(Rate)......
Vue移动端开发Vant组件库的介绍和应用
jyn15159的博客
10-13 1590
Vant 1. 介绍 Vue移动组件库 => Vant【有赞】 => 更新维护快 Vue PC组件 => element-ui【饿了么】 => 更新维护快 vant官方网站： https://youzan.github.io/vant/#/zh-CN/ 其他常用的Vue移动端开发UI组件库： Mint-UI cube-ui Vux 注意: 实际开发时用什么组件库不一定。 2. 安装-引入使用 在项目中引入vant组件库 步骤 安装： npm i vant
vant-mall-tpl:vant-ui商城模板
05-15
先锋商城 项目设置 npm install 编译和热重装以进行开发 npm start 编译并最小化生产 npm run build:prod
基于vue-cli4和vant搭建的移动端开发模板
02-19
基于vue-cli4和vant搭建的移动端开发模板
伸手党系列三：使用mpvue+VantUI+flyio进行小程序开发
01-08
使用mpvue+VantUI+flyio进行小程序开发基础介绍1. 安装mpvue创建一个基于mpvue-quickstart模板的新项目全部流程这里是模板的具体配置信息（如果你还不太明白这些内容的含义，可以先直接全部按回车）2. 安装Vant ...
vant-demo：vant演示集
02-04
Vant官方示例合集，包含了Vant，Vant Weapp和Vant Cli相关的示例，详细内容请打开各目录查看。 目录结构 ├── vant # Vant 相关示例 │ ├── vue2 使用 Vue 2、Vant 2、Vue Cli 搭建应用 │ ├── vue3 使用 ...
vant 基本使用
Luzhangfeng的博客
05-05 1860
vant 库的基本使用 vant 库是一款配合 Vue 使用的移动端 UI 组件库，轻量、高效。 项目本地安装 vant $ npm install vant -S 在 main.js 文件中引入 vant 库核心模块与它的样式 import Vue from 'vue' import Vant from 'vant' import 'vant/lib/index.css' Vu...
vant框架的基本使用
weixin_43709908的博客
11-16 4378
vant框架是由有赞团队的一个移动端的UI框架，里面封装了在移动端常用的一些组件。 1.vant的安装 vant的安装有两种：一种是使用npm或者yarn 进行下载vant的安装包，另一种是直接在官网或者在GitHub上进行下载，因为我是用的是第二种，所以我就分享一下，使用第二种的一些方法。 文件的引用：首先从vant官网下载文件夹，在下载好的文件夹中有一个lib目录，将这个文件放入自己项目...
Vant安装和使用
热门推荐
webFront的博客
05-11 7万+
Vant ( ˈvænt ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近50个组件，这些组件被广泛使用于有赞的各个移动端业务中。如果你需要开发一个移动商城，用 Vant 就再合适不过了。中文文档链接：https://www.youzanyun.com/zanui/vant#/...
Vue + SpringBoot 实现文件的断点上传、秒传，存储到Minio
m0_73179389的博客
06-19 518
前端页面使用的elment-plus的el-upload组件。当上传文件后，会调用handleChange 方法，可以在这里进行文件相关的操作。计算文件的MD5值。
JS面试题第一章
2301_79858637的博客
06-19 315
undefined表示的是无的原始值。但是null表示的是无 对象 0。
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 407
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
vue:对三种获取更新后的dom的方式进行分析
qq_45820271的博客
06-17 730
由于vue的异步更新机制，我们在同步代码中是无法获取到更新后的dom的信息的针对这个问题，我们有三种解决方案获取更新后的dom:3.在微任务中获取因为更新是在同步任务结束后，执行微任务之前，所以上面三种方式可以得到更新后的dom。
【java】常见问题-自用
最新发布
qq_45852108的博客
06-22 173
【自用】java 知识点模糊地方
vant h5开发配置
07-29
对于vant h5的开发配置，你可以按照以下步骤进行操作： 1. 首先，在你的项目目录下，执行以下命令安装vant： ``` npm install vant ``` 2. 在你的项目的入口文件（例如main.js）中，引入vant的样式和组件： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

传奇开心果编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值