初心者でもVue.jsでサクサク作業できるようにしたい(windows 10)

経緯

福家です。

vue.jsを使うとグラフの描画とかデータの選択がリアクティブな動きのあるwebページが作れますよ!とは木村先生に言ったものの環境開発を立ち上げるところから始めたことが無いので自分用+ゼミ生用の覚書として全然使われていないsea-naのブログに書いておこうと思いました。

だけれどもvue.jsは日本語ドキュメントもあって、また日本の利用者の技術ブログも活発であることから、一つ一つ調べていけば大体解決できます。

ここでは大雑把に書きますが、ゼミ生はVue.js&Nuxt.js超入門を木村先生からたぶん借りられます。超初心者向けでわかりやすいです。ゼミ生じゃない人は木村ゼミへようこそ!

Vue.jsとは

Vue (発音は / v j u ː / 、 view と同様)はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

公式ドキュメントより

僕はview層???ってなっちゃいましたが、

MVCモデル

model: アプリケーションデータ、ビジネスルール、ロジック、関数

view: グラフや図などの任意の情報表現

controller: 入力を受け取りmodelとviewへの命令に変換する

らしいです。ユーザが見える部分の処理のことみたいです。

 

特徴

リアクティブプログラミング

  データの更新に合わせて画面の表示も更新される。

コンポーネントシステム

  コンポーネントという部品に区切って呼び出すことで、再利用ができたり、可読性が高くなったりで好き。

テンプレート構文

  HTMLタグを使うような感覚でコンポーネントを使ったり、関数を使ったりできる。これも読みやすくてウキウキです。

 

細かいことはVue.js&Nuxt.js超入門なりグーグル先生にお願いしてください。

 

Vue.jsを使う

jQueryと同様に<script>で呼び出せますが、今回はライブラリを使うなり開発環境を整えたいです。(<script>で呼び出してどんな感じかとりあえず触ってみたかったらここを参考にしてください)

上記のことをするためにはNode.jsの機能が必要なのでまずはこれをインストールします。LTS版(今回は12.16.0)をインストールします。これをインストールすると、コンソール上でnpmが使えるようになります。npmはNode.jsのパッケージ管理ツールです。そしてコマンドプロンプトやpowershell等のコンソールで

npm install -g @vue/cli

npm install -g @vue/cli-service-global

 

を実行しVue CLIとVue cli-service-globalをインストールします。

これでVueCLIというVue.js開発のためのコマンドツールをインストールできました。

 

あとはプロジェクトを置きたいディレクトリに移動して

vue create 好きなプロジェクト名

を入力するとプロジェクトが作成できます!

するとこんな風に設定を聞かれますが大体は↑のデフォルトで大丈夫だと思います。矢印キーで選択、エンターで決定です。

僕はtypescriptvue-routerを使いたいのでManually select featuresを選択し、それを組み込むように設定しました。ここでは詳しい説明は省きます。細かい項目を設定するときはスペースも使います。

こんな感じになれば完了です。

コマンドを打った場所で新しいフォルダーができているはずです。

上の画像で言われたとおりに

cd [プロジェクト名]

npm run serve 

を打ち込んでみます。

するとこんな画面になります。

この状態のままブラウザでhttp://localhost:8080/にアクセスします

(この状態はctrl+cで中止できます)

こんな画面が出てきたらひとまずVue.jsのプロジェクトの立ち上げは終了です!

今後も追加投稿していくかもしれません。今回のところの細かいところも含めてVue.js&Nuxt.js超入門を参考にしたのでぜひ読んでみてください。初心者にとてもやさしくて