vue3 + elemenplus는 탐색 모음을 구현합니다. [1]

함께 쓰는 습관을 들이세요! "너겟 데일리 뉴플랜 · 4월 업데이트 챌린지" 참여 8일차입니다. 클릭하시면 이벤트 내용을 보실 수 있습니다 .

머리말

나는 최근에 음악 웹사이트를 만들기 위해 졸업 프로젝트를 했습니다. 관리와 클라이언트로 나뉩니다. 개발 과정이 여기에 기록됩니다. 수정을 바랍니다.

지금 탐색 모음 을 구현하십시오 . 기사를 시작하기 전에 잠시 동안 코드를 저장할 몇 개의 새 폴더를 만드십시오. (vite로 생성, 나중에 프로젝트에서 생성된 기사를 업데이트합니다).

vue라우터

이 기사에서는 그것을 구현하는 방법에만 집중하고 vueRouter에 대한 몇 가지 후속 보완 사항을 공유합니다. 먼저 네비게이션 바를 구현하기 위해서는 라우팅 지원이 필요합니다.

설치

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

새 라우터 파일 생성

그대로 두십시오. 나중에 변경하겠습니다.

/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')

复制代码

라우터 파일 수정

라우터 폴더 clientRouter.ts(js 파일도 사용 가능) 아래에 새 폴더 manageRouter.ts를 만들고 관리 및 클라이언트의 라우팅 구성을 각각 저장합니다. 그런 다음 router.ts로 이동합니다. 구성 요소가 아직 작성되지 않았기 때문에 여기에는 모두 비어 있는 것으로 작성되고 내보내는 것을 기억하십시오.

관리 라우터

const manageRouter =  // 管理端
{

}
export default manageRouter
复制代码

클라이언트 라우터

const clientRouter = {
   
}
export default clientRouter;

复制代码

라우터

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


复制代码

요소 플러스

URL: ✈️

설치

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

컨테이너

공식 문서를 살펴보면 다음과 같은 레이아웃을 구현하고자 합니다.

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는 구성 요소에 대한 고유한 데이터 값을 생성합니다. 아래 그림과 같이:

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

复制代码

라우터 추가

지금은 managerRouter에 구성 콘텐츠가 없습니다.

• AppLayout구성 요소를 가장 바깥쪽 탐색으로 가져 옵니다.
• 관리 섹션의 다른 페이지는 자식에 배치됩니다.
• 자식의 구성 요소 참조와 구성 요소 참조 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
复制代码

집

<template>
 home
</template>
<script lang="ts" setup >

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

</style>

复制代码

사용자 관리

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

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

</style>

复制代码

그런 다음 현재 효과를 살펴보십시오 http://localhost:3000/manage (시작한 포트 참고).

여백뿐만 아니라 100%의 높이도 있음을 알 수 있습니다. 아래 스타일을 수정해 보겠습니다.

스타일을 변경

새스를 설치

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

새 전역 스타일 파일

먼저 스타일 폴더에 새 항목을 만듭니다.common.scss

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

소개하다

앱 파일에 이 스타일 파일을 소개합니다.

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

효과

여백은 다음과 같이 제거됩니다. 이는 우리가 도입한 전역 스타일 파일이 작동한다는 것을 의미합니다.

높이 변경

옆의 높이를 변경하려면 부모 요소와 부모 요소의 부모 요소를 100%로 설정해야 합니다. 그러나 vh의 출현은 그렇게 할 필요가 없습니다. 컨테이너에 컨테이너 추가height: 100vh;

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

}
}
复制代码