こんにちは、コーダーのオッコです。
今回は、notエンジニア向けに、vue.jsを使ったアプリ開発においての環境構築手順を紹介します。
かなり苦戦しまして、私の場合はこの順番でないとローカルで行った修正がビルド後の実機で反映されない等、トラブルが頻発しました。
事前準備（インストールしておく）
・git管理下のプロジェクト
・sourcetree
・monacaクラウドIDE https://console.monaca.mobi/dashboard
・monaca localkit https://ja.monaca.io/localkit.html
・vue.js
環境構築手順
①sourcetreeでgitプロジェクトをクローンする
②monaca localkitの「＋」ボタンから「インポート」→「プロジェクトをインポート」を選択する
※先ほどクローンでローカルに落としてきたプロジェクトを選択します。
③作業ディレクトリを先ほどクローンしてきたフォルダに指定し、プロジェクト名を入力して「インポート」ボタンを押す
④コマンドプロンプトを開いて、プロジェクト直下で以下入力しインストールする
npm install --global cross-env
npm install –save-dev webpack
トランスパイルが通るようにします。プロジェクトをクローンした最初に一度行えばOKです。
上記コマンドが何かについては、過去に詳細を記述していますので以下の記事をご覧ください。
⑤monaca localkitからmonaca クラウドIDEにプロジェクトをアップロードする
※アップロード前に、クラウドIDEにログインした状態にしておくこと。（よくセッション切れになります）セッション切れててもクラウドへのアップロード成功しました。
アップロードボタンを押すと、トランスパイルを行うか聞かれるので、必ず「はい」を選択する。
※直前にトランスパイルをやっていたとしても、ここで「いいえ」を押すとクラウドにプロジェクトを作るのを失敗することがある。
こんな表示が出たら、アップロードボタンを押下する。これが出ればだいたい成功します。
※何らかのエラーで戻されることがあるが何回かがちゃがちゃやると成功するときがある。あきらめない心が大事
⑥クラウドIDEにプロジェクトが作られていることを確認する
以上！
クラウドに修正が反映されたことを確認する
①git pullしてローカルの状態を最新にする
②開発環境手順の⑤を忘れずに行って、クラウドIDEの状態をローカルに合わせる
③開発タブからクラウドIDEを開き、プレビュー表示を見て修正が反映されていることを確認する。クイックビューアですぐに実機で確認することも可能だが、実機ビルドと表示が変わることもあるので最終的には実機で確認する。
以上！
Vue.jsについての補足
monacaでトランスパイルを行うと、sourcetree上でこういったファイルが生成されます。（毎回これ全てが出る訳ではありません）（www/配下を.gitignoreしている場合はなにも出ません）
これはトランスパイルによって自動的に作られるもので、結論から言うと
www/ 配下のファイルをコミット・プッシュする必要はありません。
もししちゃっても別に大したことはないです、www/ 配下のファイルは全て削除して、プッシュし直してください。
どうせクラウドに同期する際にトランスパイルするので、その時にシステム自身が必要なファイルは自分で勝手に作ります。
これらファイルをプッシュしたまま、残してしまうと、ローカルで行ったデザイン修正等がクラウドに反映されなくなったりします。
でもじゃあ、トランスパイルのたびにこんなにファイルが作られるなんて鬱陶しいですよね。
では、sourcetree上でこういったファイルを「作業ツリーのファイル」部分に表示させないようにする方法を紹介します。
①プロジェクトのソースから.gitignoreファイルを探す
気合いで探してください。gitクローンしたディレクトリ直下にあります。
②.gitignoreファイルを開き、「# Misc」のところに以下を記載する
# Misc
/www/*これで表示されなくなりました。
大事なので何度も言いますが、私たちはwww/ 配下のファイルを普段いじる必要はありません。システムが勝手に生成します。
もしデザイン修正や他の人の修正が実機ビルドに反映されなかったら、一度ww/ 配下のファイルを全部消してみてください。トランスパイルすればまた勝手に必要なやつだけ作られるので、大丈夫です。
余談ですが、Miscは「その他」という意味だそうです。
以上！
関連記事紹介
[cc id=1656]
コメント