【完全なプロジェクト構築】vue-cliをベースにvueフロントエンド構築テストシステムを実現——⑦トップバーコンポーネントコントロールと左ナビゲーションバーを実現するvuexをベースにプロジェクト開発崩壊

1.トップバーは単体でコンポーネントを構成することが多いので、srcフォルダ配下のcomponentsフォルダにCommonHeader.vueを新規作成する

関連するコードは次のとおりです。

<template>
    <div class="header-container">
        <!-- 顶栏的左侧内容 -->
        <div class="l-content"></div>
        <!-- 顶栏的右侧内容 -->
        <div class="r-content"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {

        }
    }
}

</script>

2. CommonHeader.vue コンポーネントを Main.vue に登録して使用する

ページを開き、UI に従ってスタイルを変更します

3. このセクションのポイントを以下に紹介します。 Vuex に基づいてトップバーボタンを実現し、左側のナビゲーションバーの折りたたみを実現します。

まず準備作業を行い、vuex の公式ドキュメントを検索します

公式ウェブサイトを開き、vuex を 3.x バージョンとして選択します [このプロジェクトは vue2 に基づいて開発されています]

Vuex は、 Vue.js アプリケーション用の状態管理パターン + ライブラリです。アプリケーション内のすべてのコンポーネントの集中ストアとして機能します。

4. vuex をプロジェクトに導入します [注: バージョンが正しいことを確認してください! npm 公式 Web サイトを開いて vuex のバージョン番号を確認できます] vscode ターミナルを開き、指定したディレクトリで次のコマンドを入力します。

npm i [email protected]

インストールが完了しました

src フォルダーの下に新しいストアフォルダーを作成し、次のコードを使用して index.js ファイルを作成します。

/* eslint-disable no-unused-vars */
//引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'


//将vuex进行全局部署
Vue.use(Vuex)

//创建vuex的示例
//引入tab后，将该实例对外暴露
export default new Vuex.Store({
    modules: {
       
    }
})

//注意，该部分内容最终要由main.js挂载到vue实例上

左側のメニューはデータの別の部分であり、上部のバーもそうであるため、モジュール化の考え方に従って、データの 2 つの部分をパッケージ化して管理する必要があり、新しい tab.js ファイルを作成する必要があります。 store フォルダーの下に作成されます。

【完全なプロジェクト構築】④と⑥の紹介によると、左ナビゲーションバーのメニューの折りたたみはisCollapseの操作で実現

(メッセージ数 62) 【プロジェクト構築完了】vue-cliをベースにvueフロントエンド構築テストシステムを実現——④ナビゲーションバーの切り替え効果を実現するvue-router【入れ子ルーティング】をベースにプロジェクト開発_小dandannaのブログ- CSDN ブログ

(メッセージ数 62) 【プロジェクト構築完了】vue-cliをベースにvueフロントエンド構築テストシステムを実現——⑥メニュークリックジャンプ機能を実現するプロジェクト開発_小ダンダンナのブログ - CSDNブログ

ここで、CommonHeader コンポーネントのアイコンアイコンをクリックして、左側のメニューナビゲーションバーの折りたたみ機能を実現する必要があります。ストアの tab.js でコントロールメニューを設定して、展開された isCollapse フィールドを折りたたむ必要があります。参考までに、上記の tab.js ファイルのコードは次のとおりです。

export default {
    state: {
        //在CommonAside通过操控collapse属性实现左侧菜单导航栏的收起和展开
        //isCollapse是collapse属性的属性值
        isCollapse: false
    },
    mutations: {
        //修改菜单展开收起的方法
        collapseMenu(state) {
            state.isCollapse = !state.isCollapse;
        }
    }
}

tab.js ファイルを記述したら、store フォルダー配下の index.js ファイルで参照します。

/* eslint-disable no-unused-vars */
//引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
import tab from './tab.js'

//将vuex进行全局部署
Vue.use(Vuex)

//创建vuex的示例
//引入tab后，将该实例对外暴露
export default new Vuex.Store({
    modules: {
        tab
    }
})

//注意，该部分内容最终要由main.js挂载到vue实例上

vuex インスタンスを外部に公開したら、main.js ファイルにマウントする必要があります。

import Vue from 'vue'
import App from './App.vue'

//全局引入element ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//引入iconfont字体图标
import "./assets/font/iconfont.css"

//引入router
import router from './router'

//引入store
import store from './store'

//对element ui进行全局注册
Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')