Laravel Mix를 사용하여 Vue 3 , Adonis JS 설정

반응형

a
Donis JS는 Laravel에 비해 몇 가지 이점이 있는 Laravel 유사 풀 스택 노드 JS 프레임워크 중 하나입니다. 제가 Adonis JS를 사용한 이유 중 하나는 일부 블록체인 프로젝트(Eth/Algo)가 자바스크립트 SDK만 제공했기 때문입니다. 물론 풀스택 프로젝트 내에서 프런트엔드(Vue/React JS)를 사용하여 블록체인 개발과 관련된 모든 작업을 처리할 수 있지만, 백엔드에서 해당 SDK를 전혀 지원하지 않으면 유연성이 떨어질 수 있습니다.

우리는 Adonis JS가 프런트엔드를 위한 엣지 템플링 엔진을 가지고 있다는 것을 알고 있습니다. 하지만 때때로, 사용.

내용 개요

• 아도니스
• Vue 3 설정

 

#1 아도니스

우선 아도니스 프로젝트를 설치하는 것부터 시작합시다. 이 예에서는 vue-integration이라는 새 프로젝트 폴더를 생성하겠습니다.

npm init adonis-ts-app@latest vue-integration

처음 설치할 때 몇 가지 질문이 표시되며 원하는 옵션을 선택할 수 있습니다.

 

그럼 라라벨 믹스에 필요한 패키지를 설치해야겠네요. 나중에 Laravel 믹스가 Vue 프로젝트를 컴파일하는 데 도움이 될 것입니다.

npm i adonis-mix-asset && npm i --save-dev laravel-mix

그 설치와 함께, 우리는 우리의 Adonis 프로젝트를 위한 웹 팩을 구성해야 합니다.

node ace invoke adonis-mix-asset

위의 명령 후에 webpack.mix.js가 루트 폴더에 생성됩니다. 열어서 수정해 봅시다.

 

웹 팩은 나중에 Vue 프로젝트의 시작점으로 리소스/vue/main.js를 살펴볼 예정입니다. 그런 다음 나중에 sass를 컴파일할 수 있도록 도와주는 등의 추가 옵션을 검색합니다.

그럼, 엣지 파일 밑에 스크립트를 넣어야겠네요. resources/views/index.edge 아래에 새 에지 파일을 만듭니다.

start/routes.ts에서 Adonis 경로를 업데이트합시다. 따라서 나중에 액세스하는 모든 엔드포인트 사용자는 Vue 앱으로 리디렉션됩니다.

좋아! 지금이 Vue 3 JS를 설정할 적기입니다.

#2 Vue 3 설정

 

Vue 프로젝트에 필요한 패키지부터 시작하겠습니다.

npm i vue@3.0.0 vue-router@next && npm i -D @vue/compiler-sfc sass sass-loader vue-loader@^16.8.3 autoprefixer postcss

이 예에서는 리소스/vue 디렉터리 아래에 Vue 앱과 관련된 모든 내용을 넣겠습니다. 결국에는 Vue 라우터, 구성 요소, 페이지를 갖게 될 것입니다.

Vue 3 설정을 위한 두 가지 중요한 구성 요소를 보여드리겠습니다: 라우터와 main.js 파일입니다. 나머지 Vue 구성 요소는 프런트 엔드 코드가 더 많기 때문에 다루지 않지만, 이 문서 아래의 Github에서 예를 볼 수 있습니다.

 

Vue 앱의 시작 지점으로 resource/vue/main.js 파일을 열거나 생성하겠습니다.

그런 다음 resources/vue/router/index.js 아래의 경로에 대해

다 됐다! 더 이상 어쩔 수 없다! Vue 앱을 컴파일하려면 Laravel 믹스가 필요합니다.

node ace mix:watch # Development
node ace mix:build # Production Build

 

그럼, 우리 웹 앱을 보기 위해 아도니스 서버를 시작합시다.

node ace serve --watch # Development
node ace build --production # Production Build

Voila, 이제 우리의 Adonis JS는 Laravel 믹스의 도움으로 Vue 3를 프런트 엔드로 제공합니다.

Vue 3은 Vue 2에 비해 성능이 크게 향상되었고, 그것이 제가 이 기사에서 Vue 3를 사용하는 이유입니다. 또한 Vue 3을 설정하는 것은 조금 까다롭기 때문에 다른 패키지 버전을 설치할 경우 컴파일 실패가 발생할 수 있습니다. 제 소포를 한 번 보세요.만약 당신이 당신의 Vue 3을 성공적으로 컴파일할 수 없다면, 당신의 참고를 위해 아래의 내 Github에 json.

 

자원.