VueJS와 케이크를 통합하는 모범 사례PHP 3

VueJS와 케이크를 통합하는 모범 사례PHP 3

나는 케이크 안에 Vue.js 프레임워크를 통합하는 가장 좋은 방법이 무엇인지 알고 싶다.PHP 3 응용 프로그램?

케이크 안에서 생성된 파일을 복사할 필요 없이 여전히 작업하면서 VueCLI(웹 팩, ect...)와 함께 제공되는 모든 도구에서 이익을 얻을 수 있는 방법이 있기를 바란다.PHP 응용 프로그램.

그렇다면 케이크를 사용하여 응용 프로그램을 개발하는 가장 능률적인 프로세스는 무엇인가?백엔드로서의 PHP 3과 동일한 프로젝트 내부의 프런트엔드로서의 Vue.js.

정말 고마워.

자, 여기 간단한 설정:

1) webroot/veedev와 같은 webroot 하위 dir에 vuejs 설치)

2) 기록 모드를 사용하도록 vue 라우터 구성:

export default new Router({
  mode:'history',
  routes: [

3) 자산 변경빌드 존의 PublicPath는assetsPublicPath: '',webroot/veedev/config/index.js로

4) 개발 모드에서 앱은 localhost:8080에서 실행 중이고, ajax는 your-domain을 호출하기 때문이다.코르스 문제가 있을 것이다.아약스 호출에 머리글 추가:

axios.get(url,{headers: {"Access-Control-Allow-Origin": "*"}}).then...

ajax 호출에 접두사 "api"를 사용하십시오. your-domain.xxx/api/controller/action...

5) 케이크의 경로 변경REST api 를 구성/루트에서 사용하는 PHP.php :

// add api prefix

Router::prefix('api', function ($routes) {
    $routes->fallbacks(DashedRoute::class);
});

// change default route :

Router::scope('/', function (RouteBuilder $routes) {

    $routes->connect('/:page',['controller'=>'Pages','action'=>'display']); 

    $routes->connect('/', ['controller' => 'Pages', 'action' => 'display', 'home']);
    $routes->connect('/pages/*', ['controller' => 'Pages', 'action' => 'display']);
    $routes->fallbacks(DashedRoute::class);
});

아약스 콜닷컴은 정상적으로 진행될 것이다.your-domain.com/xxx으로 걸려오는 모든 통화는 통제관 페이지, 행동 디스플레이로 전송될 것이다.

6) webroot/veedev의 index.html 콘텐츠를 템플릿 홈(src/Template/Pages/home.ctp)에 복사하고 컨트롤러의 표시 작업에 추가하십시오.

$this->viewBuilder()->setLayout(false); 

7) 생산용 : 제조공정을 개시한다.

npm run build. 

webroot/veedev/dist/static을 webroot/static에 복사

webroot/veedev/dist/index.html의 내용을 src/Template/Pages/home.ctp에 복사하십시오.

특정 페이지를 수동으로 호출하거나 브라우저를 새로 고치면(즉, your-domain.xxx/Products) 페이지 컨트롤러가 index.properties를 전송한다.라우터에 의해 사용될 스크립트 태그의 글로벌 바에서 te paramer :page를 템플릿/Pages/home.ctp에 추가할 수 있다.

<script>var routeToJump=<?php echo $yourvar;?>; </script>

그리고 당신의 앱.vue :

export default {
  name: 'App',
  created() {
    this.$router.push(routeToJump);
    ...

크기와 로딩 시간에는 신경 쓰지 않는 것 외에는 파일을 복사하지 않고는 빠져나가지 못할 것이다.webroot/j에 모든 것을 넣은 다음 보기에 필요한 모든 파일을 로드하면 된다.Vue는 JS, just JS, nothing 더 이상.또한 자동적으로 일어나는 대처가 왜 나쁜지 모르겠다.

IMO JS 앱은 빌드스크립트에 의해 어떻게든 붙여진 거대한 난장판이다.

최적화된 빌드를 원하는 경우 npm과 웹 팩을 사용하고 웹 팩을 구성하여 Vue 앱을 빌드하고 웹 루트를 대상 폴더로 정의하십시오.웹 팩은 당신이 파일을 자동 분할할 수 있게 해주고 파일이 커지면 당신에게 경고를 줄 것이다.

우리는 모든 프런트 엔드 제품을 /resource/js 및 /scss 등에 넣고 빌드하고 핫 재로드 기능을 활성화하여 저장 후 바로 변화를 볼 수 있다.이것은 단지 발전을 위한 것이다.JS가 라이브 시스템에 구축되는 라이브 시스템에 배포할 때, 우리는 이 빌드를 git 저장소에 추가하지 않는다.

하지만 100% 순수 JS 프런트엔드 앱을 고수하지 않으면 프런트엔드용 JS 앱의 '구축'은 골칫거리다.그것을 하는 진짜 표준적인 방법은 없다.심지어 '수입'도 그 기발함을 가지고 있고, 좋은 해결책이라기보다는 해킹에 가까운 느낌이며, 요청과 파일 크기를 줄이기 위한 포장 파일 문제를 해결하지도 않는다.

일단 모든 쓰레기들을 한데 묶으면 대개 잘 작동하지만 2018년에는 웹앱을 위한 JS를 만드는 데 권장되는 표준이 없다는 것이 정말 슬프다.나는 오늘 일이 어떻게 되어가는지가 웹 어셈블리에 유리하게 곧 죽기를 정말 바란다.

만약 당신이 웹팩을 사용하고 싶지 않다면, 요구 사항도 있다.js와 다른 것들도 있지만, 우리에게는 웹팩이 가장 잘 작동했다.

다음은 내가 수행한 단계들이다.

1. 기본 앱 디렉터리 내의 vuej를 사용하여 프로젝트를 생성하십시오.

2. vue 라우터, vuex 등과 같은 플러그인을 추가하십시오.

   vue create bos-vue
   vue add vuex
   vue add router
   

3. 다음 명령을 사용하여 앱을 실행할 수 있다.

   npm run serve

4. 프로젝트에 필요한 노드 모듈 설치:

   npm install --xios vue-flossos 저장

5. 케익프 서버로부터 모든 데이터는 json 형식의 axios 요청을 통해 얻을 것이다.

   axios.get(http://localhost/cakeapp/articles/getdata)

6. 위의 통화는 코르스 문제를 다룰 것이다.개발 중인 CORS 문제를 해결하려면:

애플리케이션에서 .htaccess, Apache의 헤더 모듈 사용, CSRF 미들웨어 디스블링에 헤더 추가.php

7. 인증을 위해 kakephp 서버에 로그인을 요청하고 사용자 정보를 로컬 저장소에 저장하십시오(앞쪽 끝에서 추가 사용).항법 가드를 사용하여 각 공리 호출 응답에 세션이 있는지 확인하십시오.

8. 배포의 경우 다음을 실행하십시오.npm run build

9. dist 디렉토리의 모든 항목(index.html 제외)을 webroot로 복사하십시오.default.ctp에서 index.html 복사

이제 모든 것이 평상시처럼 케이크 조각으로 진행될 것이다.

참조URL: https://stackoverflow.com/questions/50629837/best-practice-to-integrate-vuejs-with-cakephp-3