Onsen UI、Vue.jsでアプリを作る初めの一歩(開発→本番)

#はじめに
初めの一歩ができると、わかる人はどんどん進んでいったりすると思っています。
よろしくお願いします。

Onsen UIのサイトはこちらから
以下記事の進行は
Onsen UI、Vue.js
を元に進めて行きます。
では早速！

#開始

ターミナルを開いて、Onsen UI + Vueプロジェクトの設定を簡単にするために、Vue CLIをインストールします。以下コマンド。

$ npm install -g @vue/cli

インストールが終わるとプロジェクトが早速作れるようになっているので作りたい場所(フォルダ)まで移動して以下コマンドを打ちます。打つと質問されるので答えて行きましょう！！
最初の質問は私だけかな？通信のせい？とりあえずnにしました。わら
ここでの[my-onsen-app]は作るプロジェクトのフォルダ名になります。
ちなみに名前に大文字入れるとエラーになります

$ vue create my-onsen-app

---

?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n)n 

上記、デフォルトのnpmレジストリへの接続は遅いようです。より速いインストールのためにhttps://registry.npm.taobao.orgを使用しますか？ と聞かれているのでnをうって断りました。

---

Vue CLI v3.4.0
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features 

ここでは、デフォルトの設定か自分でカスタマイズされているかなので、最初は上記のdefaultでいいと思います。そのままエンターで。

---

っとするとプロジェクトの生成が始まります！少し待ちましょう！
そして終了すると以下のようなフォルダ構成になります。treeで全部表示しようと思いましたがあまりにもフォルダがありすぎてちょっとあれだったので割愛します。

できたプロジェクトに移動してください。以下コマンド

$ cd my-onsen-app

以下コマンドで今度はonsenuiとvue-onsenuiをプロジェクトにインストールします。

$ npm install onsenui vue-onsenui

次に以下画像にある、main.jsをお好きなエディタで開いてください。

開くと以下のようになっているので書き足していきます。

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

書き足すと以下のようになると思います。
要は、インストルしたcssを読み込み、VueファイルでOnsen UIを使うようにしたということですね。

main.js

import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

import Vue from 'vue'
import VueOnsen from 'vue-onsenui';
import App from './App.vue'

Vue.config.productionTip = false
Vue.use(VueOnsen); 

new Vue({
  render: h => h(App),
}).$mount('#app')

次に、以下画像のApp.Vueをお好きなエディタで開いてください。そのファイルに以下内容をコピペしてください。

App.Vue

<template id="main-page">
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">Title</div>
    </v-ons-toolbar>

    <p style="text-align: center">
      <v-ons-button @click="$ons.notification.alert('Hello World!')">
        Click me!
      </v-ons-button>
    </p>
  </v-ons-page>
</template>

全て終わったら以下コマンドで開発環境を立ち上げます。

$ npm run serve

終わると、http://localhost:8080/ で開いて見てねと書いてあるので貼り付けて見てみましょう！！以下の画像が出て、[Click me!]タップでアラートが出ます。

で、色々開発で試したあとは本番にのせたいですよね！
まず一回ローカル環境を閉じるため、macならControl+Cを押します。そしたら以下コマンドを打ちます。

$ npm run build

と以下のように、distというフォルダができるのでそのフォルダの中身を公開するところに一式おいてあげればいいです。

ちなみに、デフォルトの設定だとエラーが出る可能性があります。エラー解決は以下リンクからお願いします。
TypeError: Cannot read property 'minify' of undefined

で、ここでそのあげるのに何使えばいいのかなという方に朗報です！！
簡単にWebアップまでの記事を以下で書いたの是非！！先ではstaticフォルダとindex.htmlだけのところをここのファイル一式に変えればOKです！！

FirebaseにてWeb(https、無料)を公開してみるをやる

#参考
ここのサイトはVue.jsについてとてもわかりやすそうなサイトです！！
https://www.monster-dive.com/blog/web_creative/20180608_001789.php