新しい vue プロジェクト (サイドバー、ホームページなど) をレイアウトする方法

実行できる新しい vue プロジェクトを作成します。

srcのviewフォルダ配下にlayoutフォルダを作成し、図のように4つのvueを作成します

MainLayout のコード

3.ルーター配下のindex.jsを見つけて設定し、元の5～10行を修正します赤ペンの1と2は自分で名前を付けたもの、3か所はMainLayoutのパスです

MainLayout.vue にコードを書き続け、NavBar などを書きます。

次に、NavBar、HeaderView、ContentView にコードを記述します。例として ContentVIew を取り上げます。

次にブラウザを開くと、このようなページが表示されます

上記の Home|view では、App.vue 内のコードはクリアされていません。その中のコードをすべて削除することをお勧めします。

これを見ると、現時点では小さな初期の成功を収めていることがわかります。

NavBar.vue でスタイルを記述する

結果のスタイルは図に示されていますが、大きなボックスのレイアウトの幅と高さが設定されていないため、設定された幅と高さは効果がありません。

MainLayout でスタイルを記述します。高さ、幅などは直接 100% ではなく、100vh または 100vh として記述する必要があることに注意してください。

このときの表示効果は以下の通りです。

（その後、私はそっと大きな赤いものに変えました）

この時点で、第 2 段階の成功が達成されました。！！

headerviewとcontentviewのスタイルについて簡単に書く

element-ui ライブラリを使用するには、最初にインストールする必要があります (これは面倒なプロセスです。element-ui の公式ライブラリを確認してください)。

element-ui ライブラリのサイドバーのコードを Navbar に貼り付けます。

これらのコードを貼り付けるだけです。以下は NavBar の完全なコードです。

<template>
    <div class="navbar">

   
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="3-1">选项1</el-menu-item>
          <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
          <template slot="title">选项4</template>
          <el-menu-item index="3-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </el-aside>
    


    </div>
</template>
<script>
export default {
    data() {
        return {

        }

    }
}
</script>
<style >
.navbar {
    width: 220px;
    height: 100%;
    background-color: rgb(141, 134, 134);
    display: flex;
}
</style>

mian.js の完全なコード

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)

}).$mount('#app')

効果を実感してください:

ナビゲーションバーの 1 つ、2 つ、3 つをクリックするだけです。

理解できない場合はコメント欄で質問してください。気に入らない場合はスプレーしないでください。。。。。。。。

新しい vue プロジェクト (サイドバー、ホームページなど) をレイアウトする方法

おすすめ