华为云云服务器评测 [Vue3 博物馆管理系统] 使用Vue3、Element-plus菜单组件构建轮播图

青花锁2023-09-03 17:52

系列文章目录

第一章 定制上中下（顶部菜单、底部区域、中间主区域显示）三层结构首页
第二章 使用Vue3、Element-plus菜单组件构建菜单
第三章 使用Vue3、Element-plus菜单组件构建轮播图

[第四章 使用Vue3、Element-plus菜单组件构建组图文章]
华为云云服务器评测 第一章 [linux实战] 华为云耀云服务器L实例 Java、node环境配置

### 文章目录

  • [系列文章目录](#文章目录 系列文章目录 @TOC 前言 1、功能拆解 2、首页轮播图功能 2.1、配置首页路由 2.2、编写轮播图功能 2.2.1、carousel组件 2.2.2、加载json数据 在这里插入图片描述 3、在云服务里通过git拉取Vue项目代码 3.1、本地编辑代码后，上传到github 3.2、登录服务器，拉取Vue项目代码 3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过） 3.2.2、拉取Vue项目代码 4、使用npm启动项目 4.1、编译项目 4.2、使用npm启动项目 总结)
  • [@[TOC](文章目录)](#文章目录 系列文章目录 @TOC 前言 1、功能拆解 2、首页轮播图功能 2.1、配置首页路由 2.2、编写轮播图功能 2.2.1、carousel组件 2.2.2、加载json数据 在这里插入图片描述 3、在云服务里通过git拉取Vue项目代码 3.1、本地编辑代码后，上传到github 3.2、登录服务器，拉取Vue项目代码 3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过） 3.2.2、拉取Vue项目代码 4、使用npm启动项目 4.1、编译项目 4.2、使用npm启动项目 总结)
  • [前言](#文章目录 系列文章目录 @TOC 前言 1、功能拆解 2、首页轮播图功能 2.1、配置首页路由 2.2、编写轮播图功能 2.2.1、carousel组件 2.2.2、加载json数据 在这里插入图片描述 3、在云服务里通过git拉取Vue项目代码 3.1、本地编辑代码后，上传到github 3.2、登录服务器，拉取Vue项目代码 3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过） 3.2.2、拉取Vue项目代码 4、使用npm启动项目 4.1、编译项目 4.2、使用npm启动项目 总结)
  • [1、功能拆解](#文章目录 系列文章目录 @TOC 前言 1、功能拆解 2、首页轮播图功能 2.1、配置首页路由 2.2、编写轮播图功能 2.2.1、carousel组件 2.2.2、加载json数据 在这里插入图片描述 3、在云服务里通过git拉取Vue项目代码 3.1、本地编辑代码后，上传到github 3.2、登录服务器，拉取Vue项目代码 3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过） 3.2.2、拉取Vue项目代码 4、使用npm启动项目 4.1、编译项目 4.2、使用npm启动项目 总结)
  • [2、首页轮播图功能](#文章目录 系列文章目录 @TOC 前言 1、功能拆解 2、首页轮播图功能 2.1、配置首页路由 2.2、编写轮播图功能 2.2.1、carousel组件 2.2.2、加载json数据 在这里插入图片描述 3、在云服务里通过git拉取Vue项目代码 3.1、本地编辑代码后，上传到github 3.2、登录服务器，拉取Vue项目代码 3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过） 3.2.2、拉取Vue项目代码 4、使用npm启动项目 4.1、编译项目 4.2、使用npm启动项目 总结)
  • [2.1、配置首页路由](#文章目录 系列文章目录 @TOC 前言 1、功能拆解 2、首页轮播图功能 2.1、配置首页路由 2.2、编写轮播图功能 2.2.1、carousel组件 2.2.2、加载json数据 在这里插入图片描述 3、在云服务里通过git拉取Vue项目代码 3.1、本地编辑代码后，上传到github 3.2、登录服务器，拉取Vue项目代码 3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过） 3.2.2、拉取Vue项目代码 4、使用npm启动项目 4.1、编译项目 4.2、使用npm启动项目 总结)
  • [2.2、编写轮播图功能](#文章目录 系列文章目录 @TOC 前言 1、功能拆解 2、首页轮播图功能 2.1、配置首页路由 2.2、编写轮播图功能 2.2.1、carousel组件 2.2.2、加载json数据 在这里插入图片描述 3、在云服务里通过git拉取Vue项目代码 3.1、本地编辑代码后，上传到github 3.2、登录服务器，拉取Vue项目代码 3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过） 3.2.2、拉取Vue项目代码 4、使用npm启动项目 4.1、编译项目 4.2、使用npm启动项目 总结)
  • [2.2.1、carousel组件](#文章目录 系列文章目录 @TOC 前言 1、功能拆解 2、首页轮播图功能 2.1、配置首页路由 2.2、编写轮播图功能 2.2.1、carousel组件 2.2.2、加载json数据 在这里插入图片描述 3、在云服务里通过git拉取Vue项目代码 3.1、本地编辑代码后，上传到github 3.2、登录服务器，拉取Vue项目代码 3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过） 3.2.2、拉取Vue项目代码 4、使用npm启动项目 4.1、编译项目 4.2、使用npm启动项目 总结)
  • [2.2.2、加载json数据](#文章目录 系列文章目录 @TOC 前言 1、功能拆解 2、首页轮播图功能 2.1、配置首页路由 2.2、编写轮播图功能 2.2.1、carousel组件 2.2.2、加载json数据 在这里插入图片描述 3、在云服务里通过git拉取Vue项目代码 3.1、本地编辑代码后，上传到github 3.2、登录服务器，拉取Vue项目代码 3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过） 3.2.2、拉取Vue项目代码 4、使用npm启动项目 4.1、编译项目 4.2、使用npm启动项目 总结)
  • [在这里插入图片描述](#文章目录 系列文章目录 @TOC 前言 1、功能拆解 2、首页轮播图功能 2.1、配置首页路由 2.2、编写轮播图功能 2.2.1、carousel组件 2.2.2、加载json数据 在这里插入图片描述 3、在云服务里通过git拉取Vue项目代码 3.1、本地编辑代码后，上传到github 3.2、登录服务器，拉取Vue项目代码 3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过） 3.2.2、拉取Vue项目代码 4、使用npm启动项目 4.1、编译项目 4.2、使用npm启动项目 总结)
  • [3、在云服务里通过git拉取Vue项目代码](#文章目录 系列文章目录 @TOC 前言 1、功能拆解 2、首页轮播图功能 2.1、配置首页路由 2.2、编写轮播图功能 2.2.1、carousel组件 2.2.2、加载json数据 在这里插入图片描述 3、在云服务里通过git拉取Vue项目代码 3.1、本地编辑代码后，上传到github 3.2、登录服务器，拉取Vue项目代码 3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过） 3.2.2、拉取Vue项目代码 4、使用npm启动项目 4.1、编译项目 4.2、使用npm启动项目 总结)
  • [3.1、本地编辑代码后，上传到github](#文章目录 系列文章目录 @TOC 前言 1、功能拆解 2、首页轮播图功能 2.1、配置首页路由 2.2、编写轮播图功能 2.2.1、carousel组件 2.2.2、加载json数据 在这里插入图片描述 3、在云服务里通过git拉取Vue项目代码 3.1、本地编辑代码后，上传到github 3.2、登录服务器，拉取Vue项目代码 3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过） 3.2.2、拉取Vue项目代码 4、使用npm启动项目 4.1、编译项目 4.2、使用npm启动项目 总结)
  • [3.2、登录服务器，拉取Vue项目代码](#文章目录 系列文章目录 @TOC 前言 1、功能拆解 2、首页轮播图功能 2.1、配置首页路由 2.2、编写轮播图功能 2.2.1、carousel组件 2.2.2、加载json数据 在这里插入图片描述 3、在云服务里通过git拉取Vue项目代码 3.1、本地编辑代码后，上传到github 3.2、登录服务器，拉取Vue项目代码 3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过） 3.2.2、拉取Vue项目代码 4、使用npm启动项目 4.1、编译项目 4.2、使用npm启动项目 总结)
  • [3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过）](#文章目录 系列文章目录 @TOC 前言 1、功能拆解 2、首页轮播图功能 2.1、配置首页路由 2.2、编写轮播图功能 2.2.1、carousel组件 2.2.2、加载json数据 在这里插入图片描述 3、在云服务里通过git拉取Vue项目代码 3.1、本地编辑代码后，上传到github 3.2、登录服务器，拉取Vue项目代码 3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过） 3.2.2、拉取Vue项目代码 4、使用npm启动项目 4.1、编译项目 4.2、使用npm启动项目 总结)
  • [3.2.2、拉取Vue项目代码](#文章目录 系列文章目录 @TOC 前言 1、功能拆解 2、首页轮播图功能 2.1、配置首页路由 2.2、编写轮播图功能 2.2.1、carousel组件 2.2.2、加载json数据 在这里插入图片描述 3、在云服务里通过git拉取Vue项目代码 3.1、本地编辑代码后，上传到github 3.2、登录服务器，拉取Vue项目代码 3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过） 3.2.2、拉取Vue项目代码 4、使用npm启动项目 4.1、编译项目 4.2、使用npm启动项目 总结)
  • [4、使用npm启动项目](#文章目录 系列文章目录 @TOC 前言 1、功能拆解 2、首页轮播图功能 2.1、配置首页路由 2.2、编写轮播图功能 2.2.1、carousel组件 2.2.2、加载json数据 在这里插入图片描述 3、在云服务里通过git拉取Vue项目代码 3.1、本地编辑代码后，上传到github 3.2、登录服务器，拉取Vue项目代码 3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过） 3.2.2、拉取Vue项目代码 4、使用npm启动项目 4.1、编译项目 4.2、使用npm启动项目 总结)
  • [4.1、编译项目](#文章目录 系列文章目录 @TOC 前言 1、功能拆解 2、首页轮播图功能 2.1、配置首页路由 2.2、编写轮播图功能 2.2.1、carousel组件 2.2.2、加载json数据 在这里插入图片描述 3、在云服务里通过git拉取Vue项目代码 3.1、本地编辑代码后，上传到github 3.2、登录服务器，拉取Vue项目代码 3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过） 3.2.2、拉取Vue项目代码 4、使用npm启动项目 4.1、编译项目 4.2、使用npm启动项目 总结)
  • [4.2、使用npm启动项目](#文章目录 系列文章目录 @TOC 前言 1、功能拆解 2、首页轮播图功能 2.1、配置首页路由 2.2、编写轮播图功能 2.2.1、carousel组件 2.2.2、加载json数据 在这里插入图片描述 3、在云服务里通过git拉取Vue项目代码 3.1、本地编辑代码后，上传到github 3.2、登录服务器，拉取Vue项目代码 3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过） 3.2.2、拉取Vue项目代码 4、使用npm启动项目 4.1、编译项目 4.2、使用npm启动项目 总结)
  • [总结](#文章目录 系列文章目录 @TOC 前言 1、功能拆解 2、首页轮播图功能 2.1、配置首页路由 2.2、编写轮播图功能 2.2.1、carousel组件 2.2.2、加载json数据 在这里插入图片描述 3、在云服务里通过git拉取Vue项目代码 3.1、本地编辑代码后，上传到github 3.2、登录服务器，拉取Vue项目代码 3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过） 3.2.2、拉取Vue项目代码 4、使用npm启动项目 4.1、编译项目 4.2、使用npm启动项目 总结)

前言

我们在【华为云云服务器评测 第一、二章】里配置了node服务（Node、Npm都已经配置好）、git（拉取Vue项目代码），在 [Vue3 博物馆管理系统]里，已经配置好了首页结构、菜单，今天我们需要再华为云云服务器里把首页结构、菜单以及首页轮播图都部署上去。

1、功能拆解

1、首页轮播图功能代码编写，并上传到github；

2、在云服务里通过git拉取Vue项目代码；

3、使用npm启动项目

2、首页轮播图功能

2.1、配置首页路由

  • 创建index.js，配置首页路径
javascript 复制代码 
import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
    {
        path: "/",
        name: 'home',
        component: ()=>import("@/view/VueHome.vue")
    }
]

const router = createRouter({

    history:createWebHashHistory(),
    routes
})

export default router;
  • 在main.js里引入index.js
javascript 复制代码 
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/index"
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';

const app = createApp(App);
app.use(router);
app.use(ElementPlus)

app.mount('#app');

2.2、编写轮播图功能

2.2.1、carousel组件

打开VueHome.vue文件，加入轮播图功能

这里我们使用Element-plus的 carousel组件，来打造轮播图功能

2.2.2、加载json数据

html 复制代码 
<template>
	  <!-- 轮播图 -->
      <div class="block">
        <el-carousel :interval="4000"  height="600px"  >
          <el-carousel-item v-for="item in carouseData" :key="item">
            <div class="pic_item">
              <img :src="item.picture" style="width: 100%;height: 600px;" alt=""/>
              <span class="title">{{item.title}}</span>
              <span class="subTitle">{{item.subTitle}}</span>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 轮播图END -->
</template>

<script>

import axios from "axios";

export default {
  name: 'VueHome',
  data() {
    return {
      carouseData : [],
      carouseProjectData: [],
      newList: "" , //新闻列表
    }
  },
  created() {
    //获取首页轮播图
    this.getData("carouseData" , "../../static/mock/carouse/data.json");

  },
  methods: {
    //这里演示用，不使用后端API，直接调用本项目的JSON文件
    getData(val , url){
      axios.get( url ).then((response) => {
        this[val] = response.data.success.data;
      });
    },
  }
}
</script>

3、在云服务里通过git拉取Vue项目代码

3.1、本地编辑代码后，上传到github

3.2、登录服务器，拉取Vue项目代码

3.2.1、登录服务器（【华为云云服务器评测 第一、二章】讲解过）

3.2.2、拉取Vue项目代码

代码地址：https://github.com/hd5723/museum.git

进入终端，输入以下命令：

cd /home //进入home目录

mkdir html //创建html目录

cd html //进入home/html 目录

mkdir vue //创建vue目录

cd vue //进入home/html/vue 目录

git clone https://github.com/hd5723/museum.git //拉取museum代码(Vue3的博物馆管理系统)

ls //查看当前目录下的信息

cd museum //进入home/html/vue/museum 目录

ls //查看当前目录下的信息

cd front //进入home/html/vue/museue/front 目录，front是博物馆管理系统的前端Vue项目

4、使用npm启动项目

4.1、编译项目

进入终端，输入以下命令：

cd /home/html/vue/museum/front //进入/home/html/vue/museum/front目录

npm run build //编译项目

sh: line 1: vue-cli-service: comand not found

输入命令：sudo rm -rf node_modules package-lock.json && npm install

完成安装即可

4.2、使用npm启动项目

进入终端，输入以下命令：

cd /home/html/vue/museum/front //进入/home/html/vue/museum/front目录

npm run serve -- --port 80 //以80端口启动项目

访问地址：http://139.159.230.49/#/

总结

以上就是今天要讲的内容，本文仅仅简单介绍了博物馆管理系统首页轮播图，包括通过git拉取代码，通过npm命令启动项目等。

相关推荐
Beamon__28 分钟前
element-plus按需引入报错AutoImport is not a function
webpack·element-plus
萨格拉斯救世主37 分钟前
戴尔R930服务器增加 Intel X710-DA2双万兆光口含模块
运维·服务器
无所谓จุ๊บ38 分钟前
树莓派开发相关知识十 -小试服务器
服务器·网络·树莓派
Jtti40 分钟前
Windows系统服务器怎么设置远程连接？详细步骤
运维·服务器·windows
yeyuningzi1 小时前
Debian 12环境里部署nginx步骤记录
linux·运维·服务器
EasyCVR2 小时前
萤石设备视频接入平台EasyCVR多品牌摄像机视频平台海康ehome平台（ISUP）接入EasyCVR不在线如何排查？
运维·服务器·网络·人工智能·ffmpeg·音视频
wowocpp3 小时前
ubuntu 22.04 硬件配置 查看 显卡
linux·运维·ubuntu
萨格拉斯救世主3 小时前
jenkins使用slave节点进行node打包报错问题处理
运维·jenkins
川石课堂软件测试3 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
龙哥说跨境3 小时前
如何利用指纹浏览器爬虫绕过Cloudflare的防护？
服务器·网络·python·网络爬虫
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play