thinkphp 통합 전단 비계 Vue-cli 의 튜 토리 얼 도해

본 고 는 주로 Thinkphp 에 백 스테이지 전단 비계 프레임 Vue-cli 를 어떻게 통합 하 는 지 소개 한다.
1.Vue-cli 를 Thinkphp 에 설치 합 니 다.
1.1.1 node 설치 여부 확인
터미널 에 npm 명령 을 입력 하 십시오.설치 되 어 있 지 않 으 면 명령 을 찾 지 못 했 음 을 알 립 니 다.

정확 한 자 세 는 다음 그림 과 같 습 니 다.node 의존 이 설치 되 어 있 음 을 설명 합 니 다.

1.1.2 설치 노드
node 홈 페이지 주소 로 다운로드 및 설치 절차 설치 node 설치 주소:  http://nodejs.cn/download/
주:vue-cli 비 계 를 설치 하려 면 현재 node 버 전이 v 4.0 이상 이 필요 합 니 다.
1.2 전역 설치 vue-cli
명령 행 실행:npm install -g vue-cli 플러스-g 는 전체 에 설치 되 어 있 으 며,설치 에 실패 할 수도 있 습 니 다.다음 그림:

설치 에 실패 한 것 은 권한 이 부족 하기 때 문 입 니 다.이 럴 때 sodo npm install-g vue-cli 를 사용 하여 관리자 권한 을 설치 하면 됩 니 다.첫 번 째 설 치 는 관리자 비밀 번 호 를 입력 해 야 합 니 다.

설치 완료 vue 버 전 확인 vue 설치 완료

1.3 Thinkphp 에 vue 1.3.1 을 설치 하고 vue-cli 를 설치 해 야 하 는 구체 적 인 경로 에 들 어 갑 니 다.제 프로젝트 디 렉 터 리 는 다음 과 같 습 니 다.

1.3.2 명령 실행:vue init webpack Mob(새 항목 이름/파일 이름)를 실행 하면 폴 더 가 자동 으로 초기 화 됩 니 다:Mob

1.3.3 다음 명령 을 각각 입력 하면 8080 포트 에서 웹 서 비 스 를 시작 합 니 다.


다음은 저희 가 방문 하 겠 습 니 다.http://localhost:8080 vue 의 환영 홈 페이지 가 나 옵 니 다.

경 로 를 관찰 하면 Hello World 구성 요 소 를 가리 키 고 보 여 주 는 것 을 발견 할 수 있 습 니 다.이것 은 vue-cli 비계 설치 가 완료 되 었 음 을 의미 합 니 다.

2.Thinkphp 배경 관리 시스템 에서 vue 사용
vue-cli 는 배경 관리 시스템 페이지 를 만 드 는 데 좋 은 방안 을 제공 합 니 다.phop 코드 와 잘 결합 하기 위해 vue-cli 의 입 구 를 모듈 구성 요소 로 밀봉 할 수 있 습 니 다.즉,우 리 는 항상 배경 관리 시스템 에서 구체 적 인 내용 관리 부분 입 니 다.다음은 구체 적 인 실현 절차 이다.
2.1 우선,우 리 는 admin 모듈 에 service 컨트롤 러 를 만 들 었 습 니 다.우 리 는 service 컨트롤 러 를 배경 관리 시스템 의 서비스 모듈 로 생각 합 니 다.이 컨트롤 러 에서 우 리 는 일련의 메뉴 모듈 을 만 들 고 같은 홈 페이지 로 이동 하여 인터페이스의 통일 을 실현 합 니 다.

2.2 service 의 입구 파일 index.html 를 작성 하고 포 장 된 vue 단일 페이지 를 도입 합 니 다.

2.3 router 의 index.js 에서 경로 설정

2.4 기본 vue 단일 페이지 에 포 장 된 페이지 파일 이름 에 해시 접 두 사 를 추가 하기 때문에 웹 팩.prod.conf.js 에서 설정 파일 을 수정 하여 해시 접 두 사 를 삭제 합 니 다.

2.5 터미널 에 npm run build 를 입력 하여 패키지 컴 파일 을 진행 합 니 다.이전에 플러그 인 eslint 를 추가 하여 코드 형식 검 사 를 진행 하 였 기 때문에 대량의 경고 가 발생 할 수 있 습 니 다.webpack.base.conf.js 에 eslint 의 검 사 를 숨 길 수 있 습 니 다.검사 전 제거:

프로필 수정:

다시 컴 파일 하면 경고 가 없습니다.
 
2.6 포장 이 완 료 된 후에 포장 폴 더 dist 에서 쓴 두 페이지 가 더 많은 것 을 발견 했다.

2.7 로 컬 에서 미리 보기 디 버 깅 을 하려 면 service 의 index.html 에서 현재 포 장 된 shopeList 와 inforList 단일 페이지 를 도입 해 야 합 니 다.

vuePage.html 에 js 추가
 
2.8 터미널 입력 npm run build 브 라 우 저 에서 열기  http://localhost/admin/service/infoList#/infoList    이때 의 페이지 구 조 는 이 렇 습 니 다.vue 단일 페이지 와 phop 페이지 가 완전히 결합 되 었 습 니 다.배경 관리 시스템 을 쓸 때 우 리 는 vue 단일 페이지 구역 에 관심 을 가지 면 됩 니 다.페이지 전환 과 단일 페이지 설정 은 phop 코드 에서 완성 하면 됩 니 다.

2.9 주요 vue 단일 페이지 의 작성 은 매번 npm run build 로 포장 하지 않 아 도 됩 니 다.vue 가 제공 하 는 8080 포트 만 사용 하면 vue 단일 페이지 를 직접 디 버 깅 할 수 있 습 니 다.브 라 우 저 에서 열 수 있 습 니 다.  http://localhost:8080/admin/service/infoList#/infoList  

3.결어
Vue-cli 는 현재 매우 유행 하 는 점진 적 인 전단 프레임 워 크 로 백 스테이지 관리 단일 페이지 에서 사용 하면 효율 을 높 일 수 있다.이러한 디자인 은 vue 의 한 페이지 를 thinkphp 의 결합 에서 완전히 벗 어 나 게 할 수 있 습 니 다.백 스테이지 프론트 엔 드 직원 들 은 thinkphp 에서 소량의 설정 만 하면 주요 작업 중심 을 vue 한 페이지 의 쓰기 와 유지 보수 위 에 놓 을 수 있 습 니 다.
위 에서 말씀 드 린 것 은 편집장 님 께 서 소개 해 주신 thinkphp 집성 전단 비계 Vue-cli 의 튜 토리 얼 도해 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!