What Element UI Offers

Element UI serves as a desktop-oreinted component library for Vue 2.0, developed by the Ele.me team. It provides pre-built interface pieces—links, buttons, images, tables, forms, pagination bars—that accelerate page construction.

Adding Element to a Project in VS Code

1. Open the integrated terminal by right‑clicking the project folder. If that option is missing, the folder is not a complete Vue project. Create one through the Vue CLI graphical interface before importing it.
2. Run the following command in the terminal. An internet connection is required.

npm install element-ui@2.15.3

Once finished, an element-ui directory appears inside node_modules.

Registering the Library Globally

Within main.js, add the block below. It imports the core library, its CSS theme, and registers it with Vue.

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

Vue.use(ElementUI);

Organizing Element Component Files

• Create an element folder inside the views directory to collect Element‑specific components. Use camelCase names to avoid linting warnings.
• A typical Vue component file contains three sections:

<template>
  <!-- HTML template -->
</template>

<script>
export default {
  /* data, methods, lifecycle hooks */
};
</script>

<style>
  /* CSS rules */
</style>

Using an Elemant Component: Button Example

• Visit the official Element documentation, locate a component, and copy the sample code via the "Show Code" toggle.
• Paste it into the appropriate Vue file.

Displaying the Element Component Through the Root App

Without this step, the browser still renders the default App.vue content. Update App.vue to mount the new component:

<template>
  <div id="wrapper">
    <element-demo></element-demo>
  </div>
</template>

<script>
import ElementDemo from './views/element/ElementView.vue';

export default {
  components: {
    ElementDemo
  },
  data() {
    return {
      notification: 'Loaded Element UI'
    };
  },
  methods: {}
};
</script>

<style scoped>
#wrapper {
  padding: 1rem;
}
</style>

The component now appears in the browser, confirming that the Element library is active.