vue3+element实现一个公告面板

简介: vue3+element实现一个公告面板

1. 设置项目和安装依赖

首先,确保你的项目使用的是 Vue 3。如果你还未创建项目,可以使用 Vue CLI 或 Vite 创建一个新项目。这里使用 Vite:

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install

然后安装 Element Plus:

npm install element-plus

2. 引入 Element Plus

在 Vue 3 中,通常在 main.jsmain.ts 文件中全局引入 Element Plus 和它的样式:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

3. 创建公告栏组件

使用 Vue 3 的组合式 API,你可以创建一个公告栏组件。这里利用 Element Plus 的 ElCardElTimeline 组件:

<template>
  <el-card class="announcement-board">
    <template #header>
      <span>公告栏</span>
    </template>
    <el-timeline>
      <el-timeline-item
        v-for="item in items"
        :key="item.id"
        :timestamp="item.date"
        placement="top"
      >
        <el-card>
          <h4>{{ item.title }}</h4>
          <p>{{ item.content }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </el-card>
</template>
<script setup>
import { ref } from 'vue'
const items = ref([
  { id: 1, date: '2024-05-15', title: '公告标题 1', content: '这里是公告内容 1...' },
  { id: 2, date: '2024-05-14', title: '公告标题 2', content: '这里是公告内容 2...' },
  // 更多公告...
])
</script>
<style>
.announcement-board {
  margin: 30px;
}
</style>

4. 在页面中使用公告栏组件

现在,在你的 Vue 3 页面中引入并使用这个公告栏组件:

<template>
  <announcement-board />
</template>
<script setup>
import AnnouncementBoard from './components/AnnouncementBoard.vue'
</script>

效果

相关文章
|
7天前
|
JavaScript 前端开发
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
本文介绍了在JeecgBoot Vue 3项目中配置多页面入口的步骤。首先,确保下载了项目源码,然后在项目根目录创建`home.html`作为新页面模板。接着,在`src`下建立`multiPage/home`目录,包含`App.vue`和`main.ts`文件以构建新页面。最后,更新`build/vite/plugin/html.ts`中的`htmlPlugin`以支持多页面配置。完成这些步骤后,项目将具备管理多个独立页面的能力。
21 4
|
12天前
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
8 0
|
12天前
|
JavaScript
【vue3】vue3中路由hash与History的设置
【vue3】vue3中路由hash与History的设置
13 0
|
12天前
|
编解码 前端开发
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
68 0
|
12天前
|
JavaScript
【vue】 vue 翻页时钟制作,vue2、vue3
【vue】 vue 翻页时钟制作,vue2、vue3
23 0
|
JavaScript 前端开发
vue开发:对Element上传功能的二次封装
最近公司老项目改用vue开发,前端框架采用element ui,这个框架风格还是很漂亮的,只是上传功能有一些问题,比如:limit=1限制上传数量后,后面的添加按钮没有隐藏,再用就是如果上传图片组,很多需求需要对图片组进行排序修改,基于这两个需求,对element的el-upload组件进行了二次封装。
2431 0
|
3天前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
10天前
|
JavaScript