elementui icon 初始化不显示

如果 ElementUI 的图标在初始化时不显示，可能是因为您没有正确引入 ElementUI 的 CSS 文件或者您的项目中缺少相关的字体文件。

请确保您已经正确引入了 ElementUI 的 CSS 文件，例如：

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

同时，还需要引入 ElementUI 的字体文件。可以在 ElementUI 的官网下载字体文件，将其放置在项目的 `fonts` 目录下，并在 CSS 文件中设置对应的路径。例如：

@font-face {
  font-family: 'element-icons';
  src: url('../fonts/element-icons.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

如果仍然出现问题，您可以尝试清除浏览器缓存或者重新打包部署项目。

相关问题

用vue2加elementui写一个后台管理系统页面

由于本AI机器人无法进行图形界面的操作，无法提供完整代码，以下是一个简单的示例：

1. 项目初始化

使用Vue CLI创建一个新项目，选择Manually select features并勾选Babel、Router、Vuex、Linter / Formatter和Unit Testing，然后使用npm安装Element UI：

vue create admin-system
cd admin-system
vue add element

2. 配置路由和菜单

在src/router/index.js中配置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
import Dashboard from '../views/Dashboard.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在src/App.vue中配置菜单：

<template>
  <div id="app">
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu default-active="1" class="el-menu-vertical-demo" @select="handleSelect">
            <el-menu-item index="1"><i class="el-icon-menu"></i>Dashboard</el-menu-item>
            <el-menu-item index="2"><i class="el-icon-menu"></i>Users</el-menu-item>
            <el-submenu index="3">
              <template slot="title"><i class="el-icon-menu"></i>Settings</template>
              <el-menu-item index="3-1">General</el-menu-item>
              <el-menu-item index="3-2">Security</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleSelect(index) {
      switch (index) {
        case '1':
          this.$router.push('/dashboard')
          break
        case '2':
          this.$router.push('/users')
          break
        case '3-1':
          this.$router.push('/settings/general')
          break
        case '3-2':
          this.$router.push('/settings/security')
          break
      }
    }
  }
}
</script>

3. 编写登录和仪表盘页面

在src/views/Login.vue中编写登录页面：

<template>
  <div class="login">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="Username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="Password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">Login</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login() {
      if (this.form.username === 'admin' && this.form.password === 'admin') {
        this.$router.push('/dashboard')
      } else {
        this.$message.error('Invalid username or password.')
      }
    }
  }
}
</script>

在src/views/Dashboard.vue中编写仪表盘页面：

<template>
  <div class="dashboard">
    <h1>Dashboard</h1>
    <p>Welcome to the admin system.</p>
  </div>
</template>

4. 运行项目

在项目根目录下运行npm run serve命令，打开浏览器访问http://localhost:8080即可看到登录页面。输入用户名和密码admin/admin后，将跳转到仪表盘页面。在菜单中选择Settings -> Security可以看到子菜单的显示效果。

elementui的el-menu组件怎么实现点击一个让另一个是激活状态

您好，关于您的问题，可以使用el-menu中的selected属性来实现点击一个激活另一个的效果。具体来说，当一个菜单项被选中时，可以将其对应的key值存储在一个变量中，然后将其他菜单项的selected属性设置为false，将被点击的菜单项的selected属性设置为true，这样就可以实现只有一个菜单项处于激活状态的效果。以下是示例代码：

<template>
  <el-menu :default-openeds="['1']" class="el-menu-vertical-demo" :selected="selected">
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>导航一</span>
      </template>
      <el-menu-item-group title="分组一">
        <el-menu-item index="1-1">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="分组2">
        <el-menu-item index="1-3">选项3</el-menu-item>
        <el-menu-item index="1-4">选项4</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span>导航二</span>
      </template>
      <el-menu-item index="2-1">选项5</el-menu-item>
      <el-menu-item index="2-2">选项6</el-menu-item>
      <el-menu-item index="2-3">选项7</el-menu-item>
      <el-menu-item index="2-4">选项8</el-menu-item>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-document"></i>
        <span>导航三</span>
      </template>
      <el-menu-item index="3-1">选项9</el-menu-item>
      <el-menu-item index="3-2">选项10</el-menu-item>
      <el-menu-item index="3-3">选项11</el-menu-item>
      <el-menu-item index="3-4">选项12</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      selected: "1-1" // 初始化选中项为选项1
    };
  }
};
</script>

在上述代码中，我们通过设置selected属性来指定初始化选中的菜单项。可以根据具体需求再进行进一步的修改和扩展。希望这可以帮到您，谢谢！