Nuxt - 하이브리드 Vue 프레임워크 - https://v3.nuxtjs.org/
Ionic Framework - 고품질의 크로스 플랫폼 네이티브 및 웹 앱 경험을 구축하기 위한 오픈 소스 모바일 툴킷입니다. JavaScript 및 웹을 사용하여 어디에서나 실행되는 단일 코드 기반으로 더 빠르게 이동하십시오. https://ionicframework.com/
Capacitor - Capacitor를 기존 웹 프로젝트, 프레임워크 또는 라이브러리에 놓습니다. 기존 React, Svelte, Vue(또는 선호하는 웹 프레임워크) 프로젝트를 네이티브 모바일로 변환합니다. - https://capacitorjs.com/

이온 및 이온 코어 설치

npm install @ionic/core @ionic/vue

스타일 추가

Ionic에 필요한 CSS 파일을 포함하도록 nuxt.config.ts를 업데이트합니다.

import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
    ssr: false,
    css: [
        '@ionic/core/css/core.css',
        '@ionic/core/css/normalize.css',
        '@ionic/core/css/structure.css',
        '@ionic/core/css/typography.css',
        '@ionic/core/css/ionic.bundle.css',
    ]
})

Ionic Framework Vue 플러그인 추가

프로젝트의 루트에 plugins라는 새 디렉터리를 만들고 파일ionic.js을 만들고 다음 코드를 추가합니다. 이 코드는 vue 앱에 IonicVue 플러그인을 설치합니다.

import { IonicVue } from "@ionic/vue";
export default defineNuxtPlugin((nuxtApp) => {
  // Doing something with nuxtApp
  nuxtApp.vueApp.use(IonicVue);
});

Ionic Framework용 NuxtJS 레이아웃 만들기

응용 프로그램은 IonApp 구성 요소에 래핑되어야 하며 라우터가 없으므로 응용 프로그램의 모든 페이지를 래핑할 레이아웃을 생성해야 합니다.
Layouts라는 프로젝트의 루트에 새 디렉토리를 만들고 새 파일ionicapp.vue을 추가합니다. 새 파일에 다음 코드를 추가합니다.

<template>
  <IonApp >
    <!-- page content will appear here -->
    <slot />
  </IonApp>
</template>

<script setup>
import { IonApp } from "@ionic/vue"
useHead({
  viewport: 'width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover',
})
</script>

모든 페이지를 래핑하고 메타 태그도 설정합니다. 애플리케이션의 뷰포트

응용 프로그램의 루트에서 레이아웃 사용

생성한 새ionicapp.vue 레이아웃을 사용하도록 프로젝트의 루트에 app.vue 파일을 생성/업데이트합니다.

<template>
    <NuxtLayout name="ionicapp">
        <NuxtPage />
    </NuxtLayout>
</template>

앱에 이온 구성 요소 추가

일부 Ionic Framework Vue 특정 구성 요소를 애플리케이션에 추가합니다. 먼저 index.vue 페이지를 업데이트합니다.

<template>
  <IonPage>
    <IonHeader :translucent="true">
      <IonToolbar>
        <IonTitle>Home</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent class="ion-padding">
      <h1>WELCOME HOME on IOS AND ANDROID</h1>
      <IonButton @click="router.push('/about')">
        Goto About Page
      </IonButton>
    </IonContent>
  </IonPage>
</template>
<script setup lang="ts">
import {
  IonPage,
  IonHeader,
  IonTitle,
  IonToolbar,
  IonContent,
  IonButton
} from "@ionic/vue"
const router = useRouter();
</script>

이제 about.vue 페이지

<template>
  <IonPage>
    <IonHeader :translucent="true">
      <IonToolbar>
        <IonTitle>Home</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent class="ion-padding">
      <h1>This is the about page</h1>
      <IonButton @click="router.back()">
        Go Home
      </IonButton>
    </IonContent>
  </IonPage>
</template>
<script setup lang="ts">
import {
  IonPage,
  IonHeader,
  IonTitle,
  IonToolbar,
  IonContent,
  IonButton
} from "@ionic/vue"
const router = useRouter();
</script>

소스 코드

분기 확인part 2

아론크사운더스 / 이온 커패시터-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