vue开发（二） —— 引入elementUI组件/创建新页面

最新推荐文章于 2024-09-26 08:00:00 发布

阳光彩虹小红码

最新推荐文章于 2024-09-26 08:00:00 发布

阅读量586

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 前端文章标签： vue

原文链接：https://segmentfault.com/a/1190000013219163

前端同时被 2 个专栏收录

8 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

本文介绍如何通过三步完成ElementUI的安装、引入及使用。首先使用npm安装ElementUI，然后在main.js中引入并注册ElementUI，最后在header.vue文件中使用ElementUI组件。

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

引入elementUI组件

第一：安装elementUI

npm i element-ui -S
注：已经安装淘宝镜像的可以把npm换成cnpm

第二：引入elementUI

**在main.js中引入elementUI**
**注：main.js代表全局**

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

第三：使用

创建header.vue文件，复制一段elementUI的代码

<template>
    <el-menu
      :default-active="activeIndex2"
      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-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
      </el-submenu>
      <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

在App.vue中引入header.vue

<template>
  <div id="app">
    <Header></Header>
  </div>
</template>

<script>
	import Header from './pages/header.vue'
	
	export default {
	  components:{
	    Header,
	  }
	}
</script>