cordovaとvueでアプリを作る（導入）

私はアプリのネイティブ開発が長く、クロスプラットフォームに関しては最近Flutterを勉強しています。ですがWebの知識だけで簡単にアプリを制作したいという社内需要もあり今回はそのための環境作成を備忘録として残しておきます。
個人的には今cordovaを新しく勉強するくらいならちょっと学習は必要ですけどFlutter/React Nativeのほうがよっぽど開発が楽です。特にホットロード。。

前提: macOS Catalina / node.js / Xcodeはインストール済み
（node.jsはこの方の記事がとても参考になります。）
https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09

Cordovaはクロスプラットフォームアプリの開発環境です。
Vue.jsは学習コストが低いWebフレームワークです。
「Webの知識はあるけど、アプリはちょっと、、」という方におすすめします。

(1) Vue CLIとcordovaをインストール

$ npm install @vue/cli -g
$ npm install cordova -g

(2) プロジェクトフォルダを作成(今回はhelloという名前)

$ cordova create hello
$ cd hello

この段階でcordovaアプリができました。

(3) エミュレーターで確認
(デバッグはbrowser環境で行うのが楽なので一緒に追加)

$ cordova platform add browser ios
$ cordova emulate ios

Xcodeがインストールされていればエミュレータが起動しcordovaアイコンの画面が表示されます。

(4) Vue.jsを入れる
(色々な設定ができますが、とりあえず簡単に確認でき後々楽な組み合わせにしました)

$ vue create .

? Generate project in current directory > Y
? Please pick preset
 > Manually select features
? Check the features needed for your project
 > Babel
 > Router
 > Vuex
 > Linter / Formatter
? Use history mode for router > n
? Pick a linter / fomatter config > ESLint with error prevention only
? Pick additional lint features > Lint on save
? Where do you prefer placing config for ... > In dediated config files
? Save this as a preset for future projects > N

(5) 設定ファイルを作成
プロジェクトフォルダの直下にvue.config.jsを作成する

module.exports = {
 publicPath : './',
 outputDir : 'www',
}

(6) cordova/vueのアプリを起動

$ npm run build
$ cordova emulate ios

正しく手順を踏めていればエミュレータが起動しVueの初期画面が表示されます。

あとはWebアプリを構築するのと同じような感覚でアプリを制作できます。
Vue router/Vuexが標準で設定されているので画面の切り替えや情報の伝達が比較的簡単にできます。ただ私個人の肌感覚として細かいことろの調整や機能修正で苦労するイメージが強く、単純なアプリの製作に使うにとどめておくのが良いと思っています。
とりあえず簡単にできる環境構築の備忘録でした。