vue 3 + framework7 + cordova 환경변수 설정

 vue 생성  - framework7 npm으로 설치 후 셋팅 ,  vue add vue add cordova 해보기 

1. vue 생성

- cmd / 터미널에 vue create 파일명 작성 후 엔터를 누르면 사진처럼 나오게 됩니다 

저는 Manually select features를 선택 하였고 

Babel(바벨은 자바스크립트 컴파일러로 최신버전의 자바스크립트 문법을 브라우저가 이해하지 못 하기 때문에 브라우저가 이해할 수 있는 문법으로 변환해주는 라이브러리)과

TypeScript(자바스크립트에 타입을 지정해주는 라이브러리),

Router(웹 페이지간의 이동 방법을 편리하게 해주는 라이브러리),

Vuex(vue의 컴포넌트들을 효율적으로 관리 할 수 있게해주는 상태관리 라이브러리),

Linter / Formatter (각 규정에 맞춰 에러가 있으면 코드에 표시를 해주는 라이브러리)를 선택 해주었습니다.

그리고 엔터를 입력 하면 

Vue 버전 선택과 (저는 vue3인 3을 선택 했습니다)

컴포넌트 문법을 class 형식으로 적용 할  것인가? Yes

바벨과 타입스크립트를 함께 사용 할 것인가? Yes

history 모드 라우터 yes

Pick a linter / formatter config : standard 

Pci additional lint features: Lint on save 

Where do you prefer placing config for Bable. ESLint, etc? Im package.json

Save this as a preset for future projects? No 

를 선택 하였습니다! 

이렇게 하면 vue 3 는 설치가 완료 되었어용 이제는 framework7을 설치 하는 방법을 알려드리겠습니다!

 

2. framework7 설정하기 

https://framework7.io/

Framework7 - Full Featured Framework For Building iOS, Android & Desktop Apps

홈페이지에 처음 들어가면 Get Started를 눌러주시고 

- 방금 생성한 vue 파일에 (터미널/vscode 등 어디든 상관없이)  npm i framework7-cli cordova -g 을 입력 해주세요!

- 설치가 끝이 나면 (https://framework7.io/vue/installation) npm install framework7-vue와 npm install framework7 를 입력해서 설치 해주세요 

 

- package.json에 framework7과 framework7-vue 버전을     "framework7": "^6.3.16",  "framework7-vue": "^6.3.16", 버전

으로 변경 해주세요!

 "framework7": "^6.3.16",
 "framework7-vue": "^6.3.16",

- 그후 tsconfig.json에 들어가서 exclude 아래에 "typeRoots": ["./node_modules/@types"]를 넣어주세요 

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",

    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,

    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ],
  "typeRoots": ["./node_modules/@types"]
}

- .eslintrc 파일을 만들어주신 다음 아래에 내용을 넣어주세요!

{
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "ecmaVersion": 2020,
        "sourceType": "module",
        "parser": {
           "js": "espree",
           "ts": "@typescript-eslint/parser",
           "<template>": "espree"
       }
    },
    "plugins": [
        "@typescript-eslint" 
    ],
    "rules":{
        "vue/no-unused-components" : "off",
        "vue/no-deprecated-slot-attribute": "off",
        "vue/no-unused-vars": "off"
    }
    
}

e- 마지막으로 main.ts 내용을 아래처럼 바꿔주세요

import { createApp } from 'vue';
import router from './router';

// Import F7 Bundle
import Framework7 from 'framework7';

// Import F7-Vue Plugin Bundle (with all F7 components registered)
import Framework7Vue, { registerComponents } from 'framework7-vue/bundle';

import 'framework7/framework7-bundle.min.css';

// Init F7-Vue Plugin
Framework7.use(Framework7Vue);

import App from './App.vue';

const app = createApp(App)

// Init plugin and register all components
registerComponents(app);

app.mount("#app");

- package-lock.json 과 node_modules을 삭제해주시고 npm i로 다시 설치해 주세요 

fraemwork7 설정은 이렇게 끝이 납니다! 마지막으로 cordova 설정을 해보도록 할게요 ~ 

 

3. cordova 설정하기

- 안드로이드 스튜디오를 설치 한 뒤 SDK를 하단의 이미지처럼 설정을 해주세요 

SDK와 DviceManager는 안드로이드 스튜디오 앱을 실행하면 오른쪽 상단에 빨간 네모표시를 클릭하면 됩니다!

- 그 후 DviceManager에 들어가서 create device를 클릭 해주세요 

- 저는 Pixel 5를 선택하였고 코르도바 호환 버전에 맞춰 API 32를 설정해 주었습니다.

 

- vue 파일에 (터미널/cmd/vscode 등 어디든 상관없이) npm install -g cordova 를 한 뒤 vue add cordova 를 해주세요! 

- vue add cordova 실행 시 -

- Still proceed? (y/N)  y를 치고 엔터를 눌러주세요 

- Name of folder where cordova should be installed (cordova 폴더의 이름을 지정해주세요) 저는 default 인 src-cordova를 선택 하였습니다!

- ID of the app (실제 앱 이름을 지정해주는 곳 입니다. 예: com.회사명.앱이름.앱이름) 펻 

- Name of the app(스마트폰에서 보여질 앱 이름을 지정해주는 곳 입니다.) 

- Select Platforms (플랫폼을 선택하는 곳 ) 저는 android와 ios를 설정 했습니다!

Checking Java JDK and Android SDK versions
ANDROID_SDK_ROOT=undefined (recommended setting)
ANDROID_HOME=undefined (DEPRECATED)
Using Android SDK: /Users/imgwanhyeog/Library/Android/sdk
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle 
in your path, or install Android Studio
 INFO  executing "cordova run android" in folder /Users/imgwanhyeog/Documents/Dev/vue-cordova-fraemwork/src-cordova
 INFO  updating /Users/imgwanhyeog/Documents/Dev/vue-cordova-fraemwork/src-cordova/platforms/android/app/src/main/res/xml/config.xml content to https://192.168.21.62:8080

- npm run vue server cordova 를 하니 위에 오류가 났네요 확인해 보니 Gradle 환경변수 설정이 안 되어 있어서 그렇습니다 그리고 SDK 환경변수 설정도 해줘야 해요 undefined가 아닌 SDK 파일 위치를 지정해 줘야 합니다! 

- 저는 안드로이드 스튜디오를 설치 해주었지만 그래들 문제로 인하여 따로 그래들 홈페이지에 가서 설치를 해주었습니다 ! (https://gradle.org/releases/설치한 링크 ) 저는 7.1.1로 설치를 해주었습니다! 코르도바 홈페이지에 가면 현재 그래들 몇과 호환되는지 나와 있습니다! 그거보고 설정해 주면 됩니다 저는 7.1.1이 호환이 된다고 해서 그렇게 설정해 주었어요 ~ (https://cordova.apache.org/docs/en/9.x/guide/cli/index.html 코르도바 홈페이지) 그리고 그래들 설정하는 방법도 링크로 남겨드리겠습니다! (https://gradle.org/install/ 그래들 설정하는 방법)

 

- 그래들을 설치 하고 자신이 원하는 위치에 옮겨주세요 그리고 나서 bash_profile 혹은 zshrc에 export PATH=$PATH:/Users/imgwanhyeog/Library/gradle-7.1.1/bin 라고 입력해주셔야 합니다 ~ 

 

- 오류 중간에 보면 Using Android SDK 위치를 알려주고 있네요! 저는 맥을 쓰고 있어서 터미널을 열고 ls -a을 입력 한 뒤 bash_profile 혹은 zshrc가 있는지 찾아주세요 (만약 둘 다 있다면 둘다 똑같이 설정 해주시면 됩니다! 저는 둘다 있네요)

-다시 open .bash_profile 을 치고 아래처럼 입력 해주세요

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_333.jdk/Contents/Home

export ANDROID_HOME=/Users/imgwanhyeog/Library/Android/sdk
export ANDROID_SDK_ROOT=/Users/imgwanhyeog/Library/Android/sdk

export PATH=$PATH:/Development/android-sdk/platform-tools:/Development/android-sdk/tools
export PATH=$PATH:/Users/imgwanhyeog/Library/gradle-7.1.1/bin

- 그 후 command + s 로 저장한 뒤 command + q 로 창을 닫아주고 터미널에 source ~/.bash_profile을 입력해서 터미널도 저장시켜 주세요 

- 저는 zshrc도 설정이 되어 있어서 여기에도 설정을 해줬습니다. 설정 방법은 똑같이  open .zshrc 를 입력 한 뒤 bash에 작성 한것과 똑같이 작성한 뒤  command + s 로 저장한 뒤 command + q 로 창을 닫아주고 source ~/.zshrc 로 터미널도 저장 해주세요! 그리고 커맨드를 종료했다 켜주세요 ~ 

- (추가사항: 윈도우로 설정을 하면서 JDK 환경설정도 해줘야 합니다! https://hymndev.tistory.com/5 이분이 잘 설명하셔서 링크 달아둡니다! )

 

- 참고사항: 혹시라도 Unable to make field private final java.lang.String java.io.File.path accessible: module java.base does not "opens java.io" to unnamed module @fb04536 이런 오류가 생긴다면 cordova 공신문서에 가서 자바 버전을 확인해서 맞춰주세요 지금 날짜 기준으로 저는 자바 8로 변경하여 맞춰주니 잘 실행 되었습니다.

 

- 환경변수 설정은 모두 끝이 났습니다! 이제 vue add cordova를 설치하면서 생성이 된 src-cordova를 안드로이드 스튜디오로 실행시켜준 뒤 Device Manager를 켜주세요

그리고 vscode로 가서 npm run cordova-serve-android를 해주시면 

vue3 - framework7 - cordova (anodroid) 환경변수 설정이 끝이 납니다! 

다음에는 ios 환경변수 설정 관련해서 올려보도록 하겠습니다 ~ 

 

참고했던 자료 

https://gradle.org/install/ (그래들 환경변수 설정 하는 곳)

Gradle | Installation

https://gradle.org/releases/ (그래들 설치하는 곳)

Gradle | Releases

https://github.com/m0dch3n/vue-cli-plugin-cordova#readme (코르도바 사용법)

https://www.ibm.com/docs/ko/mpf/8.0.0?topic=android-running-cordova-project-in-studio (안드로이드 스튜디오 코르도바 사용법)

https://bestofvue.com/repo/m0dch3n-vue-cli-plugin-cordova-vuejs-vue-cli-3-plugins (vue - cordova 플러그인)

https://esjdev.tistory.com/10 (맥 환경변수 설정 관련)

https://serasome.com/@VueJS/q4xykc6UjJ (코르도바 설정하는 방법 잘 작성해준 블로그 1)

https://nicgoon.tistory.com/188?category=326455 (코르도바 설정하는 방법 잘 작성해준 블로그 2)