vue3 + elementplus implementa la barra de navegación [1]

¡Acostúmbrate a escribir juntos! Este es el octavo día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento .

prefacio

Recientemente tomé un proyecto de graduación para hacer un sitio web de música. A dividir en gestión y cliente. El proceso de desarrollo se registra aquí. Espero tu corrección.

Implemente la barra de navegación hoy . Antes de que comience el artículo, cree algunas carpetas nuevas para almacenar nuestro código por un tiempo. (creado con vite, actualizaré el artículo creado por el proyecto más adelante).

vueRouter

En este artículo, solo me enfoco en cómo implementarlo y comparto algunos complementos de seguimiento para vueRouter. En primer lugar, si desea implementar la barra de navegación, necesita el soporte de enrutamiento.

Instalar

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

Crear un nuevo archivo de enrutador

Déjalo como está aquí, lo cambiaremos más 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 en 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')

复制代码

Modificar el archivo del enrutador

Cree uno nuevo en la carpeta del enrutador clientRouter.ts(el archivo js también está disponible) y manageRouter.tsalmacene la configuración de enrutamiento de la administración y el cliente respectivamente. Luego conduce a router.ts. Debido a que los componentes aún no se han escrito, todos están escritos como vacíos aquí, y recuerde exportarlos.

administrar enrutador

const manageRouter =  // 管理端
{

}
export default manageRouter
复制代码

clienteRouter

const clientRouter = {
   
}
export default clientRouter;

复制代码

enrutador

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


复制代码

elementoplus

URL: ✈️

Instalar

// NPM
npm install element-plus --save

// Yarn
yarn add element-plus

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

montaje principal.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')
复制代码

envase

Echemos un vistazo a la documentación oficial. Queremos implementar el siguiente diseño.

AppLayout.vue

crear un nuevo archivo

layoutCree una nueva carpeta debajo de la carpeta recién creada arriba AppLayout.vue. Primero, copie el contenido del sitio web oficial. Luego agregue un poco de color de fondo.

• el-aside es la barra lateral. el-header es la ubicación de la navegación del encabezado. el-main es el área de visualización principal, no cambie el contenido de acuerdo con el cambio de ruta.
• <script lang="ts" setup>Aquí lang="ts"significa usar la sintaxis ts. setup es un nuevo azúcar sintáctico. setup Las opciones se ejecutan antes de crear el componente y  props después de analizarlo, y es el punto de entrada de la API compuesta. Publicaré un artículo detallado más adelante.
• <style scoped lang="scss">Para todos los componentes de Vue, siempre que estén configurados <style scoped></style>, Vue generará un valor de datos único para el componente. Como se muestra abajo:

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

复制代码

agregar enrutador

Justo ahora, nuestro manageRouter no tiene contenido de configuración.

• Importe nuestro AppLayoutcomponente como la navegación más externa.
• Otras páginas en la sección de administración se colocan en niños.
• AppLayoutRecuerde agregar un sufijo tanto a la referencia del componente en niños como a la referencia del componente.vue
• Cree Home.vue y UserManage.vue nuevamente Para ver el efecto, puede escribir 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>

复制代码

Gestión de usuarios

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

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

</style>

复制代码

Luego eche un vistazo al efecto actual http://localhost:3000/manage (tenga en cuenta el puerto que inició).

Se puede encontrar que no solo hay un margen, sino también una altura del 100%. Vamos a modificar el estilo a continuación.

cambiar el estilo

instalar sass

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

Nuevo archivo de estilo global

Primero cree uno nuevo en la carpeta de estilocommon.scss

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

introducir

Introducir este archivo de estilo en el archivo de la aplicación

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

Efecto

Los márgenes se eliminan de la siguiente manera, lo que significa que el archivo de estilo global que introdujimos funciona.

cambiar altura

Si desea cambiar la altura del lado, debemos establecer su elemento principal y el elemento principal del elemento principal en 100%. Pero la aparición de vh no tiene por qué hacerlo. añadir un contenedor al contenedorheight: 100vh;

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

}
}
复制代码