Vue 페이지에서 요소 구성요소를 사용하는 방법(단계)

Vue는 국내 유명 기업의 Element 팀이 만든 인기 있는 프런트엔드 개발 프레임워크입니다. Element는 Vue 2.0을 기반으로 한 데스크톱 구성 요소 라이브러리 세트로, 머티리얼 디자인 디자인 표준을 따르며 풍부한 구성 요소 스타일과 풍부한 기능을 제공합니다. 이는 좋은 사용자 상호 작용 경험을 가지고 있으며 보다 편리하고 아름다운 사용자 인터페이스를 구축하는 데 매우 적합합니다. 그렇다면 Vue 페이지에서 Element 컴포넌트를 어떻게 사용하나요? 다음에는 함께 배워볼까요?

1. Element 구성 요소 라이브러리 설치

Element를 사용하기 전에 먼저 Element를 설치해야 합니다. 터미널에 프로젝트 디렉터리를 입력하고 다음 명령을 실행하여 Element를 설치합니다.

npm i element-ui -S

여기서 -S는 Element를 프로젝트의 종속 환경으로 설치한다는 의미입니다.

yarn add element-ui

설치 완료 마지막으로 main.js에 Element를 소개합니다.

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

Vue.use(ElementUI)

여기서 Vue.use 메소드는 Vue 프로젝트에서 Element 컴포넌트를 사용할 수 있도록 Element 플러그인을 등록하는 데 사용됩니다.

Using Element 컴포넌트

이후 Vue 페이지에서 Element 컴포넌트를 소개하여 그것이 제공하는 다양한 컴포넌트를 사용할 수 있습니다. 예를 들어 버튼을 사용해야 하는 경우 코드에 다음 코드를 직접 작성할 수 있습니다.

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

여기서 el-버튼은 Element 플러그인에 정의된 버튼 구성 요소입니다. 이 과정에서 우리는 필요한 구성 요소를 자유롭게 선택하고 이를 프로젝트 코드에 삽입하여 복잡한 페이지의 대화형 효과를 얻을 수 있습니다.

사용자 정의 테마

Element는 다양한 기본 구성 요소를 제공하지만, 프로젝트에서 색상, 크기, 글꼴 등의 사용자 정의가 필요한 상황이 발생하는 경우 매우 쉽게 테마를 사용자 정의할 수도 있습니다. 테마 사용자 정의는 매개변수 수정과 스타일 재정의라는 두 가지 방법으로 나눌 수 있습니다.

3.1 매개변수 수정

프로젝트에서 매개변수를 별도로 정의합니다. 이는 요소 구성요소와 사용자 정의 구성요소를 포함한 전역 구성요소에 효과적입니다.

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

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

3.2 스타일 재정의

전역 스타일을 수정하여 $style에 의해 생성된 스타일을 재정의하세요.

먼저 다음 명령을 통해 Element 테마 패키지를 로컬에 다운로드해야 합니다.

npm i element-theme -S

다운로드가 완료된 후 Element 테마 패키지를 선택하여 자체 테마 컴파일을 시작할 수 있습니다. 예를 들어 기본값을 선택했습니다. Element의 테마.

main.js에 다음 콘텐츠를 추가하세요.

import ET from 'element-theme'

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

ET.theme 메소드는 사용자 정의 테마를 컴파일하고 출력하는 데 사용됩니다. 여기서

는 수정하려는 테마 이름을 나타내며 여기에서 이름을 사용자 정의할 수 있습니다. ET.theme을 사용하여 테마를 작성할 때 Less 구문을 따라야 한다는 점에 유의하는 것이 중요합니다. default

다른 페이지에서 다른 사용자 정의 테마를 사용하려면 스타일 파일을 추가하고 각 페이지에 대해 별도의 테마를 정의할 수 있습니다. 예를 들어 login.vue에서 핑크 테마를 실행하려면 다음 코드를 작성하면 됩니다.

// 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>

위는 Vue 페이지에서 Element 컴포넌트를 사용하는 기본 내용입니다. 물론 Element 구성 요소 라이브러리에는 테이블, 페이지 매김, 메시지, 대화 상자 등과 같은 다른 많은 구성 요소가 있습니다. 이러한 구성 요소의 사용법은 Element 설명서에서 찾을 수 있습니다. 구성 요소를 삽입하고 사용하는 방법을 설명한 후에는 사용자 정의 테마를 사용하여 색상과 스타일을 수정하여 페이지에 더 많은 아름다움과 상호 작용성을 추가할 수 있습니다. 이 기사가 Vue와 Element를 배우는 데 도움이 되기를 바랍니다.

위 내용은 Vue 페이지에서 요소 구성요소를 사용하는 방법(단계)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!