ElementUI

📢 This article was translated by gemini-2.5-flash

ElementUI, built by the Ele.me team, is a desktop UI component library for developers, designers, and product managers, powered by Vue 2.0.

Components are the building blocks of a webpage, like links, buttons, images, tables, forms, and pagination.

Vue2.x Official Site: International Mainland China

Vue3.x Official Site: https://element-plus.org/zh-CN/#/zh-CN

ElementUI Installation

Install the ElementUI library (in your current project directory) using this command:

`1`	`npm install [email protected]`

Import the ElementUI component library:

1
2
3
4
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Getting Started

Create the src/views/element/elementView.vue component. Copy code from the official docs, like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
    <div>
        <!-- 按钮 -->
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>
    </div>
</template>

<script>
export default {
    
}
</script>

<style>

</style>

Import the component in App.vue:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<template>
  <div id="app">
    <element-view></element-view>
  </div>
</template>

<script>
import elementView from './views/element/elementView.vue'
export default {
  components: { elementView },
}
</script>

<style></style>

The same applies to other components.

Importing Axios

Install:

1
npm install axios

Import:

1
import axios from 'axios';

Vue Router

Vue Router is Vue’s official router. It consists of:

VueRouter: The router class. It dynamically renders the correct component in the router view based on the route.
<router-link>: A link component that the browser renders as an <a> tag.
<router-view>: The dynamic view component that displays the component matching the current route.

Vue Router Installation

Command:

`1`	`npm install [email protected]`

Defining Routes

In src/router/index.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView // Imported above
  },
  {
    path: '/emp',
    name: 'emp',
      // Direct import method
    component: () => import('../views/tlias/empView.vue')
  },
  {
    path: '/redirect',
      // Redirect
    redirect: '/emp'
  }
]

Usage

Where you need to use it:

1
<router-link to="/dept">部门管理</router-link>

In App.vue:

1
2
3
4
5
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

In main.js:

1
2
3
4
5
6
import router from './router'

new Vue({
  router, // Use the router
  render: h => h(App)
}).$mount('#app')

Build and Deploy

Command:

1
npm run build

After running the command, a dist directory will be generated. Just deploy its contents.