MonacaでVue＋Typescriptのプロジェクトを動かしてみる

Monacaにはテンプレートが多数用意されているが、Vue.js＋Javascriptしか見当たらなかったので、Typescript化してみた。


# Vueプロジェクトの作成
## Vue-cliのインストール
```
npm install -g @vue/cli
```

## Vueプロジェクトの作成
```
vue create test
```
- 手動で機能を選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/ba35e0e0-5686-d194-805d-1a614dd3a850.png)

- 必要な機能を聞かれるため、「Typescript」にチェック（その他、必要に応じてチェック）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/84ebfbe8-4bb2-7213-2969-d4682602163b.png)

- その他の項目は、こんな感じで設定してます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/a4d2e406-2fa5-a815-79c4-f6c8da1fcc88.png)


# Monacaの設定
【前提】
- monaca-cliインストール済み
- 「monaca login」実行済み

## Monaca初期設定
作成したVueプロジェクト内で以下のコマンドを実行

```
monaca init
```
- 色々聞かれるが、以下のように設定
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/12b9e401-16ef-62d7-1da0-b83dc6617af3.png)
※コマンドプロンプトだとmonacaコマンドが動かないことが多々あるため、GitBashで実行してます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/e18bba5c-f3b3-4150-710c-c8e886221d87.png)
　（monaca-cliバージョン：3.1.0）


## package.jsonを修正

```package.json
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build --dest www --no-clean",
        "lint": "vue-cli-service lint",
        "monaca:preview": "npm run build & npm run dev",
        "monaca:transpile": "npm run build",
        "monaca:debug": "npm run watch",
        "dev": "browser-sync start -s www/ --watch --port 8080 --ui-port 8081"
    },
    "devDependencies": {
        ・・・
        "browser-sync": "^2.24.5",
        ・・・
    }
```
- 空のフォルダで「monaca init」した際のpackage.jsonから必要なものをマージ。
    - ポイントはscriptsのbuildで出力先をwwwに変更
        - wwwにある内容をビルドするため、ここに出力する必要がある
        - また、manifestファイルなどを消さないないように「--no-clean」を付与  
　　　
- browser-syncは「npm install --save-dev browser-sync」でOK

## ローカルでプレビューしてみる
```
npm run monaca:preview
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/66a970b5-b09a-a17f-3228-33439dc4d7e1.png)

## クラウドにアップロード
```
monaca upload
```
- 以下のように設定

![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/7fc74a3f-e664-2e67-f0a5-bb6e58a729c5.png)

- ダッシュボードにプロジェクトが追加されている
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/479dc757-52d9-e7f6-7d99-d5c674a59d31.png)

## クラウドIDEで開いてみる

- プレビューされない。。。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/9ce50ca2-8974-ce7d-a69a-2e53833b61b9.png)

 ※まだビルド中でした
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/93657ea8-72c7-5885-d4a4-459d0c716dbe.png)

- ちゃんとクラウドIDE上のプレビューでも確認できました！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/325108/32e92032-2c0e-f673-d292-ac6e88edbd0b.png)


# 実機で動かない．．．
Android版のデバッグビルドして実機にインストールしてみたが、アプリが動かなかった。。。
⇒原因および解決策が分かり次第、追記しようと思います。

(2019/08/19追記)

@v97ug さんから情報提供いただきました！ありがとうございます！！

```vue.config.js
module.exports = {
    baseUrl: './'
}
```

デバッグする際は以下のように設定する

```package.json
"scripts": {
    "monaca:preview": "vue-cli-service serve & vue-cli-service build --dest www --no-clean --watch",
    "monaca:transpile": "vue-cli-service build --dest www --no-clean",
    "monaca:debug": "vue-cli-service build --dest www --no-clean --watch"
}
```

[こちら](https://docs.monaca.io/ja/products_guide/migration/vue_migration/)に載っています