Vue と Element-UI を使用してポータル Web サイトのレイアウト デザインを実装する方法

Vue と Element-UI を使用してポータル Web サイトのレイアウト デザインを実装する方法

今日のデジタル時代において、ポータル Web サイトは企業や組織が情報を表示し、サービスを提供するための重要なプラットフォームの 1 つです。 、ユーザーとの対話、そのレイアウトのデザインは特に重要です。人気のフロントエンド フレームワークである Vue.js を UI コンポーネント ライブラリ Element-UI と組み合わせると、モダンで美しいポータル Web サイトを迅速に構築できます。この記事では、Vue と Element-UI を使用してポータル Web サイトのレイアウト設計を実装する方法をコード例を添付して紹介します。

1. Vue と Element-UI のインストール

まず、Node.js と npm (または Yarn) がインストールされていることを確認します。コマンド ライン ツールを開き、次のコマンドを実行して Vue プロジェクトを作成します:

npm install -g @vue/cli
vue create portal-website
cd portal-website

次に、Element-UI コンポーネント ライブラリをインストールします:

npm i element-ui -S

2. Element-UI
をインストールします。

まず、src/main.js ファイルを開いて次のコードを追加します。

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

これで、Element-UI の導入が完了しました。

3. レイアウト コンポーネントの作成

src/views ディレクトリに新しいフォルダー layout を作成し、 # 4 つのフォルダーを作成します##layout ディレクトリ内の Header.vue、Sidebar.vue、Footer.vue、および Main.vue。 。

Header.vue サンプル コード:

<template>
  <div class="header">
    <!-- 在这里放置头部的内容 -->
  </div>
</template>

<script>
export default {
  name: 'Header',
}
</script>

<style scoped>
.header {
  height: 60px;
  background-color: #f0f0f0;
}
</style>

Sidebar.vue サンプル コード:

<template>
  <div class="sidebar">
    <!-- 在这里放置侧边栏的内容 -->
  </div>
</template>

<script>
export default {
  name: 'Sidebar',
}
</script>

<style scoped>
.sidebar {
  width: 200px;
  background-color: #f0f0f0;
}
</style>

Footer.vue サンプル コード:

<template>
  <div class="footer">
    <!-- 在这里放置底部的内容 -->
  </div>
</template>

<script>
export default {
  name: 'Footer',
}
</script>

<style scoped>
.footer {
  height: 60px;
  background-color: #f0f0f0;
}
</style>

Main.vue サンプル コード：

<template>
  <div class="main">
    <!-- 在这里放置主要内容区域的内容 -->
  </div>
</template>

<script>
export default {
  name: 'Main',
}
</script>

<style scoped>
.main {
  flex: 1;
  background-color: #fff;
}
</style>

ホームページ コンポーネントの作成

新しいファイル

Home.vue を src/views ディレクトリに作成します。例 コードは次のとおりです。

<template>
  <div class="home">
    <Header />
    <div class="content">
      <Sidebar />
      <Main />
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from './layout/Header.vue';
import Sidebar from './layout/Sidebar.vue';
import Main from './layout/Main.vue';
import Footer from './layout/Footer.vue';

export default {
  name: 'Home',
  components: {
    Header,
    Sidebar,
    Main,
    Footer
  }
}
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content {
  flex: 1;
  display: flex;
  overflow: hidden;
}
</style>

ホームページ コンポーネントでは、前に作成した 4 つのレイアウト コンポーネントを導入し、Flex レイアウトを使用してページの基本構造を実装しました。

App.vue を変更する

src/App.vue ファイルを開き、その内容をクリアして、次のコードを追加します。

<template>
  <div id="app">
    <Home />
  </div>
</template>

<script>
import Home from './views/Home.vue';

export default {
  name: 'App',
  components: {
    Home
  }
}
</script>

<style>
#app {
  margin: 0 auto;
  max-width: 1200px;
}
</style>

App コンポーネントでは、Home コンポーネントをエントリ コンポーネントとして導入し、使用しました。

プロジェクトを実行します

コマンド ライン ツールで次のコマンドを実行して開発サーバーを起動します:

npm run serve

次に、

http を開きます。ブラウザ ://localhost:8080 で、ポータル Web サイトのレイアウトを確認できます。

上記の手順により、Vue と Element-UI を使用したシンプルなポータル レイアウト設計を実装することができました。実際のニーズに応じて、このレイアウトをさらに調整および拡張できます。 Element-UI が提供する豊富なコンポーネントを使用すると、コンテンツやスタイルを簡単に追加して、よりリッチで多様なポータルを作成できます。

この記事が、Vue と Element-UI を使用してポータル Web サイトのレイアウト設計を実装するのに役立つことを願っています。開発プロセスの成功を祈っています。

以上がVue と Element-UI を使用してポータル Web サイトのレイアウト デザインを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。