記事ディレクトリ
この一連のメモの焦点は、Vue3 を使用してプロジェクトを設定し、バックエンド API と対話する方法にあります。Vue の基本機能は紹介しません。Vue の基本機能については、こちらを参照してください。Vueをすぐに使い始めるための 4 時間のビデオ. このエントリを読んだところですが、悪くないと思います。
コードアドレス: https://github.com/yexia553/vue_study/tree/%E9%85%8D%E7%BD%AEvue-router/vue3-notes
個人サイトにも同時掲載：http://www.panzhixiang.cn/article/2022/10/22/57.html
ページレイアウトの説明と効果の表示
ウェブサイトには必ず独自のレイアウトがあり、どの領域にどの情報を表示するかがレイアウトと呼ばれますが、下の図は私たちのデザインによるレイアウト効果を3つの部分に分けたものです。
ページの左側は全体で、メニューバー、つまりWebサイトのどのモジュールが表示されるかを表示し、右側は上下に分かれており、上部はWebサイトのどのモジュールが表示されるかに使用されます。ユーザーのアバター. アバターをクリックしてログアウトなどの操作を行います; 側面の下部はWebサイトのメインエリアであり、ユーザーに伝えたい情報が表示されます。
左側のメニューバーと右側の上部はページに関係なく必要なため、この2つの部分を共通コンポーネントとして、左側のメニューバーをCommonAside、右側の上部をCommonAsideという名前にすることができます。この部分は CommonHeader と呼ばれます。
エレメントプラスの紹介
Vue を知っている人は基本的に Element UI (Vue2 で使用) または Element Plus を知っています。それらの役割は、直接使用できるように多くの UI ライブラリをカプセル化することです。たとえば、テーブルを実装したい場合は、el- table タグは、これを達成するのに役立ちます。
レイアウトを実装する
インストール
Element Plusを使用するには、まずインストールする必要があり、プロジェクトのルートディレクトリで次のコマンドを実行します。
npm install element-plus --save
アイコンは後ほどElement Plusで使用するので、ここでもインストールします。
npm install @element-plus/icons-vue
導入
インストール後、Vue3 で Element Plus を使用する前に、Vue3 に Element Plus を導入する必要があります。ここではグローバル インポート方法を使用していますが、実際にはいくつかのインポート方法があります。ここをクリックすると、具体的なインポート方法が表示されます。
インポート方法はmain.jsで設定を行いますが、設定後のmain.jsは以下のようになり、インポートに必要なコードをコード内にメモしておきます。
import {
createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus' // 引入Element Plus 所需
import 'element-plus/dist/index.css' // 引入Element Plus 所需
import router from './router/index.js'
import * as ElementPlusIconsVue from '@element-plus/icons-vue' // 引入Element Plus icon 所需
import './assets/main.css'
const app = createApp(App)
// 引入Element Plus icon 所需
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(router)
app.use(ElementPlus) // 引入Element Plus 所需
app.mount('#app')
Vue3の初期スタイルを変更する
Vue3 にはプロジェクト作成時にデフォルトでいくつかのスタイル、つまり css があります。プロジェクトのルート ディレクトリ /src/assets/ パスの下に、2 つのスタイル ファイル、base.css と main.css があります。main.css を変更できます。
これは主に、 main.css 内の2 つの#app部分を変更するためのもので、次のように変更されます。
#app {
/* max-width: 1280px; */
margin: 0;
padding: 0;
font-weight: normal;
height: 100vh;
width: 100%;
}
#app {
/* display: grid; */
/* grid-template-columns: 1fr 1fr; */
padding: 0;
}
css部分については詳しく説明していませんが、主な目的はvueがブラウザ上でページを正常に表示できるようにすることですので、分からない場合はcss部分だけを勉強すれば大丈夫です。
レイアウトを実装する
前回のメモでルーティングについて説明したとき、Main.vue に書きました。
<template>
Home
</template>
内部のコンテンツを次の部分に置き換えます。
<template>
<div class="common-layout">
<el-container>
<el-aside width="180px">
Aside
</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
</template>
置換後、プロジェクトのルートディレクトリでプロジェクトnpm run devを実行する次のページが表示されます。
非常にシンプルではありますが、ページ全体の骨格が出てきたことがわかります。
CommonAsideコンポーネント
上で述べたように、左側のメニュー バーを CommonAside というコンポーネントに抽出できます。さっそく実装してみましょう。
CommonAside.vue ファイルを作成する
まず、プロジェクトの初期化時に src/components が自動的に作成するコンテンツを削除します。
CommonAside.vue ファイルを src/components パスの下に作成します。ファイルの内容は次のとおりです。
<template>
<el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" :collapse-transition="false"
active-text-color="#ffd04b">
<h3>后台管理</h3>
<el-menu-item :index="item.path+''" v-for="item in list" :key="item.label">
<component class="icons" :is="item.icon"></component>
<span>{
{item.label}}</span>
</el-menu-item>
</el-menu>
</template>
<script>
export default {
setup() {
const list = [
{
path: '/user',
name: 'user',
label: '用户管理',
icon: 'user',
url: '/user'
},
{
label: '其它',
name: 'other',
icon: 'location',
path: '/other',
url: 'other'
},
];
return {
list,
}
}
}
</script>
<style lang="less" scoped>
.icons {
width: 18px;
height: 18px;
margin-right: 4px;
}
.el-menu-vertical-demo {
width: 100%;
border-right: none;
h3 {
color: #fff;
text-align: center;
margin-top: 10px;
}
}
</style>
コードはテンプレート、スクリプト、スタイルの 3 つの部分に分かれていますので、それぞれに分けて説明します。
レンプレート
必要なスタイルを実現するために、テンプレート内でel-menuタグが参照されています。実際、ここでは非常に単純な部門のみを使用しており、使用していないメソッドや属性が多数あります。エレメントプラスのウェブサイト。
脚本
スクリプト内はjsコードです Vue3はオプションAPIと複合APIをサポートしています 私は複合APIを使用しています 2つの違いと選び方についてはこちらをご覧ください
実際にスクリプトの左側のメニューの内容を含むリストを定義して返しました。
スタイル
style にはスタイル、つまり css が含まれていますが、less を使用します。less に関する部分はここで読むことができます。実際、less を知らなくても問題ありません。上記のコードを見てください。真似をしてください、実は私もよく知りません、ただの真似です。
CommonAside.vue コンポーネントを使用する
前に分析したように、CommonAside コンポーネントはすべてのページに表示されるので、このコンポーネントを Main.vue に導入できます。導入後の Main.vue の内容は次のようになります。
<template>
<div class="common-layout">
<el-container>
<el-aside width="180px">
<!-- 要注意这里引用CommonAside组件的方法，拆分了两个字符，用中短线连接的-->
<common-aside></common-aside>
</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import CommonAside from "../components/CommonAside.vue";
export default {
components: {
CommonAside,
}
}
</script>
<style lang="less" scoped>
.common-layout {
height: 100%;
&>.el-container {
height: 100%;
&>.el-aside {
height: 100%;
background: #545c64;
}
&>.el-container {
&>.el-header {
padding: 0%;
}
}
}
}
</style>
コードの内容は非常にシンプルで、ちょっとした知識ポイントをスタイルで説明するだけです。
.common-layout は、それに続く中括弧のスタイルが class="common-layout" の範囲内で機能することを意味します。
.common-layout の下に &>.el-container があることがわかります。 .common-layout の外側に el-container がある場合、common-layout 内の el-container は機能しません。
CommonAside コンポーネントもここで完成します。プロジェクトを開始すると、ページは次のようになります。
