Element Plus

Element Plus - это набор компонентов быстрой отрисовки интерфейса для фреймворка Vue JS 3.

Примечание. На момент написания статьи (07.01.2021) Element Plus - это набор компонентов для Vue 3, а для Vue 2 используется Element UI.

Vue 2 - https://element.eleme.io/

Vue 3 - https://element-plus.org

Установка

npm install element-plus --save

Подключение

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

Примечание. В версии element plus нельзя подключить компоненты отдельно. Они все подключаются разом, в отличие от версии element ui.

Если появляются ошибки типа "Cannot read properties of undefined (reading 'prototype')" значит используются несовместимые версии Vue и Element. Необходимо проверить, чтобы для Vue 2 использовался element ui, а для Vue 3 - element plus. 

Использование

С этого момента, если все подключилось правиьно, можно использовать компоненты из доков Element Plus.

Меню и router-link

Как подружить el-menu-item и router-link. Можно указать для el-menu параметр :router="true" и каждый el-menu-item будет работать как router-link, а параметр index будет работать как параметр to вrouter-link.

Пример

<template>
  <el-aside width="200px">
    <el-menu class="el-menu-vertical" :router="true">
      <template v-for="item in $router.options.routes">
        <el-menu-item :index="item.path">
          <el-icon><icon-menu /></el-icon>
          <span>{{ item.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </el-aside>
</template>