这篇文章主要介绍了详解如何在vue项目中引入elementUI组件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前提：已经安装好Vue
初始化vue
vue init webpack itemname
运行初始化demo
运行一下初始后的demo，如果没有问题则进行安装elementUI
npm run dev
安装 elementUI
npm i element-ui -S
引入elementUI
在main.js中引入elementUI
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
测试
下面我们来测试一下
在创建header.vue文件，复制一段elementUI的代码
<template> <el-menu :default-active="activeIndex2" 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> <Header></Header> </div> </template> <script> import Header from './pages/header.vue' export default { components:{ Header, } } </script> <style> </style>
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: