かなり前の記事になりますが、
Node.js系の記事を挙げていました。
その時はNuxt.jsをやっていたんでしたね。(うろ覚え)
nodejs系の時の記事
最近また触り始めました。
とはいっても、今回はVuetifyです。
これもフロント側のフレームワークですね。
今回はVuetifyの導入に関して忘れないように書いておこうかなと。
１．Vueプロジェクトの作成
先ずはVueのプロジェクト作成ですね。
Nuxt.jsの時と同じように、これもVueから派生して作成します。
多分、ワンコマンドで作ることもできるんでしょうけど、
とりあえずわかる方法でやっていきます。
適当な作業ディレクトリをきってから、
コマンドブロンプトから、下記のコマンドを実行します。
今回は「sample_vuetify」というプロジェクト名で作成します。
vue create sample_vuetify
コマンドを実行すると選択肢が出てくるので、Vue2を選択します。
Vue3だとVuetifyのインストールで失敗してしまいます。
バージョンが対応していないみたいですね。
エンターキーで決定すると、何やら処理が実行されていきます。
最後にSuccessfullyが出ていれば成功です。
指定したプロジェクト名でフォルダが作成されているので、見てみます。
なんか、いろいろ作成されていますね。
めちゃくちゃたくさんファイルが作成されています。
とりあえず、この状態で起動させてみます。
下記のコマンドで起動
作成されたプロジェクト内で実行します。
プロジェクト作成から実行する際は
カレントディレクトリが変更されてないので間違いがちです。
npm run serve
下記の画面が表示されれば、サーバ立ち上げができていると思います。
表示されているURLでアクセスしてみましょう。
http://localhost:8080/
Vueの画面が表示できていれば、大丈夫です。
２．Vuetifyのインストール
次に、このVueプロジェクトに対して
Vuetifyのインストールを行います。
これもコマンドブロンプトのコマンド実行で行います。
vue add vuetify
実行後にいろいろ処理されますが、
いくつか選択肢が表示されるので、そこだけ入力します。
プリセットの選択(Defaultを選択)
あとは処理が終わるまで待ちます。
Successfullyが出てくれれば、正常にインストールされていると思います。
失敗したら、NPMのバージョンを更新したり、
プロジェクトを再作成したりしてみるといいかもしれません。
んで、これも起動してみましょう。
npm run serve
Vueの起動の時と同じような表示になったら、
ページにアクセスしてみましょう。
http://localhost:8080/
…結構、表示が変わりましたね。
Vuetifyのインストールもこれで完了です。
３．次のステップとしては？
いろいろ作成されているファイル群
URLのページとして表示しているのは、どのファイルかというと、
「src/App.vue」
です。
VueやVuetifyではこのVueファイルとJavascriptファイルとかを連携して
フロントエンドのページコンテンツを作成する形になります。
ワンページのみの内容であれば、とりあえずこれで作っていってもいいのですが、
今回自分がやりたいのは少しページ遷移も欲しいので、
それができるようにするところからでしょうか？
そんなわけで、ではでは
0 件のコメント:
コメントを投稿