How to use element component in vue page (steps)

Vue is a popular front-end development framework created by the Element team of a well-known domestic company. Element is a desktop component library based on Vue 2.0. It follows the Material Design design standards and provides a rich set of component styles. With rich functions and good user interaction experience, it is very suitable for building a more convenient and beautiful user interface. So, how to use Element component in Vue page? Let us learn together next.

1. Install Element component library

Before using Element, we first need to install it. Enter the project directory in the terminal and execute the following command to install Element:

npm i element-ui -S

The -S here means that we will install Element as the dependent environment of the project. If you are using yarn, the command line should be:

yarn add element-ui

After the installation is complete, we introduce Element in main.js:

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

Vue.use(ElementUI)

The Vue.use method here is used to register the Element plug-in so that we can use the Element component in the Vue project.

2. Using the Element component

Subsequently, in our Vue page, we can introduce the Element component to use the various components it provides. For example, when we need to use a button, we can write the following code directly in the code:

<template>
  <div>
    <el-button>按钮</el-button>
  </div>
</template>

The el-button here is the button component defined in the Element plug-in. In this process, we can freely select the components we need and insert them into the project code to achieve the interactive effect of complex pages.

3. Customized theme

Element provides many basic components, but if you encounter situations in the project where you need to customize colors, sizes, fonts, etc. , the theme can also be customized very easily. Customizing themes can be divided into two ways: modifying parameters and overriding styles.

3.1 Modify parameters

Defining parameters separately in the project will be effective for global components, including Element components and customized components.

$--color-primary: #1ED2EB;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;

@import './node_modules/element-ui/packages/theme-chalk/src/index';

3.2 Override style

Override the style generated by $style by modifying the global style.

First, we need to download the Element theme package to the local through the following command:

npm i element-theme -S

After the download is completed, we can choose an Element theme package to start compiling our own theme, for example, we choose Element's default theme.

Add the following content in main.js:

import ET from 'element-theme'

ET.theme('default', {
  // your styles here
})

The ET.theme method is used to compile and output the custom theme, where default represents the name of the theme we want to modify , you can customize the name here. It is important to note that when writing themes using ET.theme, you need to follow Less syntax.

If you want to use different custom themes on different pages, you can add a style file and define a separate theme for each page. For example, if we want to launch a pink theme in login.vue, we can write the following code:

// login.vue
<style lang="scss">
  @import '/element-variables.scss';

  $--color-primary: #ff54a9;
  $--color-success: #67C23A;
  $--color-warning: #E6A23C;
  $--color-danger: #F56C6C;

  @import './node_modules/element-ui/packages/theme-chalk/src/index';
</style>

The above is the basic content of using the Element component in the Vue page. Of course, the Element component library has many other components, such as tables, paging, messages, dialog boxes, etc. The usage of these components can be found in the Element documentation. After how to insert and use components, we can use custom themes to modify colors and styles to add more beauty and interactivity to the page. I hope this article is helpful for you to learn Vue and Element.

The above is the detailed content of How to use element component in vue page (steps). For more information, please follow other related articles on the PHP Chinese website!