Vue.초보자 개발자를 위한 js 강좌: 기초 지식을 배우고 이 입문 Vue 구조를 사용합니다

개발 프로세스에서 신기술을 사용하기 시작할 때마다 최소한 두려움을 느낄 수 있습니다.특히 야외에 무수한 npm 패키지가 있을 때혼합과 일치는 때때로 많은 시간과 정력을 들여야 하기 때문에 보통 사람을 낙담하게 한다.이것은 다음 Vue의 위치입니다.초보자 개발자를 위한 js 강좌가 역할을 발휘하기 시작했다.

Vue가 뭐예요?js？너는 왜 신경을 쓰느냐?🤔

Vue.js 또는 Vue는 사용자 인터페이스를 구축하는 데 사용되는 JavaScript 프레임워크라고 약칭합니다.다른 프레임(예를 들어 Angular or React에 비해 Vue는 접근하기 쉽고 학습 곡선도 그렇게 가파르지 않다.
Vue도 모듈식으로 구성되어 있으므로 코드를 다시 사용할 수 있는 구성 요소로 분할할 수 있습니다.그들 모두는 자신의 HTML 태그, CSS, 자바스크립트 코드를 가지고 있다.

이 가상현실의 범위는 무엇입니까?js 강좌?🔍

이 짧은 Vue의 목적입니다.js 강좌는 비계를 제공합니다. 이를 바탕으로 Vue를 구축하고 실험할 수 있습니다.Vue 응용 프로그램의 기본 설정을 살펴보겠습니다.
(주의: 저희는 이 안내서에서 귀하에게 Vue 자체를 가르치지는 않겠지만, 프로젝트를 설정한 후 WordPress dashboard 프레임워크에 대한 더 많은 정보를 배울 수 있습니다. 저희가 완성한 후에 이 프로젝트에서 계속 실험할 수 있습니다.)
WordPress 플러그인에 대해 미리 정의된 템플릿을 사용하려면 Vue를 사용합니다.자세한 내용은 다음 GitHub 저장소에서 확인할 수 있습니다.official guide.

https://github.com/abaicus/vue-wp-bootstrap Vue。js 강좌: 선결 조건🚀

이 안내서를 계속 따르려면 컴퓨터에 다음과 같은 내용을 설정해야 합니다.
우선, 당신은 램프 더미가 필요합니다. Windows나 Mac에서 XAMPP를 사용할 수도 있고, Mac에서 비행기 로컬을 사용할 수도 있으며, 자신을 위해 새로운 를 설치할 수도 있습니다.
기계에 local WordPress install (npm) 가 설치되어 있는지 확인하십시오.터미널을 통해 Vue CLI 및 Vue 템플릿 초기화 도구인 다른 두 개의 패키지를 설치해야 합니다.이렇게:

$ npm install -g @vue/cli
$ npm install -g @vue/cli-init

이 두 의존 항목을 설치한 후 active directory를 로컬 워드프레스의 실례적인 wp 콘텐츠/plugins 디렉터리로 변경하고 다음 명령을 실행해야 합니다.

$ vue init abaicus/vue-wp-bootstrap my-vue-dashboard-plugin

다음에 프로젝트 설정에 대한 몇 가지 질문에 대답하라는 메시지가 표시됩니다.
구축 알림에 대해 첫 번째 옵션인'실행 시 + 컴파일러: 대부분의 사용자에게 추천'을 계속 선택하십시오.
필요한 경우 ESLint linter를 사용할 수 있습니다.프로젝트의 모든 linting 오류를 검사할 것입니다. 하지만 걱정하지 마십시오.
제출 Lint와 사전 제출 연결은 제출을 GitHub로 보내기 전에 제출 메시지와 코드를 검사하여 모든 내용이 깔끔하고 형식이 양호하도록 하는 데 사용됩니다.
완료되면 다음과 같은 터미널이 표시됩니다.
NodeJS package manager
계속하여 화면의 지침을 따를 수 있습니다.디렉토리를 새로 생성된 플러그인 디렉토리로 변경하고 터미널 프롬프트에 표시되는 명령을 실행합니다.이렇게 하면 프로그램이 시작되고 실행되며 코드 내부의 변경 사항을 기다리며 Vue 코드를 JavaScript로 전송합니다.

그것은 어떤 작용을 합니까?💻

많지 않다이것은 단지 백엔드 데이터를 표시하는 기본 응용 프로그램일 뿐이다.엔진 덮개 아래에 Vue가 많이 없습니다.플러그인 대시보드 페이지로 이동해서 활성화할 수 있습니다.관리 메뉴에 새 페이지를 추가합니다.이 페이지로 이동하면 두 문자열이 포함된 대시보드 페이지가 표시됩니다.

플러그인 비계 구조👨🏼‍💻

새로 생성된 플러그인의 파일 구조를 봅시다.이 Vue의 대부분의 구성 파일은 무시됩니다.응용 프로그램의 구조에 관심을 가질 수 있도록 js 강좌:

우선 플러그인이 있습니다.php 파일, 이것은 실제 플러그인의 입구점입니다.여기에는 메인 플러그인 종류가 있습니다.이것은 응용 프로그램의 주요 구성 요소가 포함되고 실행되는 곳이다.
다음은 소포입니다.json 파일, 모든 의존항과 일련의 다른 프로젝트 정보를 정의합니다.관심 있는 부분은 스크립트 필드 아래에 있습니다.여기에서 npmrun 접두사를 사용하여 모든 명령을 실행할 수 있습니다.현재 중요한 것은 npmrundev(응용 프로그램 개발을 위한 구축)와 npmrunbuild(응용 프로그램을 배치하여 생산할 준비가 되면 실행해야 함)이다.다른 명령은 이 두 명령과 인접하거나 이때 걱정할 필요가 없는 다른 명령을 실행한다.
includes 디렉토리에는 다음 세 개의 파일이 있습니다.

나머지.php 클래스는 현재 아무것도 하지 않았지만, RestAPI 루트를 추가하는 구조가 있습니다

자산.php 클래스 처리 스타일과 스크립트 줄 서기.여기서 JavaScript 파일은 PHP에서 Vue 응용 프로그램으로 시작 데이터를 전달하기 위해 로컬화됩니다.현재 문자 두 통만 보냈지만 원하는 내용을 포함할 수 있다.

관리자php 파일은 대시보드에 새 페이지를 추가하고 실제 플러그인 페이지를 보여 줍니다.응용 프로그램 자체가plugin\u 페이지 () 함수의 두 개의 빈 표시처럼 나타나는 것을 알 수 있습니다.이는 JavaScript가 애플리케이션을 로드한 후 실제 구현을 처리하기 때문입니다.
assets 디렉터리에서 다른 네 개의 디렉터리를 찾을 수 있습니다.

src 디렉터리 - 저희 Vue 응용 프로그램의 원본 파일입니다. 잠시 후에 토론하겠습니다.

scss 디렉터리 - CSS 스타일시트의 scss 스타일 파일을 생성합니다.

js 디렉터리 - src 디렉터리의 파일에서 생성된 전송 코드입니다.

css 디렉토리 - SCSS 파일의 컴파일 스타일입니다.

src 디렉토리 및 Vue 템플릿 파일

이 디렉터리에는 두 개의 파일이 있습니다:main.js와 응용 프로그램.vue.주요js 파일은 응용 프로그램의 입구점입니다.이것은 Vue app 구성 요소를 해당 id가 있는 DOM 요소에 추가합니다.

/* jshint esversion: 6 */
import Vue from 'vue'
import App from './App.vue'

window.addEventListener('load', function () {
  new Vue({ // eslint-disable-line no-new
    el: '#mvdp-app',
    components: { App },
    render: (h) => h(App)
  })
})

실제 응용 프로그램 표시는 응용 프로그램 내부에 있습니다.vue 템플릿:

/* jshint esversion: 6 */
<template>
  <div>
    <h1>{{this.strings.title}}</h1>
    <p>{{this.strings.description}}</p>
  </div>
</template>

<script>
  /* global MVDP */
  export default {
    data () {
      return {
        strings: MVDP.strings
      }
    },
    name: 'App.vue'
  }
</script>

<style scoped>

</style>

위의 코드 세그먼트에서 알 수 있듯이 Assets 클래스에서 로컬화된 문자열을 사용하고 있습니다.Vue의 가장 큰 특징은 구성 요소의 코드가 템플릿, 스크립트, 스타일에 가지런히 구성되어 구조를 이해하기 쉽다는 것이다.
이렇게 해서 당신은 Vue로 무엇을 더 개발하고 싶든지 간에 튼튼한 출발점이 생겼다.js!나는 이것이 Vue였으면 좋겠다.js 강좌는 매우 도움이 된다.
기사 최초 발표