Vue+Element-plus，响应式图片视频展示轻松搞定

认识响应式图片和视频展示

网上的东西对我们太重要了，都甩不掉了。现在火得冒烟的就是这些美图和小视频，看它们既能知道些新闻，也能看到各种产品，更厉害的是总能吸引住大家的目光。对了，还有那种响应式设计，无论在哪个设备上网页都是那么赏心悦目，无论是笔记本电脑还是平板，甚至是手机都看起来差不多。

安装Vue和Element-plus

npm install vue@next
npm install element-plus@next

认识下什么是 Vue 和 element-plus？Vue，就是现在很火的网页前端工具，不难用，效果还超级棒！还有 element-plus，在 Vue3.x的基础上又添了些好用的 UI 功能组件。加上这俩搭配用，响应式图片和视频展示不成问题！

创建Vue项目

搞定vue和element-plus后，赶紧开始新项目！只需在命令行里输几条指令，就能建好全新的vue项目。然后按提示挑下基础设置，搞定项目框架就是这么简单~

vue create responsive-display

添加Element-plus

别折腾了，就在项目文件夹敲下命令搞定！别忘了连上Element-plus弄到网页主要代码里哟。这样，轻松愉快地就能体验Element-plus那些炫酷功能~

cd responsive-display

创建展示组件

首先，建个src/components文件夹，然后留个地给：ImageDisplay.vue和VideoDisplay.vue这俩文件就是负责帮你展示图片和视频的。不管你屏幕多大、多小或多高清，它们都能给你展现美美的视觉效果

npm install element-plus@next

使用展示组件

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App)
  .use(ElementPlus)
  .mount('#app')

开始动手直接跳转到Home.vue的那个src/views里面，然后把刚搞定的ImageDisplay和VideoDisplay丢进去就成了。这一来，在主页想要加啥子图片或者视频都随你愿，整个人眼看上去都酷炫不少！

运行项目

搞定这几个步骤，简单喊句“Vue”启动你的项目就好了！然后随便找个地儿，就能看到帅哥靓妹或者小猫也能动起来！初级部分就是这么简单～

定制与扩展

  

    
  


export default {
  props: {
    imageUrl: String,
    altText: String
  }
}


.image-display {
  text-align: center;
}

别偷懒，除了基本功能，还有很多炫酷的神秘功能等你解锁！用好Vue和Element-Plus的各种神器，随便改改样式呀、加点互动呀、提速什么的，想怎么玩就怎么玩~

总结与展望

  

    


export default {
  props: {
    videoUrl: String
  }
}


.video-display {
  text-align: center;
}

跟我学，让咱们的Vue和Element-plus变得更酷！大胆尝试，实践出真知，你肯定能行！期待看到你的惊艳作品呀～

  

    
    
  


import ImageDisplay from '@/components/ImageDisplay.vue'
import VideoDisplay from '@/components/VideoDisplay.vue'
export default {
  components: {
    ImageDisplay,
    VideoDisplay
  },
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
      videoUrl: 'https://example.com/video.mp4'
    }
  }
}


.home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

。