and chatgpt 学習フレームワーク 05 - ホームページ開発

前回の記事ではホームページを簡単に書きましたが、システム管理の背景として、メニューのナビゲーションやメニューに応じた特定のページの表示など、ホームページは比較的複雑です。この記事では、chatgpt を使ってホームページを生成してみましょう。

ホームプロンプト

chatgpt にコード生成を支援してもらいたい場合は、明確な要件を指定する必要があります。以下は私たちのプロンプトの言葉です。

vue3 と elementplus を使用して、管理背景のホームページを作成するのを手伝ってください。サイドバー、トップ、メイン コンテンツ、ボトムに分かれているレイアウト コンポーネントを使用する必要があります。サイドバーは主にメニューを表示するために使用されます。外側の層はスクロール コンテナで、内側の層はメニューです。メニューの第 1 レベルのメニューは、ホームページ、カテゴリ管理、製品管理、およびシステム管理です。上部をフレックスレイアウトのdivで折り返し、両端を横配置 コンテンツの左側にアイコン、右側にユーザ​​ー名を配置 名前をクリックするとパーソナルセンターとなるサブメニューが表示され、ログアウトしてメインコンテンツエリアに表を配置、下部に著作権情報を表示

これは最初のバージョンで生成されたコードです

<template>
  <div class="admin-home">
    <div class="sidebar">
      <el-scrollbar>
        <el-menu :default-active="activeMenu" class="menu" router>
          <el-menu-item index="home">首页</el-menu-item>
          <el-submenu index="management" v-if="showManagement">
            <template #title>分类管理</template>
            <el-menu-item index="category">商品分类</el-menu-item>
            <el-menu-item index="product">商品管理</el-menu-item>
          </el-submenu>
          <el-submenu index="system" v-if="showSystem">
            <template #title>系统管理</template>
            <el-menu-item index="user">用户管理</el-menu-item>
            <el-menu-item index="role">角色管理</el-menu-item>
            <el-menu-item index="menu">菜单管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-scrollbar>
    </div>

    <div class="main-content">
      <div class="top">
        <div class="logo">
          <!-- 放置图标 -->
        </div>
        <div class="user-info" @click="toggleSubMenu">
          {
    
    {
    
     userName }}
          <el-dropdown v-model="subMenuVisible">
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>

      <div class="content">
        <!-- 放置表格 -->
      </div>

      <div class="footer">
        版权信息
      </div>
    </div>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      activeMenu: 'home',
      showManagement: true,
      showSystem: true,
      userName: 'John Doe',
      subMenuVisible: false,
    };
  },
  methods: {
    
    
    toggleSubMenu() {
    
    
      this.subMenuVisible = !this.subMenuVisible;
    },
  },
};
</script>

<style>
.admin-home {
    
    
  display: flex;
}

.sidebar {
    
    
  width: 200px;
}

.menu {
    
    
  width: 100%;
}

.main-content {
    
    
  flex-grow: 1;
  padding: 20px;
}

.top {
    
    
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
    
    
  /* 样式 */
}

.user-info {
    
    
  cursor: pointer;
}

.content {
    
    
  /* 样式 */
}

.footer {
    
    
  /* 样式 */
}
</style>

生成されたコードは div でレイアウトされます。Elementplus コンテナー レイアウトを使用し、ヒント ワードを再度追加したいと考えています。

コンテナレイアウトを使用する

上記のコードでは、レイアウト コンポーネントを Container レイアウト コンテナーで再度変更する必要があります。

<template>
  <el-container class="admin-home">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu :default-active="activeMenu" class="menu" router>
          <el-menu-item index="home">首页</el-menu-item>
          <el-submenu index="management" v-if="showManagement">
            <template #title>分类管理</template>
            <el-menu-item index="category">商品分类</el-menu-item>
            <el-menu-item index="product">商品管理</el-menu-item>
          </el-submenu>
          <el-submenu index="system" v-if="showSystem">
            <template #title>系统管理</template>
            <el-menu-item index="user">用户管理</el-menu-item>
            <el-menu-item index="role">角色管理</el-menu-item>
            <el-menu-item index="menu">菜单管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header class="top">
        <div class="logo">
          <!-- 放置图标 -->
        </div>
        <div class="user-info" @click="toggleSubMenu">
          {
    
    {
    
     userName }}
          <el-dropdown v-model="subMenuVisible">
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <el-main class="content">
        <!-- 放置表格 -->
      </el-main>

      <el-footer class="footer">
        版权信息
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      activeMenu: 'home',
      showManagement: true,
      showSystem: true,
      userName: 'John Doe',
      subMenuVisible: false,
    };
  },
  methods: {
    
    
    toggleSubMenu() {
    
    
      this.subMenuVisible = !this.subMenuVisible;
    },
  },
};
</script>

<style>
.admin-home {
    
    
  height: 100vh;
}

.top {
    
    
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
    
    
  /* 样式 */
}

.user-info {
    
    
  cursor: pointer;
}

.content {
    
    
  /* 样式 */
}

.footer {
    
    
  /* 样式 */
}
</style>

コードには大きな問題はないようです。コードをホームページに貼り付けて、プロジェクトを開始します。

ここにエラーがあります

  33:31  error  `slot` attributes are deprecated  vue/no-deprecated-slot-attribute

chatgpt とは何なのか聞いてみましょう

このエラーは、Vue の ESLint ルール vue/no-deprecated-slot-attribute によって発生します。Vue 3 では、slot プロパティが非推奨となり、推奨されなくなったと記載されています。代わりに、スロットの定義と使用には新しい構文を使用する必要があります。

Vue 3 では、スロットは新しい v-slot ディレクティブを使用して定義および参照されます。たとえば、以前は次のように書かれていました。

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
  </div>
</template>

Vue 3 では、上記のコードは v-slot ディレクティブを使用して書き直す必要があります。

Vue 3 プロジェクトでこのエラーが発生した場合は、非推奨のスロット プロパティの使用を避けるために、新しい構文ルールに従って関連するコードを書き直してください。これにより、コードが Vue 3 と互換性があり、警告やエラーが生成されないことが保証されます。

次に、コードのどの部分が solt のものかを検索します。

主にドロップダウン メニューに問題があるため、公式ドキュメントに戻る必要があります。例がどのように記述されているか見てみましょう

https://element-plus.org/zh-CN/component/dropdown.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95

公式ドキュメントによると、ドロップダウンメニューのコードを次のように変更します。

 <el-dropdown v-model="subMenuVisible">
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item divided>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

ホームページ http://localhost:8080 にアクセスします。現在の効果は次のとおりです。

質問が 4 つあります。メニューをクリックして新しいページを開きます。メニューをクリックすると、テーブルのコンテンツがメイン コンテンツ領域に表示されることを期待します。アイコンが正常に表示されず、ページ内に縦スクロールバーがあり、メニューの順序が間違っており、階層関係を持たないメニューの一覧になっています。

メニュー階層を正しく表示する

公式ドキュメントを確認してください

https://element-plus.org/zh-CN/component/menu.html#%E4%BE%A7%E6%A0%8F

主な原因はサブメニューのラベルが間違っているため、正しいコードは次のとおりです。

 <el-menu :default-active="activeMenu" class="menu" router>
          <el-menu-item index="home">首页</el-menu-item>
          <el-sub-menu index="management" v-if="showManagement">
            <template #title>分类管理</template>
            <el-menu-item index="category">商品分类</el-menu-item>
            <el-menu-item index="product">商品管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="system" v-if="showSystem">
            <template #title>系统管理</template>
            <el-menu-item index="user">用户管理</el-menu-item>
            <el-menu-item index="role">角色管理</el-menu-item>
            <el-menu-item index="menu">菜单管理</el-menu-item>
          </el-sub-menu>
        </el-menu>

アイコンが正しく表示されない

elementplus のアイコンコンポーネントを使用する必要があります。まず、対応するパッケージをインストールする必要があります

npm install @element-plus/icons-vue --save

インストール後、main.jsに導入する必要があります

import {
    
     createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router/index.js';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)

app.use(ElementPlus)
app.use(router);
app.mount('#app')
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    
    
    app.component(key, component)
  }

次にヘッダーのコードを調整します

<div class="user-info" @click="toggleSubMenu">
          {
    
    {
    
     userName }}
          <el-dropdown v-model="subMenuVisible">
            <el-icon><CaretBottom /></el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item divided>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

        </div>

垂直スクロールバーの問題を解決する

ページのソースコードを見ると、スクロールバーは主に本文で設定された余白によって発生しています。本体のデフォルト スタイルをオーバーライドするには、グローバル スタイルを追加する必要があります。資産ディレクトリに新しいスタイル フォルダーを作成し、その中に新しい global.css を作成し、次のスタイルを記述します。

body {
    
    
    margin: 0;
  }

スペースの制限により、メニューで新しいページが開く問題は次のセクションで解決します。