这篇文章主要介绍了详解如何在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" 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> <p id="app"> <header></header> </p></template><script>import header from './pages/header.vue'export default { components:{ header, }}</script><style></style>
效果：
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在jquery中如何实现动态添加li标签并添加属性和绑定事件方法
在vue中使用elementui实现自定义主题方法
在elementui中如何实现默认样式修改
以上就是详解解读在vue项目中引入elementui组件的详细内容。