一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。

前言

最近接了一个毕设，做一个音乐网站。要分管理端和客户端。这里记录一下开发过程。希望大家的指正。

今天实现一下导航栏。文章开始前先新建几个文件夹，用于一会儿存放我们的代码。(使用vite创建，稍后会更新项目创建的文章)。

vueRouter

这篇文章我只注重如何实现，对于vueRouter的一些分享后续补充。首先，想要实现导航栏就需要有路由的支持才可以。

安装

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

新建router文件

这里先这么放着，我们一会儿再更改。

/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文件

在router文件夹下再新建clientRouter.ts(js文件也可以)和manageRouter.ts分别存放管理端和客户端的路由配置。然后再引到router.ts中。因为组件都还没写好，这里先都写成空的，记得导出既可。

manageRouter

const manageRouter =  // 管理端
{

}
export default manageRouter
复制代码

clientRouter

const clientRouter = {
   
}
export default clientRouter;

复制代码

router

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

网址：✈️

安装

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

container

我们去官方文档看一下，我们想要实现如下的布局。

AppLayout.vue

新建文件

在上面新建好的 layout 文件夹下新建 AppLayout.vue。首先把官网的内容先复制过来。然后添加一些背景色。

el-aside 就是侧边栏。el-header 就是头部导航的位置。el-main就是主要的展示区域，根据路由改变别换内容。
<script lang="ts" setup> 这里 lang="ts"代表使用使用ts语法。setup是一个新的语法糖。 setup 选项是在组件创建之前, props 被解析之后执行，是组合式 API 的入口。等我后面会发一篇详细的文章。
<style scoped lang="scss"> 对于所有的 Vue 组件，只要设置了<style scoped></style>，Vue就会给该组件生成一个唯一data值。如下图：

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

复制代码

添加router

刚才我们manageRouter是没有配置内容的。

引入我们的AppLayout组件，把它作为最外层的导航。
manage部分的其它页面都放入children中。
children中组件的引用和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
复制代码

Home

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

新建全局样式文件

首先在style文件夹下新建common.scss

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

引入

在App文件中引入这个样式文件

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

效果

如下去掉了边距，那么说明我们引入的全局样式文件起作用了。

改高度

如果想改aside的高，我们需要把它的父元素、父元素的父元素都设置为100%。但是vh的出现就不需要这样做了。给container添加一个 height: 100vh;

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

}
}
复制代码

vue3 + elemenplus实现导航栏[1]

前言