vue3 + elemenplus implements navigation bar [1]

Get into the habit of writing together! This is the 8th day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .

foreword

I recently took a graduation project to make a music website. To be divided into management and client. The development process is recorded here. Hope for your correction.

Implement the navigation bar today . Before the article starts, create a few new folders to store our code for a while. (created with vite, will update the article created by the project later).

vueRouter

In this article, I only focus on how to implement it, and share some follow-up supplements for vueRouter. First of all, if you want to implement the navigation bar, you need the support of routing.

Install

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

Create a new router file

Leave it as it is here, we will change it later.

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

Mount in 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')

复制代码

Modify the router file

Create a new one under the router folder clientRouter.ts(js file is also available) and manageRouter.tsstore the routing configuration of the management and client respectively. Then lead to router.ts. Because the components have not been written yet, they are all written as empty here, and remember to export them.

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

URL: ✈️

Install

// NPM
npm install element-plus --save

// Yarn
yarn add element-plus

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

main.ts mount

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

Let's take a look at the official documentation. We want to implement the following layout.

AppLayout.vue

create a new file

layoutCreate a new folder under the newly created folder above AppLayout.vue. First, copy the content of the official website. Then add some background color.

• el-aside is the sidebar. el-header is the location of the header navigation. el-main is the main display area, don't change the content according to the route change.
• <script lang="ts" setup>Here lang="ts"stands for using ts syntax. setup is a new syntactic sugar. setup Options are executed before the component is created and  props after it is parsed, and it is the entry point of the composite API. I will post a detailed article later.
• <style scoped lang="scss">For all Vue components, as long as they are set <style scoped></style>, Vue will generate a unique data value for the component. As shown below:

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

复制代码

add router

Just now our manageRouter has no configuration content.

• Import our AppLayoutcomponent as the outermost navigation.
• Other pages in the manage section are placed in children.
• AppLayoutRemember to add a suffix to both the component reference in children and the component reference.vue
• Build Home.vue and UserManage.vue again. In order to see the effect, you can write something casually.

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>

复制代码

Then take a look at the current effect, http://localhost:3000/manage (note the port you started).

It can be found that there is not only a margin, but also a height of 100%. Let's modify the style below.

change the style

install sass

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

New global style file

First create a new one in the style foldercommon.scss

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

introduce

Introduce this style file in the App file

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

Effect

The margins are removed as follows, which means that the global style file we introduced works.

change height

If you want to change the height of the aside, we need to set its parent element and the parent element of the parent element to 100%. But the emergence of vh does not need to do so. add a container to the containerheight: 100vh;

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

}
}
复制代码