こんにちは、Jeannieです。
Vue.jsを始めてみよう、ということで前回は環境構築まで完了しました。
とりあえず、Visual Studio Code(以下、VSCode)とVue-CLIのインストールまで完了して、Vue.jsを始めるための下地は整ったかなと思います。
今回は、前回インストールしたVue-CLIを使ってプロジェクトの作成～ローカルサーバーの立ち上げまでをやってみたいと思います。
Vue.js始めたてで手探りなところもありますが、その辺りはご容赦願います(; ･`д･´)
それでは参りましょう！
Vueプロジェクトの作り方は大きく分けて2つ
早速、Vueプロジェクトを作成していきましょう。
プロジェクトの作成方法は大きく分けて2つあります。
- vueコマンドで作成(CUI操作)
- vue uiで作成(GUI操作)
①はvueコマンドを使った従来のプロジェクト作成方法です。ターミナルでコマンドを実行して対話式でプロジェクトを作成していきます。
一方、②はVue CLI3から使えるようになったプロジェクト作成ツールで、ブラウザでプロジェクトを作成することが出来ます。
ターミナルで作成するよりも、ブラウザの方が直感的で分かりやすいと思うので、今回の記事では②のvue uiを使ったプロジェクト作成方法でやってみたいと思います。
Vue UIを使ってプロジェクトを作ってみよう！
それでは、vue uiを使ってプロジェクトを作成していきましょう！
まずは、ターミナルで以下のコマンドを実行してみてください。
vue uiするとどうでしょう、ブラウザで以下のような画面が立ち上がってきましたね。これがVue CLI3から使えるようになったVue プロジェクトマネージャということですね。
従来であれば、vueコマンドを使って文字ベースでプロジェクトのセットアップをする必要がありましたが、vue uiであればこのようにブラウザからポチポチと設定していくだけでセットアップしていくことができます。
プロジェクトを作成していくので、「作成」→「ここに新しいプロジェクトを作成する」を選択しましょう。
すると、作成するプロジェクトの詳細を入力するページが表示されました。
このページでは、以下の内容を入力します。
プロジェクトフォルダ：任意の名前をつけましょう。
パッケージマネージャ：yarnをインストールしているのでyarnに設定します。
yarnをインストールしていない方はnpmで大丈夫かと思います。
入力が終わったら「次へ」をクリックします。
すると上記のようなページが表示されます。
このページはプリセットの選択ですね。
Vue3を使いたいので、とりあえず「Default preset (Vue 3 preview)」を選択しました。
おそらく、babelとeslintがデフォルトで入るんでしょう。
後々、その他のプラグインが必要になったら都度インストールすることにして、プロジェクトを作成していきます。
↑プロジェクト作成中ですね。
作成が完了するまでにボチボチ時間がかかります。(数分程度)
無事にプロジェクトの作成が完了すると上記のようなページが表示されます。
ブラウザ上で直感的に操作するだけなので、非常に簡単ですね！
プロジェクトの設定やアプリの起動もこの管理画面から出来るみたいです。
左側に「プラグイン」や「依存」などいくつかメニューが表示されていますが、今回は特に詳しいことは置いといて、先に進みます。
※この辺りの説明は今後時間があれば記事にしていこうと思います。
(「時間があれば」は結局やらんやつ・・・)
では、早速ローカルサーバーを起動してみましょう。
左側のメニューから「タスク」→「serve」→「タスクの実行」をクリックします。
無事に起動が完了すると緑色のチェックマークが表示され、ステータスも成功と表示されます。
無事に起動したみたいですね。
そしたら、「http://localhost:8080/」にアクセスしてみましょう。
※先ほどの管理画面から「アプリを開く」をクリックするだけでもアクセス可能です。
上記のページが表示されれば、無事にローカルサーバーが起動されたことになります。
使ってみた感想
ぶっちゃけ何ひとつ難しいところはなかったので、あんまり手ごたえがない感じですね(笑)
まあ、今回は「初めてのプロジェクト作成」をコンセプトに作業したこともあるので、手ごたえがなくて当然ってところですかね。
もっと本格的な開発になると、プラグイン入れたり設定変えたりが必要になってくると思うので、その辺りは勉強しながら追々記事に書いていこうと思います。
それにしても、Vue UIの威力はすごいなと思いました！
初心者でも簡単にプロジェクトを作成出来るし、画面での操作ということで小難しいコマンドも覚えなくて済むので非常に便利です!(^^)!
これから、簡単なアプリケーションを作りながら勉強していこうと思ってるので、同じような初心者の方に役立つ記事を公開していけたらと思っています！
ということで、今回の記事は以上となります。それでは～(^^)/
コメント