Huawei Cloud クラウドサーバー評価 [Vue3 Museum Management System] Vue3、Element-plus メニュー コンポーネントを使用してカルーセル マップを構築

シリーズ記事ディレクトリ

第 1 章 上部、中央、下部 (上部メニュー、下部領域、中央のメイン領域表示) の 3 層ホームページをカスタマイズする 第 2 章
Vu​​e3、Element-plus メニュー コンポーネントを使用してメニューを構築する
第 3 章 Vu​​e3、Element-plus メニュー コンポーネントを使用して、図
[第 4 章 Vu​​e3、Element-plus メニューコンポーネントを使用した集合写真記事の構築]
Huawei Cloud Cloud Server 評価 第 1 章 [Linux 実戦] Huawei Yunyao Cloud Server L インスタンス Java、ノード環境構成

---

序文

[Huawei Cloud Cloud Server評価 第1章と第2章]でノードサービス(NodeとNpmを設定済み)とgit(Vueプロジェクトコードのプル)を設定しました [Vue3 Museum Management System]で設定しました ホームページ構造今日は、ホームページ構造、メニュー、ホームページカルーセルを Huawei Cloud サーバーに展開する必要があります。

---

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、カルーセルコンポーネント

VueHome.vue ファイルを開き、カルーセル関数を追加します。ここでは、Element-plus のカルーセル コンポーネント
を使用してカルーセル関数を作成します。

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>
      <!-- 轮播图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、サーバーにログインします（「Huawei Cloudクラウドサーバー評価第1章および第2章」で説明）

3.2.2. Vue プロジェクトコードをプルする

コードアドレス: https://github.com/hd5723/museum.git
ターミナルに入り、次のコマンドを入力します。

cd /home //ホーム ディレクトリに入る
mkdir html //html ディレクトリを作成する
cd html //home/html ディレクトリに入る
mkdir vue //vue ディレクトリを作成する
cd vue //home/html/vue ディレクトリに入る
git clone https://github. com/hd5723/museum.git //博物館のコード (Vue3 の博物館管理システム) をプルします
ls //現在のディレクトリ内の情報を表示します
cd Museum //home/html/vue/museum ディレクトリに入ります
ls //内の情報を表示します現在のディレクトリ Information
cdfront //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: 1 行目: vue-cli-service: コマンドが見つかりません
入力コマンド: 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 runserve – --port 80 //ポート 80 でプロジェクトを開始します

アクセスアドレス：http://139.159.230.49/#/

---

要約する

以上が今日お話したい内容ですが、この記事では、git によるコードのプルや npm コマンドによるプロジェクトの開始など、博物館管理システムのホームページのカルーセル マップについて簡単に紹介するだけです。