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

╰+攻爆jí腚メ 2023-10-15 15:44 5阅读 0赞

## 系列文章目录 ##

[华为云云服务器评测 第一章 \[linux实战\] 华为云耀云服务器L实例 Java、node环境配置][_ _linux_ _L_ Java_node]  
[华为云云服务器评测 第二章 \[linux实战\] Unbutnu添加SSH Key、启动Springboot项目][_ _linux_ Unbutnu_SSH Key_Springboot]  
[华为云云服务器评测 第三章 \[linux实战\] 使用Vue3、Element-plus菜单组件构建轮播图][_ _linux_ _Vue3_Element-plus]  
[华为云云服务器评测 第四章 \[linux实战\] 宝塔+nginx 同时部署Springboot、Vue项目][_ _linux_ _nginx _Springboot_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启动项目  总结 ###

![请添加图片描述][6af8ec3d5f5b4eaaa7ddff2cada95141.gif]

## 前言 ##

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

--------------------

## 1、功能拆解 ##

1、首页轮播图功能代码编写，并上传到github；  
2、在云服务里通过git拉取Vue项目代码；  
3、使用npm启动项目

--------------------

## 2、首页轮播图功能 ##

### 2.1、配置首页路由 ###

*  创建index.js，配置首页路径

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

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组件][carousel]，来打造轮播图功能  
![在这里插入图片描述][94fe40ca1dbc40e2b97538762a07db5f.png]

#### 2.2.2、加载json数据 ####

<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>
          
    </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>

### ![在这里插入图片描述][3a78480ad95b43cfa748efb33444ce5e.png] ###

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

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

![在这里插入图片描述][2bbfda8b8ef144c18f63fb83843a5a60.png]

### 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项目

![在这里插入图片描述][c8d0262ddd8e4de2b6d3d0658e3bc948.png]

--------------------

## 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  
> 完成安装即可

![在这里插入图片描述][464198fb54384271ab9539f7d9a953d5.png]

### 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/\#/**  
![请添加图片描述][6af8ec3d5f5b4eaaa7ddff2cada95141.gif]

--------------------

## 总结 ##

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

[_ _linux_ _L_ Java_node]: https://blog.csdn.net/s445320/article/details/132595417
[_ _linux_ Unbutnu_SSH Key_Springboot]: https://blog.csdn.net/s445320/article/details/132609542
[_ _linux_ _Vue3_Element-plus]: https://blog.csdn.net/s445320/article/details/132657721
[_ _linux_ _nginx _Springboot_Vue]: https://blog.csdn.net/s445320/article/details/132657661
[6af8ec3d5f5b4eaaa7ddff2cada95141.gif]: https://img-blog.csdnimg.cn/6af8ec3d5f5b4eaaa7ddff2cada95141.gif
[carousel]: https://element-plus.org/zh-CN/component/carousel.html
[94fe40ca1dbc40e2b97538762a07db5f.png]: https://img-blog.csdnimg.cn/94fe40ca1dbc40e2b97538762a07db5f.png
[3a78480ad95b43cfa748efb33444ce5e.png]: https://img-blog.csdnimg.cn/3a78480ad95b43cfa748efb33444ce5e.png
[2bbfda8b8ef144c18f63fb83843a5a60.png]: https://img-blog.csdnimg.cn/2bbfda8b8ef144c18f63fb83843a5a60.png
[c8d0262ddd8e4de2b6d3d0658e3bc948.png]: https://img-blog.csdnimg.cn/c8d0262ddd8e4de2b6d3d0658e3bc948.png
[464198fb54384271ab9539f7d9a953d5.png]: https://img-blog.csdnimg.cn/464198fb54384271ab9539f7d9a953d5.png