vue3 + elemenplus implementa a barra de navegação [1]

Adquira o hábito de escrever juntos! Este é o 8º dia da minha participação no "Nuggets Daily New Plan · April Update Challenge", clique para ver os detalhes do evento .

prefácio

Recentemente, fiz um projeto de graduação para fazer um site de música. Para ser dividido em gerência e cliente. O processo de desenvolvimento é registrado aqui. Espero sua correção.

Implemente a barra de navegação hoje . Antes do artigo começar, crie algumas novas pastas para armazenar nosso código por um tempo. (criado com vite, atualizará o artigo criado pelo projeto posteriormente).

vueRouter

Neste artigo, concentro-me apenas em como implementá-lo e compartilho alguns suplementos de acompanhamento para o vueRouter. Em primeiro lugar, se você deseja implementar a barra de navegação, precisa do suporte de roteamento.

Instalar

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

Criar um novo arquivo de roteador

Deixe como está aqui, vamos mudá-lo mais tarde.

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

Montar em 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')

复制代码

Modifique o arquivo do roteador

Crie um novo na pasta do roteador clientRouter.ts(o arquivo js também está disponível) e manageRouter.tsarmazene a configuração de roteamento do gerenciamento e do cliente, respectivamente. Em seguida, leve para router.ts. Como os componentes ainda não foram escritos, eles são todos escritos como vazios aqui, e lembre-se de exportá-los.

gerenciarRoteador

const manageRouter =  // 管理端
{

}
export default manageRouter
复制代码

clienteRoteador

const clientRouter = {
   
}
export default clientRouter;

复制代码

roteador

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: ✈️

Instalar

// NPM
npm install element-plus --save

// Yarn
yarn add element-plus

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

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

recipiente

Vamos dar uma olhada na documentação oficial, queremos implementar o seguinte layout.

AppLayout.vue

crie um novo arquivo

layoutCrie uma nova pasta na pasta recém-criada acima AppLayout.vue. Primeiro, copie o conteúdo do site oficial. Em seguida, adicione um pouco de cor de fundo.

• el-aside é a barra lateral. el-header é o local da navegação do cabeçalho. el-main é a área de exibição principal, não altere o conteúdo de acordo com a mudança de rota.
• <script lang="ts" setup>Aqui lang="ts"significa usar a sintaxe ts. setup é um novo açúcar sintático. setup As opções são executadas antes do componente ser criado e  props depois de analisado, e é o ponto de entrada da API composta. Vou postar um artigo detalhado mais tarde.
• <style scoped lang="scss">Para todos os componentes Vue, desde que sejam definidos <style scoped></style>, o Vue gerará um valor de dados exclusivo para o componente. Como mostrado abaixo:

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

复制代码

adicionar roteador

Agora nosso manageRouter não tem conteúdo de configuração.

• Importe nosso AppLayoutcomponente como a navegação mais externa.
• Outras páginas na seção de gerenciamento são colocadas em filhos.
• AppLayoutLembre-se de adicionar um sufixo à referência de componente em filhos e à referência de componente.vue
• Construa Home.vue e UserManage.vue novamente.Para ver o efeito, você pode escrever algo casualmente.

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

Casa

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

复制代码

Então dê uma olhada no efeito atual, http://localhost:3000/manage (observe a porta que você iniciou).

Pode-se verificar que não há apenas uma margem, mas também uma altura de 100%. Vamos modificar o estilo abaixo.

mudar o estilo

instalar atrevimento

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

Novo arquivo de estilo global

Primeiro crie um novo na pasta de estilocommon.scss

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

introduzir

Introduza este arquivo de estilo no arquivo App

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

Efeito

As margens são removidas da seguinte forma, o que significa que o arquivo de estilo global que introduzimos funciona.

alterar altura

Se você quiser alterar a altura do lado, precisamos definir seu elemento pai e o elemento pai do elemento pai para 100%. Mas o surgimento de vh não precisa fazê-lo. adicionar um contêiner ao contêinerheight: 100vh;

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

}
}
复制代码