Element UI 로 폼 컴포넌트 구축하기 - Vue.js UI

소개

이 프로젝트에서는 인기 있는 Vue.js UI 라이브러리인 Element UI 를 사용하여 폼 컴포넌트를 구축하고 웹 애플리케이션에 통합하는 방법을 배우게 됩니다.

👀 미리보기

완성된 폼 컴포넌트 미리보기

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

초기 코드 구조 및 파일 구성을 이해하는 방법
폼이 사라지게 만드는 문제를 식별하고 해결하는 방법
웹 애플리케이션에서 폼이 올바르게 표시되도록 하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

Element UI 를 사용하여 Vue.js 애플리케이션에서 폼 컴포넌트를 생성할 수 있습니다.
UI 컴포넌트 통합과 관련된 문제를 해결하고 수정할 수 있습니다.
웹 애플리케이션에서 외부 라이브러리를 적절하게 포함하고 참조하는 것의 중요성을 이해할 수 있습니다.

프로젝트 구조 설정

이 단계에서는 프로젝트 파일과 구조를 설정합니다. 이 단계를 완료하려면 아래 단계를 따르세요.

프로젝트 폴더를 엽니다. 디렉토리 구조는 다음과 같습니다:

├── element-ui-2.15.10
│   ├── index.css
│   └── index.js
├── index.html
├── js
│   ├── http-vue-loader.js
│   └── vue.min.js
└── myform.vue

여기서:

index.html은 메인 페이지입니다.
myform.vue는 캡슐화된 폼 컴포넌트 파일입니다.
js는 Vue.js 관련 파일을 저장하는 폴더입니다.
element-ui-2.15.10은 element-ui 파일을 저장하는 폴더입니다.

WebIDE 의 오른쪽 하단 모서리에 있는 Go Live 버튼을 클릭하여 프로젝트를 실행합니다.

다음으로, VM 상단의 "Web 8080"을 열고 페이지를 수동으로 새로 고쳐 브라우저에서 다음 효과를 확인합니다:

Image Description

초기 코드의 폼 컴포넌트 myform은 브라우저에 표시되지 않습니다.

문제 식별

이 단계에서는 폼이 사라지게 된 문제를 식별하면서 프로젝트에 제공된 초기 코드에 대해 배우게 됩니다.

index.html 파일을 엽니다. 이 파일은 애플리케이션의 진입점 역할을 하는 메인 HTML 파일입니다.
index.html의 코드를 검토합니다. 필요한 Vue.js 및 Element UI 파일을 포함하고 있으며, myform.vue 컴포넌트에 대한 참조도 포함하고 있음을 확인할 수 있습니다.
myform.vue 파일을 엽니다. 이 파일은 표시해야 하는 폼을 포함하는 Vue 컴포넌트입니다.
myform.vue 파일의 구조를 이해합니다. 폼 컴포넌트에 필요한 HTML, JavaScript 및 CSS 를 포함합니다.
index.html 파일에서 참조되었음에도 불구하고 폼이 브라우저에 표시되지 않는 것을 확인합니다.
index.html 파일을 다시 주의 깊게 검토합니다.
element-ui-2.15.10/index.js 파일이 index.html에 도입되지 않았음을 확인합니다.

문제 해결

이 단계에서는 문제를 해결하고 폼이 올바르게 표시되도록 합니다.

index.html 파일을 엽니다.
<head> 내부의 하단에 element-ui-2.15.10/index.js 파일의 도입부를 추가합니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vanished Into Thin Air</title>
    <script src="./js/vue.min.js"></script>
    <script src="./js/http-vue-loader.js"></script>
    <!-- element-ui style -->
    <link rel="stylesheet" href="./element-ui-2.15.10/index.css" />

    <!-- TODO: element-ui js -->
    <script src="./element-ui-2.15.10/index.js"></script>
  </head>
  <!-- ... -->
</html>

index.html 파일에 변경 사항을 저장합니다.
브라우저를 새로 고쳐 업데이트된 페이지를 확인합니다.
아래 이미지와 같이 폼이 예상대로 표시되는지 확인합니다: