vue3 + elemenplus implémente la barre de navigation [1]

Prenez l'habitude d'écrire ensemble ! C'est le 8ème jour de ma participation au "Nuggets Daily New Plan · April Update Challenge", cliquez pour voir les détails de l'événement .

avant-propos

J'ai récemment pris un projet de fin d'études pour faire un site Web de musique. A diviser en direction et client. Le processus de développement est enregistré ici. J'espère pour votre correction.

Implémentez la barre de navigation dès aujourd'hui . Avant le début de l'article, créez quelques nouveaux dossiers pour stocker notre code pendant un certain temps. (créé avec vite, mettra à jour l'article créé par le projet plus tard).

vueRouter

Dans cet article, je me concentre uniquement sur la façon de l'implémenter et partage quelques suppléments de suivi pour vueRouter. Tout d'abord, si vous souhaitez implémenter la barre de navigation, vous avez besoin du support du routage.

Installer

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

Créer un nouveau fichier de routeur

Laissez-le tel quel ici, nous le modifierons plus tard.

/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
复制代码

Monter dans 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')

复制代码

Modifier le fichier du routeur

Créez-en un nouveau sous le dossier du routeur clientRouter.ts(le fichier js est également disponible) et manageRouter.tsstockez la configuration de routage de la gestion et du client respectivement. Ensuite, dirigez-vous vers router.ts. Parce que les composants n'ont pas encore été écrits, ils sont tous écrits comme vides ici, et n'oubliez pas de les exporter.

gérerRouter

const manageRouter =  // 管理端
{

}
export default manageRouter
复制代码

clientRouter

const clientRouter = {
   
}
export default clientRouter;

复制代码

routeur

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


复制代码

élémentplus

URL : ✈️

Installer

// NPM
npm install element-plus --save

// Yarn
yarn add element-plus

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

montage 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')
复制代码

récipient

Jetons un coup d'œil à la documentation officielle. Nous voulons implémenter la mise en page suivante.

AppLayout.vue

créer un nouveau fichier

layoutCréez un nouveau dossier sous le dossier nouvellement créé ci- dessus AppLayout.vue. Tout d'abord, copiez le contenu du site officiel. Ensuite, ajoutez une couleur de fond.

• el-aside est la barre latérale. el-header est l'emplacement de la navigation d'en-tête. el-main est la zone d'affichage principale, ne modifiez pas le contenu en fonction du changement d'itinéraire.
• <script lang="ts" setup>Ici lang="ts"signifie utiliser la syntaxe ts. setup est un nouveau sucre syntaxique. setup Les options sont exécutées avant la création du composant et  props après son analyse, et c'est le point d'entrée de l'API composite. Je posterai un article détaillé plus tard.
• <style scoped lang="scss">Pour tous les composants Vue, tant qu'ils sont définis <style scoped></style>, Vue générera une valeur de données unique pour le composant. Comme indiqué ci-dessous:

<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>

复制代码

ajouter un routeur

Pour l'instant, notre manageRouter n'a pas de contenu de configuration.

• Importez notre AppLayoutcomposant en tant que navigation la plus externe.
• Les autres pages de la section de gestion sont placées dans les enfants.
• AppLayoutN'oubliez pas d'ajouter un suffixe à la fois à la référence de composant dans les enfants et à la référence de composant.vue
• Construisez à nouveau Home.vue et UserManage.vue. Afin de voir l'effet, vous pouvez écrire quelque chose avec désinvolture.

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
复制代码

Domicile

<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>

复制代码

Ensuite, regardez l'effet actuel http://localhost:3000/manage (notez le port que vous avez démarré).

On peut constater qu'il n'y a pas seulement une marge, mais aussi une hauteur de 100 %. Modifions le style ci-dessous.

changer le style

installer culot

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

Nouveau fichier de style global

Créez d'abord un nouveau dans le dossier de stylecommon.scss

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

introduire

Introduisez ce fichier de style dans le fichier App

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

Effet

Les marges sont supprimées comme suit, ce qui signifie que le fichier de style global que nous avons introduit fonctionne.

changer de hauteur

Si vous souhaitez modifier la hauteur du côté, nous devons définir son élément parent et l'élément parent de l'élément parent sur 100 %. Mais l'émergence de vh n'a pas besoin de le faire. ajouter un conteneur au conteneurheight: 100vh;

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

}
}
复制代码