kottasのブログ

主に環境設定に関するメモを記載していきます。

Vue.jsを触ってみたかったので、vue-cliをインストールしてみた

はじめに

いまさらですが、 Vue.js に触ってみたいと思ったので、やってみました。
Vue.js - Wikipediahttps://ja.wikipedia.org/wiki/Vue.jsja.wikipedia.org

お恥ずかしながらWeb系のことはさっぱりです。色々なサイト見てなんとなく触ってみたという感じです。

環境
  • OS: Win10
事前準備

そもそも私のPCには node.js すら入っていませんでした・・・ので、 node.js からインストールしました。

ここからインストーラを落として、インストールしました。

nodejs.org

以下のコマンドでインストールされてるか確認。

node --version
インストール

今回はvue-cliなるものを入れてみた。引数である -g はグローバルだかなんだからしいけど、詳しいことはしらないです。

npm install -g vue-cli

webpack という名のテンプレートで自分のプロジェクトを作成。そして意味のわからないことを聞かれたが適当に設定。

vue init webpack my-project

f:id:kottas:20181109000902p:plain

作成したプロジェクトの場所に移動。何もしてなければ、ユーザ直下?

cd [path_to_my-project]/my-project

npm のインストール。

npm install

起動。

npm run dev

さすれば以下のような感じになる。 f:id:kottas:20181109001536p:plain

表示されているアドレスにアクセス(何もしてなければローカルホストのポート8080?)。 f:id:kottas:20181109001753p:plain

こんな感じ?気が向いたらソースいじってみます。

参考

v1-jp.vuejs.org