Vue.js 实现电影详情页：Vue3 + Vue Router + VanUI + ECharts + WangEditor + VCalendar + Vue3 Baidu Map

应用场景介绍

本代码段展示了如何使用 Vue.js 构建一个电影详情页，其中包含电影海报、基本信息、评分、描述、购买按钮、底部导航栏等元素。

代码基本功能介绍

使用 Vue3 + Vue Router 实现页面路由管理
集成了 VanUI 组件库，用于快速构建 UI 界面
使用 ECharts 组件绘制电影评分图表
集成了 WangEditor 富文本编辑器，用于编辑电影描述
集成了 VCalendar 日历组件，用于显示电影上映日期
集成了 Vue3 Baidu Map 组件，用于展示电影院位置

功能实现步骤及关键代码分析说明

1. 安装依赖

首先，需要安装必要的依赖包：

npm install vue vue-router vuex vant echarts echarts-for-vue @wangeditor/editor-for-vue v-calendar vue3-baidu-map-gl

2. 配置 Vue Router

在 main.js 中配置 Vue Router 路由：

import { createRouter, createWebHistory } from 'vue-router';
import MovieDetail from './views/MovieDetail.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/movie/:id',
      name: 'MovieDetail',
      component: MovieDetail,
    },
  ],
});

export default router;

3. 构建 UI 界面

在 MovieDetail.vue 组件中构建 UI 界面：

<template>
  <div class="flex flex-col h-screen bg-gray-900">
    <van-nav-bar
      title="Movie Description"
      left-arrow
      fixed
      :border="false"
      class="bg-gray-900 text-white"
    />
    <div class="flex-1 overflow-y-auto">
      <div class="bg-gray-800 rounded-t-3xl">
        <img
          class="w-full h-56 object-cover rounded-t-3xl"
          src="https://source.unsplash.com/random/375x211"
          alt=""
        />
      </div>
      <div class="bg-white rounded-b-3xl">
        <div class="p-4">
          <h1 class="text-2xl font-bold text-gray-800">Mortal Kombat</h1>
          <div class="flex items-center mt-2">
            <van-tag type="primary" size="small" class="mr-2">Action</van-tag>
            <van-tag type="primary" size="small" class="mr-2"
              >Adventure</van-tag
            >
            <van-tag type="primary" size="small" class="mr-2">Fantasy</van-tag>
            <van-rate
              v-model="score"
              disabled
              size="16"
              class="text-yellow-500"
            />
          </div>
          <div class="flex items-center mt-2">
            <van-icon name="person-fill" class="text-gray-500 mr-2" />
            <span class="text-gray-500">16+</span>
            <van-icon name="calendar-fill" class="text-gray-500 mx-2" />
            <span class="text-gray-500">2021</span>
            <van-icon name="time-fill" class="text-gray-500 mr-2" />
            <span class="text-gray-500">2h 34min</span>
          </div>
          <div class="mt-4">
            <h2 class="text-xl font-bold text-gray-800">Description</h2>
            <div class="text-gray-500 mt-2">
              MMA fighter Cole Young seeks out Earth's greatest champions in
              order to stand against the enemies of... <a href="#">More</a>
            </div>
          </div>
          <div class="mt-4">
            <van-button round block type="danger" class="text-white"
              >Buy Tickets</van-button
            >
          </div>
        </div>
      </div>
    </div>
    <van-tabbar active="2" class="bg-gray-900 text-white">
      <van-tabbar-item icon="home-o" to="/" />
      <van-tabbar-item icon="search" to="/search" />
      <van-tabbar-item icon="film" to="/movie" />
      <van-tabbar-item icon="person-o" to="/profile" />
    </van-tabbar>
  </div>
</template>

4. 集成 ECharts

使用 ECharts 组件绘制电影评分图表：

import { ref } from 'vue';
import * as echarts from 'echarts';
import { h } from "vue";
import { createComponent } from 'echarts-for-vue';

const ECharts = createComponent({echarts, h});
const score = ref(6.2);

5. 集成 WangEditor

使用 WangEditor 富文本编辑器编辑电影描述：

import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onBeforeUnmount, shallowRef } from 'vue';

const editorConfig = ref({
  placeholder: '请输入内容...'
});
const editor = shallowRef();

const handleEditorCreated = (editorInstance) => {
  // Attach the editor instance to the ref
  editor.value = editorInstance;
  console.log("editor.value", editor.value, editorInstance)
};

onBeforeUnmount(() => {
  // Destroy the editor instance before the component is unmounted
  editor.value.destroy();
  editor.value = null;
});

6. 集成 VCalendar

使用 VCalendar 日历组件显示电影上映日期：

import { Calendar } from 'v-calendar';

7. 集成 Vue3 Baidu Map

使用 Vue3 Baidu Map 组件展示电影院位置：

import { BMap } from 'vue3-baidu-map-gl';

总结与展望

通过这段代码，我们展示了如何使用 Vue.js 构建一个功能丰富的电影详情页。在开发过程中，我们遇到了以下经验与收获：

熟练掌握了 Vue.js 的组件化开发方式
深入了解了 VanUI 组件库的使用
掌握了 ECharts 组件的图表绘制
了解了 WangEditor 富文本编辑器的使用
掌握了 VCalendar 日历组件的使用
了解了 Vue3 Baidu Map 组件的使用

未来，该卡片功能可以进一步拓展和优化，例如：

集成更多电影信息，如演员表、导演、制片人等
提供在线购票功能
支持用户评论和评分
提供影院位置的导航功能

ECHO recommendation

ScriptEcho.ai