Nuxt - 하이브리드 Vue 프레임워크 - https://v3.nuxtjs.org/
Capacitor - Capacitor를 기존 웹 프로젝트, 프레임워크 또는 라이브러리에 놓습니다. 기존 React, Svelte, Vue(또는 선호하는 웹 프레임워크) 프로젝트를 네이티브 모바일로 변환합니다. - https://capacitorjs.com/





이것은 nuxt3 및 Ionic Capacitor를 사용하여 모바일 애플리케이션 구축을 시작하는 방법에 대한 연습입니다. 이 비디오에서는 기본 프로젝트를 만든 다음 Ionic VS Code Extension을 사용하여 모바일 장치에 애플리케이션을 배포할 수 있도록 IOS 및 Android 라이브러리를 추가합니다.

Nuxt3 설치

매우 간단합니다. 아래 나열된 가이드를 따르기만 하면 됩니다.

Nuxt 3 - Quick Start (nuxtjs.org)

npx nuxi init nuxt-app
cd nuxt app
npm install

이온 커패시터로 실행

이온 커패시터로 앱을 실행하려면 nuxt 구성을 변경해야 합니다.

ssr에서 false를 nuxt.config.ts로 설정하도록 구성 변경

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  ssr : false,
  css: [
    // add required css:
  ]
})

장치에서 Capacitor를 설치하고 앱을 실행하기 위해 Visual Studio Code Ionic Extension을 사용할 것입니다.
Capacitor는 웹 사이트를 컨테이너에 래핑하고 API 및 플러그인을 통해 기본 장치 기능에 대한 액세스를 제공하는 방식으로 작동합니다.

확장 기능을 사용하여 커패시터 추가

Click Add Capacitor Integration

빌드 시 Nuxt가 디렉토리.output에 출력되므로 다음과 같이 변경해야 합니다.

capacitor.config.json에서 webDir 디렉토리를 변경합니다.

"webDir": ".output/public",

package.json의 스크립트 변경

"ionic:build": "npm run build", // capacitor extension adds this form you
"ionic:serve": "npm run start"

장치에서 실행

장치에서 실행하려면 Ionic Extension을 사용할 수도 있습니다. "Recommendations(권장 사항)"에서 "IOS 프로젝트 추가"또는 "Android 프로젝트 추가"를 클릭하여 사용하려는 플랫폼을 선택하기만 하면 됩니다.



특정 프로젝트를 추가한 후 확장 프로그램에서 옵션을 선택하여 실행할 수 있습니다.

장치에서 실행 중인 문제

ionic 확장 프로그램에서 오류가 발생하여 초기에 모든 것을 실행하는 데 문제가 있었습니다. package.json 파일에 name 및 version 속성이 누락된 것이 마음에 들지 않았습니다. package.json에 추가한 후 확장 프로그램이 빌드 스크립트를 실행하고 장치에 배포할 수 있습니다

.

소스 코드

아론크사운더스 / 이온 커패시터-nuxt-비디오-앱

이온 커패시터 VueJS Nuxt3 스타터 템플릿

이온 커패시터 VueJS Nuxt3 스타터 템플릿

블로그 게시물:

비디오: https://youtu.be/tDYPZvjVTcc

자세한 내용은 nuxt 3 documentation을 참조하십시오.

설정

종속 항목을 설치해야 합니다.

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install --shamefully-hoist

개발 서버

http://localhost:3000에서 개발 서버 시작

npm run dev

생산

프로덕션용 애플리케이션 빌드:

npm run build

프로덕션 빌드를 로컬에서 미리 보기:

npm run preview

자세한 내용은 deployment documentation을 확인하십시오.


View on GitHub


www.clearlyinnovative.com