Vue项目引入引入ElementUI

ElementUI框架官网地址：https://element.eleme.cn/#/zh-CN/component/installation

一、安装ElementUI

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

 i : 安装指令，全拼：install
-S :生产环境，全拼：--save
-D :开发环境，全拼：--save--dev
-O :可选依赖，全拼：--save--optional
-E :精确安装指定模块版本，全称：--save--exact
-g：全局安装，全拼：--global

二、完整引入elementUI

1、在main.js中引入elementUI

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

这样就完成了Element的引入，样式文件需要单独引入。

2、测试

3.1 在src/views下创建文件Menu.vue（左侧菜单），内容如下：

<template>

  <el-menu :router="true" class="el-menu-vertical-demo" :default-active="defaultActive"
           @open="handleOpen" @close="handleClose" :collapse="isCollapse">

    <!-- 问卷管理 -->
    <el-menu-item index="/surveys">
      <i class="el-icon-document"></i>
      <span slot="title">问卷管理</span>
    </el-menu-item>
  </el-menu>
</template>

<script>

	export default {
   
		name: "Menu",
		computed: {
   
	      defaultActive(){
   
	        let path = this.$route.path;
	        return path;
	      },
		},
		data() {
   
			return {
   }
		},
		methods: {
   
			handleOpen(key, keyPath) {
   
		        console.log(key, keyPath);
		      },
	        handleClose(key, keyPath) {
   
		        console.log(key, keyPath);
		    }
		}
	}
</script>

<style scoped> 
</style>

3.2 在App.vue