vue3+elemenplusはナビゲーションバーを実装します[1]

一緒に書く習慣をつけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して8日目です。クリックしてイベントの詳細をご覧ください。

序文

私は最近、音楽のウェブサイトを作るために卒業プロジェクトを取りました。管理とクライアントに分けられます。開発プロセスはここに記録されます。あなたの訂正を願っています。

今日、ナビゲーションバーを実装します。記事を始める前に、コードをしばらく保存するための新しいフォルダーをいくつか作成します。（viteで作成され、後でプロジェクトによって作成された記事を更新します）。

vueRouter

この記事では、それを実装する方法にのみ焦点を当て、vueRouterのフォローアップサプリメントをいくつか共有します。まず、ナビゲーションバーを実装する場合は、ルーティングのサポートが必要です。

インストール

# 安装路由
yarn add vue-router@4
复制代码

新しいルーターファイルを作成する

そのままにしておきます。後で変更します。

/src/router/router.ts

// 引入 vue-router
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Login',
    component: () => import('@/client/login/Login.vue'), // 注意这里要带上 文件后缀.vue 这个组件在下面贴了代码
  },
]
// createRouter创建路由
const router = createRouter({
  history: createWebHistory(),
  routes,
})
// 最后导出。es6的模块化方式
export default router
复制代码

main.jsにマウントします

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router'

const app = createApp(App)

app.use(router)

app.mount('#app')

复制代码

ルーターファイルを変更する

routerフォルダーclientRouter.ts（jsファイルも利用可能）の下に新しいものを作成し、manageRouter.tsそれぞれ管理とクライアントのルーティング構成を保存します。次に、router.tsに移動します。コンポーネントはまだ書き込まれていないため、ここではすべて空として書き込まれ、エクスポートすることを忘れないでください。

manageRouter

const manageRouter =  // 管理端
{

}
export default manageRouter
复制代码

clientRouter

const clientRouter = {
   
}
export default clientRouter;

复制代码

ルーター

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import clientRouter from './clientRouter'
import manageRouter from './manageRouter'
/**
 * 1. 因为我们分了客户端和管理端两部分，只有管理端需要有Layout导航 所以如下router管理分开了。
 * 2. 引用组建时，这里后缀要带上vue 因为ts知道默认找.vue文件
 * 
 */

const routes: RouteRecordRaw[] = [
  // 管理端
  manageRouter,
  // 客户端
  clientRouter,

]

const router = createRouter({
  // 路由模式
  history: createWebHistory(),
  routes,
})

export default router


复制代码

elementplus

URL：✈️

インストール

// NPM
npm install element-plus --save

// Yarn
yarn add element-plus

// pnpm
pnpm install element-plus
复制代码

main.tsマウント

app.use(ElementPlus)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router'
// ElementPlus 和 其 css文件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(router)
app.use(ElementPlus)

app.mount('#app')
复制代码

容器

公式ドキュメントを見てみましょう。次のレイアウトを実装したいと思います。

AppLayout.vue

新しいファイルを作成する

layout上記の新しく作成されたフォルダの下に新しいフォルダを作成します AppLayout.vue。まず、公式サイトの内容をコピーします。次に、背景色を追加します。

• el-asideはサイドバーです。el-headerは、ヘッダーナビゲーションの場所です。el-mainはメインの表示領域です。ルートの変更に応じてコンテンツを変更しないでください。
• <script lang="ts" setup>ここでは、ts構文を使用することをlang="ts"表します。セットアップは新しいシンタックスシュガーです。 setup オプションは、コンポーネントが作成される前 props と解析された後に実行され、複合APIのエントリポイントになります。詳細な記事は後で投稿します。
• <style scoped lang="scss">すべてのVueコンポーネントについて、それらが設定されている限り<style scoped></style>、Vueはコンポーネントの一意のデータ値を生成します。以下に示すように：

<template>
  <div class="common-layout">
    <el-container class="container">
      <el-aside class="aside">
        <AppMenu/>
      </el-aside>
      <el-container>
        <el-header class="header">Header</el-header>
        <el-main class="main"><router-view/></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup >
import AppMenu from '@/components/AppMenu.vue';
</script>
<style scoped lang="scss">
.container{
.aside{
  background: #797979;
  width:230px;
}
.header{
  background: #a1e9d2;
  height:80px;
}
.main{

}
}

</style>

复制代码

ルーターを追加

ちょうど今、manageRouterには構成コンテンツがありません。

• AppLayoutコンポーネントを最も外側のナビゲーションとしてインポートします。
• 管理セクションの他のページは子に配置されます。
• 子のAppLayoutコンポーネント参照とコンポーネント参照の両方に接尾辞を追加することを忘れないでください.vue
• Home.vueとUserManage.vueを再度ビルドします。効果を確認するために、何気なく何かを書くことができます。

import AppLayout from '@/layout/AppLayout.vue'
const manageRouter =  // 管理端
{
  path:'/manage',
  component : AppLayout,
  children:[
    {
      path:'',
      name:'home',
      component:()=>import('@/manage/Home/Home.vue')  
    },
    {
      path:'/user',
      name:'用户管理',
      component:()=>import('@/manage/UserManage/UserManage.vue')
    }
  ]
}
export default manageRouter
复制代码

家

<template>
 home
</template>
<script lang="ts" setup >

</script>
<style scoped lang="scss">

</style>

复制代码

UserManage

<template>
 用户管理
</template>
<script lang="ts" setup >

</script>
<style scoped lang="scss">

</style>

复制代码

次に、現在の効果を確認しhttp://localhost:3000/manage ます（開始したポートに注意してください）。

マージンだけでなく、高さも100％あることがわかります。以下のスタイルを変更してみましょう。

スタイルを変える

sassをインストールする

# sass
// 全局安装
yarn global add sass
npm install -g sass
// 安装相应的包
npm install sass sass-loader --save-dev
复制代码

新しいグローバルスタイルファイル

まず、スタイルフォルダに新しいものを作成しますcommon.scss

// 去掉边距
*{
    margin:0;
    padding: 0;
}
复制代码

導入する

このスタイルファイルをアプリファイルに導入します

@import './style/common.scss';
复制代码

効果

余白は次のように削除されます。これは、導入したグローバルスタイルファイルが機能することを意味します。

高さを変える

脇の高さを変更する場合は、その親要素と親要素の親要素を100％に設定する必要があります。しかし、vhの出現はそうする必要はありません。コンテナをコンテナに追加しますheight: 100vh;

.container{
  height: 100vh;
.aside{
  background: #797979;
}
.header{
  background: #a1e9d2;
  height:80px;
}
.main{

}
}
复制代码