이 글은 처음에 발표되었다 medium.freecodecamp.org
당신은 전단 개발에 흥미가 있습니까?
만약 그렇다면, 이 게시물은 당신에게 주는 것입니다!
Vue 사용을 시작합니다.js, HTML, CSS, 자바스크립트, 로켓과학, 핵물리, 양자이론 등을 알아야 하는데...
응😱…
응, 진짜가 아니야.Vue는 HTML, CSS 및 JavaScript만 있으면 사용할 수 있습니다.회사 명😃.
이 글은 간단한 Vue를 만드는 방법을 소개합니다.생성된 응용 프로그램의 폴더 구조를 설명합니다.또한 간단한 Vue를 만듭니다.js 구성 요소.
시작합시다.

선결 조건

노드를 설치합니다.js(아직 나타나지 않은 경우)

노드가 필요합니다.js, Vue에 필요한 라이브러리는 노드 패키지 관리자(npm)를 사용하여 다운로드한 것입니다.노드를 설치하려면 https://nodejs.org/en/ 을 참조하십시오.js.

Vue CLI 설치

다음 명령을 사용하여 Vue CLI를 설치합니다.

npm install -g @vue/cli

Vue CLI는 Vue를 생성하는 데 도움이 됩니다.js 프로젝트는 매우 쉽다.CLI라고도 하지만 아래에 설명할 항목을 만드는 UI도 있습니다.😄.

항목 만들기

명령 프롬프트에서 다음 명령을 입력합니다.

vue ui

그러면 브라우저에서 다음 화면이 열립니다.

생성을 클릭합니다.그리고 프로젝트를 만들 목표를 입력하십시오.

그런 다음 새 항목을 만들려면 여기를 클릭하십시오.

그러면 다음 화면이 열립니다.

예시 vue 프로그램으로 프로젝트 폴더를 입력하고 다음 을 누르십시오.
다음 화면에서 다음 그림과 같이 기본 사전 설정을 선택합니다.이 글에 대해 기본 설정은 가장 간단한 시작이다.

마지막으로 Create Project 를 클릭합니다.
프로젝트가 잘 설정되었는지 확인하려면 프로젝트 폴더에 들어가서 다음 명령을 사용하여 프로그램을 시작하십시오.

cd sample-vue-app
npm run serve

응용 프로그램이 로컬 호스트 8080에서 실행됩니다.다음 그림은 브라우저에서 응용 프로그램의 모양을 보여 줍니다.

축하드립니다. 첫 번째 Vue를 만들었습니다.js 프로젝트!😄
단, 이 항목에는 자동으로 생성된 파일과 폴더가 많이 있습니다.
정말 이 서류들이 무슨 뜻인지 알 필요가 있습니까?
코드가 이상한 방식으로 실행될 때, 그것들을 이해하는 것이 틀림없이 도움이 될 것이다. 이것은 개발자 세계에서 자주 발생한다.😈

응용 프로그램 폴더 구조

가방.json: 이 파일은 모든 노드 의존 관계를 가지고 있습니다.

공용/색인.html: 이것은 응용 프로그램이 시작될 때 불러오는 첫 번째 파일입니다.이 파일은 다음 코드 세그먼트<div id=”app”></div>.를 가지고 있습니다. 모든 구성 요소는 이 id를 앱으로 하는div에 불러옵니다.

src/main.js: Vue 인스턴스를 만드는 파일입니다.이 파일은 다음 코드 세그먼트new Vue({ render: h => h(App)}).$mount(‘#app’).를 포함하고 있습니다. 이 코드 세그먼트는 응용 프로그램 구성 요소가 id가 App인 요소 (즉div 요소) 에 불러와야 한다는 것을 알려 줍니다.

src/App.vue: 이 파일은 응용 프로그램 구성 요소에 대응하며, 이 구성 요소는 모든 다른 구성 요소의 용기를 충당합니다.HTML 코드 템플릿, JavaScript 코드 스크립트, CSS 스타일이 있습니다.

src/components: 이것은 당신이 개발한 모든 구성 요소의 저장 위치입니다.모든 구성 요소에는 HTML, JavaScript 및 CSS 코드의 템플릿, 스크립트 및 스타일 태그가 있습니다.

dist: 생성된 파일을 저장하는 폴더입니다.이 폴더를 가져오려면 명령npm run build을 실행합니다.이 명령을 실행할 때 코드는 축소되고 묶여dist 폴더에 저장됩니다.이 폴더의 코드는 일반적으로 생산 환경에 배치됩니다.

첫 번째 구성 요소 만들기

First라는 파일을 만듭니다.src/구성 요소 내의 vue.이 파일에는 HTML, JavaScript 및 CSS가 포함됩니다.하나씩 추가합시다.이 섹션의 모든 코드는 First에 속합니다.vue 파일.제일vue는 우리의 vue 구성 요소가 될 것이다

CSS

<style scoped>
.demo {
    background-color: cyan;
}
</style>

기본 CSS입니다.<style scoped>의 매개변수 범위는 CSS가 이 어셈블리에만 적용됨을 나타냅니다.

JavaScript

<script>
export default {
    name: 'First',
    props: {
    msg: String
    }
}
</script>

name 매개 변수는 첫 번째 구성 요소의 이름을 표시합니다.
props 매개 변수는 이 구성 요소의 입력을 표시합니다.여기에서 msg라고 불리는 입력이 있습니다. 이것은 String 형식입니다.

HTML

<template>
    <div class="demo">
    <h1>{{ msg }}</h1>
    </div>
</template>

{{msg}}는 HTML 코드에서 Vue 어셈블리에 액세스하여 매개변수를 입력하는 방식입니다.

첫 번째 구성 요소의 전체 코드

이것은 파일의 내용입니다.vue:

<template>
    <div class="demo">
    <h1>{{ msg }}</h1>
    </div>
</template>

<script>
export default {
    name: 'First',
    props: {
    msg: String
    }
}
</script>

<style scoped>
.demo {
    background-color: cyan;
}
</style>

다행이네요. 구성 요소가 생성되었습니다!😃
현재 npm run serve 을 사용하여 응용 프로그램을 실행하면 다음 화면이 표시됩니다.

잠깐만, 예전과 같은 출력이잖아.우리가 방금 만든 구성 요소는 어디에 있습니까?
문제는 우리가 구성 요소를 만들었지만 어디에서도 사용한 적이 없다는 것이다.이제 이 구성 요소를 사용합시다.😄

어셈블리 작업

이 구성 요소를 주 응용 프로그램 구성 요소에 추가합니다.이것은 응용 프로그램의 업데이트 코드입니다.vue:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <First msg="First Component"/>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import First from './components/First.vue'
export default {
  name: 'app',
  components: {
    First
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

우선 구성 요소를 응용 프로그램 구성 요소로 가져와야 합니다.이것은 명령import First from ‘./components/First.vue’을 통해 완성된 것이다

다음으로 JavaScript에서 응용 프로그램 구성 요소가 첫 번째 구성 요소를 사용할 것이라고 언급해야 합니다.이것은 코드 세그먼트components: {First}에 의해 완성된 것이다

마지막으로, 우리는 응용 프로그램 구성 요소의 첫 번째 구성 요소를 사용해야 한다.이것은 HTML 템플릿에서 코드 세그먼트<First msg=”First Component”/>를 사용하여 완성한 것이다

여기 msg는 첫 번째 구성 요소의 입력 매개 변수입니다. msg의 값은 응용 프로그램 구성 요소

에서 보냅니다.
현재 npm run serve 을 사용하여 응용 프로그램을 실행하면 다음 출력을 볼 수 있습니다.

비밀번호

Click Here 여기에 표시된 코드를 GitHub 저장소에서 가져옵니다.GitHub repo는 복제 및 실행 코드에 대한 설명을 제공합니다.
Click Here 응용 프로그램의 모양을 봅니다.Github 페이지를 사용하여 배포됩니다.

축하😃

이제 첫 번째 Vue를 성공적으로 구축했습니다.js 응용 프로그램.아주 간단한 구성 요소를 만드는 방법도 배웠습니다.다음 Vue에 관한 게시물에서js, 더 많은 개념을 소개하겠습니다.기대해주세요!

공구서류

Vue.js:https://vuejs.org/v2/guide/
Vue CLI:https://cli.vuejs.org/guide/

언제든지 저에게 연락하거나 따라주세요.

만약 네가 이 게시물을 좋아한다면, 너는 나의 사이트를 볼 수 있다https://adityasridhar.com기타 유사 직위