华为云云服务器评测 [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命令启动项目等。

相关推荐
星海穿梭者1 小时前
SQL SERVER 查看锁表
java·服务器·前端
Voyager_41 小时前
Linux服务器NAS挂载：Truenas
linux·运维·服务器
liujing102329291 小时前
Day01_Linux移植基础
linux·运维·服务器
桥边驿语人2 小时前
Docker 容器无法访问外网的问题排查与解决指南
运维·docker·容器
ZStack开发者社区2 小时前
ZStack Cloud v5.4.0 LTS让运维自动驾驶，让合规开箱即用
运维·云计算
叶凡要飞2 小时前
linux安装google chrome 谷歌浏览器
linux·运维·chrome
专注VB编程开发20年3 小时前
vb.net编写DDE（Dynamic Data Exchange）服务器
运维·服务器·github·vb.net·dde
Clownseven3 小时前
如何用Fail2ban保护Linux服务器？防止SSH暴力破解教程
linux·服务器·ssh
chaofan9804 小时前
如何用 Claude Code 搭建安全、可测、可自动化的 GitHub CI 流程？
运维·人工智能·ci/cd·ai·自动化·github·claude
无敌最俊朗@4 小时前
Linux 进程创建与控制详解
linux·运维·服务器
热门推荐
01UV安装并设置国内源02在国行 macOS 下用 DeepSeek 补齐 Xcode 26 的 AI 能力：问题、原因与 mitmproxy 解决方案（含可用脚本与安装教程）03OpenSpeedy简介04GitHub 镜像站点05UV 工具安装与国内镜像源配置指南06Spec-Kit 使用指南07KGG转MP3工具|非KGM文件|解密音频08阿里最新开源Wan2.2-Animate-14B 本地部署教程：统一双模态框架，MoE架构赋能电影级角色动画与替换09VsCode远程Copilot无法使用Claude Agent问题1046个Nano-banana 精选提示词，持续更新中