초보자 개발자를위한 Vue.js 튜토리얼 : 기본 사항 배우기 및이 초보자 용 Vue 구조 사용

초보자 개발자를위한 Vue.js 튜토리얼


개발 과정에서 새로운 기술을 사용할 때마다 약간의 위협이 느껴질 수 있습니다. 특히 야생에 무수한 npm 패키지가있을 때. 사물을 혼합하고 일치시키는 데 많은 시간과 노력이 소요될 수 있으며 대개 실망합니다.. 초보자 개발자를위한 다음 Vue.js 튜토리얼이 시작됩니다..

Vue.js은 (는) 무엇 이죠? 왜 걱정해야합니까?

Vue.js 또는 Vue for short는 사용자 인터페이스를 구축하기위한 JavaScript 프레임 워크입니다. Angular 또는 React와 같은 다른 프레임 워크와 비교하여 Vue는 접근하기 쉽고 학습 곡선이 가파르 지 않습니다..

Vue는 모듈 식이므로 코드를 재사용 가능한 구성 요소로 나눌 수 있습니다. 각각 고유 한 HTML 마크 업, CSS 및 JavaScript 코드가 있습니다..

이 Vue.js 튜토리얼의 범위는 무엇입니까?

이 짧은 Vue.js 튜토리얼의 목적은 Vue를 빌드하고 실험 할 수있는 스캐 폴딩을 제공하는 것입니다. WordPress 대시 보드에서 Vue 앱의 기본 설정을 살펴 보겠습니다..

(참고; 우리는이 가이드에서 Vue 자체를 가르치지 않을 것입니다. 그러나 계속해서 프레임 워크에 대해 더 배울 수 있습니다. 공식 가이드 여기에서 프로젝트를 설정 한 후 – 완료된 후에도 계속 실험 할 수 있습니다. 또한 개발 프로세스를보다 효율적으로 만드는 가장 흥미로운 Vue UI 구성 요소 라이브러리를 권장합니다.)

우리가 할 일은 Vue를 사용하여 WordPress 플러그인을 위해 사전 정의 된 템플릿을 사용하는 것입니다. 더 자세히 보려면 ​​다음 GitHub 리포지토리에서 찾을 수 있습니다. https://github.com/abaicus/vue-wp-bootstrap.

Vue.js 튜토리얼 : 전제 조건

이 안내서를 계속 따르기 위해 컴퓨터에 이미 설정해야 할 것이 몇 가지 있습니다.

먼저, LAMP 스택이 필요합니다. Windows 또는 Mac에서 XAMPP를 사용하거나 Mac에서 Flywheel을 사용하여 Local을 사용한 다음 새로운 로컬 WordPress 설치를 설정할 수 있습니다.

당신이 가지고 있는지 확인하십시오 NodeJS 패키지 관리자 (npm) 시스템에 설치되었습니다. 또한 터미널을 통해 Vue CLI 및 Vue 템플릿 초기화 도구라는 두 개의 패키지를 더 설치해야합니다. 이렇게 :

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

이 두 가지 종속성을 설치 한 후에는 활성 디렉토리를 로컬 WordPress 인스턴스의 wp-content / plugins 디렉토리로 변경 한 후 다음 명령을 실행해야합니다.

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

다음으로 프로젝트 설정과 관련된 몇 가지 질문에 대답하라는 메시지가 표시됩니다..

빌드 프롬프트에서 지금 당장 첫 번째 옵션을 선택하십시오. "런타임 + 컴파일러 : 대부분의 사용자에게 권장".

원하는 경우 ESLint 린터를 활성화 할 수 있습니다. 프로젝트에서 보푸라기 오류를 감지하지만 지금 당장 걱정할 필요는 없습니다..

Commit Lint 및 Pre-Commit Hooks는 커밋 메시지와 코드를 확인하여 GitHub에 커밋을 보내기 전에 모든 것을 깔끔하고 깔끔하게 유지합니다..

완료되면 다음과 같이 다소 비슷해 보이는 터미널이 생깁니다.

화면의 지시 사항을 따르십시오. 디렉토리를 새로 생성 된 플러그인 디렉토리로 변경하고 터미널 프롬프트에 표시된 명령을 실행하십시오. 그러면 응용 프로그램이 시작되어 코드 내부의 변경 사항을 기다리며 Vue 코드를 JavaScript로 변환합니다..

무엇을합니까?

별로. 이것은 백엔드의 일부 데이터를 표시하는 기본 응용 프로그램입니다. 후드 아래에 Vue가별로 없습니다. 플러그인 대시 보드 페이지로 이동하여 활성화 할 수 있습니다. 관리자 메뉴에 새 페이지가 추가됩니다. 탐색하면 두 개의 문자열이있는 대시 보드 페이지가 나타납니다.

플러그인 스캐 폴딩 구조

새로 생성 된 플러그인의 파일 구조를 살펴 보겠습니다. 이 Vue.js 튜토리얼에서 대부분의 구성 파일을 무시하여 응용 프로그램의 구조에 집중할 수 있습니다.

먼저, 실제 플러그인의 진입 점 인 plugin.php 파일이 있습니다. 여기, 우리는 주요 플러그인 수업. 응용 프로그램의 주요 구성 요소가 포함되어 실행되는 곳.

다음으로, 모든 의존성과 다른 많은 프로젝트 정보가 정의 된 package.json 파일이 있습니다. 관심을 가질 수있는 부분은 "스크립트" 들. 여기에는 npm run 접두사로 실행할 수있는 모든 명령이 있습니다. 현재 중요한 것은 npm run dev (개발 용 애플리케이션을 빌드 함)와 npm run build (제작을 위해 앱을 배포 할 준비가되면 실행해야 함) 여야합니다. 다른 명령은이 두 명령에 인접 해 있거나 지금 걱정할 필요가없는 다른 작업을 수행합니다..

포함 디렉토리 안에는 세 개의 파일이 있습니다.

  • rest.php 클래스는 현재 아무 것도하지 않지만 RestAPI 경로를 추가 할 수있는 구조를 이미 가지고 있습니다
  • assets.php 클래스는 스타일과 스크립트 대기열을 처리합니다. 여기서 JavaScript 파일은 PHP에서 Vue 앱으로 시작 데이터를 전달하도록 현지화되었습니다. 현재 두 개의 문자 만 보내지 만 원하는 것을 포함 할 수 있습니다.
  • admin.php 파일은 대시 보드에 새 페이지를 추가하고 실제 플러그인 페이지를 렌더링하는 파일입니다. plugin_page () 함수 내에서 앱 자체가 두 개의 빈 태그로 렌더링되는 것을 알 수 있습니다. JavaScript는 애플리케이션이로드 된 후 실제 렌더링을 처리하기 때문입니다..

자산 디렉토리 내부에는 다음과 같은 4 개의 디렉토리가 더 있습니다.

  • src 디렉토리 – Vue 앱의 소스 파일. 나중에 이야기하겠습니다..
  • scss 디렉토리 – CSS 스타일 시트를 생성하는 SCSS 스타일 파일.
  • js 디렉토리 – src 디렉토리의 파일에서 생성 된 변환 된 코드.
  • css 디렉토리 – SCSS 파일에서 컴파일 된 스타일.

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

이 디렉토리에는 main.js와 App.vue라는 두 개의 파일이 있습니다. main.js 파일은 애플리케이션의 진입 점입니다. Vue 앱 구성 요소를 해당 ID로 DOM 요소에 연결합니다..

/ * jshint 전환 : 6 * /
‘vue’에서 Vue 가져 오기
‘./App.vue’에서 앱 가져 오기

window.addEventListener ( ‘로드’, 함수 () {
new Vue ({// eslint-disable-line no-new
el : ‘# mvdp-app’,
구성 요소 : {App},
렌더 : (h) => h (앱)
})
})

실제 애플리케이션 마크 업은 App.vue 템플릿 내에 있습니다.

/ * jshint 전환 : 6 * /

{{this.strings.title}}

{{this.strings.description}}

/ * 글로벌 MVDP * /
수출 기본 {
데이터 () {
{
문자열 : MVDP.strings
}
},
이름 : ‘App.vue’
}

위의 스 니펫 내부에서 Assets 클래스에서 현지화 된 문자열을 사용하고 있음을 알 수 있습니다. Vue의 가장 큰 특징 중 하나는 구성 요소의 코드가 템플릿, 스크립트 및 스타일로 깔끔하게 구성되어 구조를 쉽게 이해할 수 있다는 것입니다..

이제 Vue.js로 더 발전시키고 싶은 모든 것을위한 확실한 출발점이되었습니다! 이 Vue.js 튜토리얼이 도움이 되었기를 바랍니다..

WordPress 사이트 속도를 높이기위한 충돌 과정에 참여하는 것을 잊지 마십시오. 몇 가지 간단한 수정으로로드 시간을 50-80 % 줄일 수 있습니다.

Karol K의 레이아웃, 프리젠 테이션 및 편집.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map