Vue.js 기본 튜토리얼. 이 프레임워크로 시작하는 방법은 무엇인가요?

Vue.js는 어떻게 시작하나요?

가장 권장되는 방법은 Vue.js 프로젝트 는 Vue CLI. 설치하려면 입력하기만 하면 됩니다:

npm install -g @vue/cli


를 클릭한 다음 프로젝트를 만듭니다:

vue create simple-project
 cd ./simple-project

마지막으로 프로젝트를 실행할 수 있습니다:

npm run serve

간단한 컴포넌트 만들기

웹팩과 뷰로더 플러그인 덕분에 다음에서 컴포넌트를 만들 수 있습니다. .vue 파일. 모든 구성 요소에는 다음이 포함됩니다. 템플릿 를 HTML 보기로 표시합니다, 스크립트 로직과 스타일 CSS 스타일링으로.

간단하게 만들어 보겠습니다. VArticle.vue 구성 요소의 simple-project/src/components/VArticle.vue 파일과 다음 콘텐츠를 추가합니다:

<div class="article">
<h1 class="article__title">(( article.title ))</h1>
<p><span class="article__author"><br>(( article.author ))<br></span></p>
<p class="article__lead">(( article.lead ))</p>
</div>
</>

이전에 생성한 컴포넌트를 사용하려면 다음을 설정해야 합니다. simple-project/src/App.vue 파일 콘텐츠를 저장합니다:

<div>
<div>&nbsp;</div>
</div>
</>

이제 다음에서 브라우저를 열면 http://localhost:8080/ 를 클릭하면 다음과 같은 화면이 표시됩니다:

다음 단계는 무엇인가요?

이 튜토리얼에서는 Vue 프레임워크로 모험을 시작하는 방법을 보여드리려고 노력했습니다. 더 고급 컴포넌트를 만드는 방법이 궁금하다면 오픈 소스에서 찾을 수 있습니다. 부엘렌다 프로젝트.