一个html页面如何引入多个element ui组件

àì夳堔傛蜴生んèń 2022-02-03 12:53 841阅读 0赞

### ***index.html页面*** ###

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>主页</title>
      </head>
      <body>
        
      <div id="myhead"></div> 
      </body>
    </html>

### ***main.js文件*** ###

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import hd from './App'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import router from './router'
    Vue.config.productionTip = false
    Vue.use(ElementUI)
    new Vue({
      el: '#myhead',
      router,
      components: { hd },
      template: '<hd/>'
    })

### ***App.vue文件*** ###

<template>
      <div id="myhead">
        <Head/>
        <zmd/>
      </div>
    </template>
    <script>
    import Head from '@/components/Head'
    import zmd from '@/components/Zmd'
    export default {
      name: 'App',
      components:{
        Head,
        zmd
      }
    }
    </script>
    <style>
    #myhead{
    margin-left: 0%;
    margin-top: 0%;
    width: 100%;
    }
    </style>

### ***Head.vue*** ###

<template>
     <div id="myhead">
    <div class="line"></div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1">
         在线心理咨询平台
      </el-menu-item>
        <el-menu-item index="2" >首页</el-menu-item>
      <el-menu-item index="3" >测试</el-menu-item>
      <el-menu-item index="4" >咨询</el-menu-item>
      <el-submenu index="5">
        <template slot="title">用户名</template>
        <el-menu-item index="5-1">个人中心</el-menu-item>
        <el-menu-item index="5-2">退出</el-menu-item>
        <el-menu-item index="5-3">选项3</el-menu-item>
      </el-submenu>
      <el-menu-item index="6" >注册/登录</el-menu-item>
    </el-menu>
     </div>
     </template>
    <script>
      export default {
        data() {
          return {
            activeIndex: '1',
          };
        },
        methods: {
          handleSelect(key, keyPath) {
            console.log(key, keyPath);
          }
        }
      }
    </script>

### ***Zmd.vue*** ###

<template>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in 6" :key="item">
          <h3 class="medium">{
       { item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </template>
    
    <style>
      .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
      }
      
      .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
      }
      
      .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
      }
    </style>

终端运行，效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220203/5098384eef1b4d24abf7fd34651f12a1.png