vue前后端分离之美化页面

最新推荐文章于 2025-05-12 10:02:14 发布

knife1220

最新推荐文章于 2025-05-12 10:02:14 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/caideb/article/details/89450285

vue 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中集成Element UI组件库，包括安装依赖、配置样式、使用图标和菜单组件等步骤，帮助开发者快速搭建美观且功能丰富的前端界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.main.js 引入element-ui

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import NormailizeCss from 'normalize.css'
import 'vue-awesome/icons'
import Icon from 'vue-awesome/components/Icon'

Vue.use(ElementUI);
Vue.component('icon', Icon)

2.安装依赖库

cnpm i element-ui -S
cnpm i normalize.css -D
cnpm i vue-awesome -D

3.页面头

<template>
  <el-row>
    <el-col :span="24"
      <div class="head-wrap">HEAD</div>
    </el-col>
  </el-row>
</template>

<style scoped>
.head-wrap{

}
</style>

4.菜单

<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
      unique-opened
      router
      background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>菜单</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="list">列表</el-menu-item>
            <el-menu-item index="form">表单</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
		
		
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    methods: {
      handleOpen(key, keyPath) {
        //console.log(key, keyPath)
      },
      handleClose(key, keyPath) {
        //console.log(key, keyPath)
      }
    }
  }
</script>

4.主框架

<template>
  <div id="app">
    <el-container>
      <el-header class="header">
        <vheader />
      </el-header>
      <el-container>
        <el-aside width="200px">
          <navmenu></navmenu>
        </el-aside>
        <el-main>
			<router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import NavMenu from '@/components/NavMenu'
import Header from '@/components/Header'

export default {
  name: 'app',
  components: {
    'navmenu': NavMenu,
    'vheader': Header
  }
}

</script>

<style>
.header {
  background-color: #409EFF;
  color: #fff;
  line-height: 60px;
}
</style>

5.效果