이 프로젝트에서는 인기 있는 Vue.js UI 라이브러리인 Element 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"을 열고 페이지를 수동으로 새로 고쳐 브라우저에서 다음 효과를 확인합니다:
초기 코드의 폼 컴포넌트 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 파일에 변경 사항을 저장합니다.축하합니다! 문제를 성공적으로 해결하고 폼을 올바르게 표시했습니다.
축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.
