Vue.jsの始め方

「Vueってなんか流行っているやつでしょ？でも使い方わかんね」あるいは「明日からVueやることになったけどどうしたらいいの？」

そんな方々に朗報です。スタートダッシュを決めるための環境構築方法を教えます！！

必要なもの

  • Windows 10(なければ買う)
  • VScode(なければ入れる)
  • WSL(今回いれる)

導入手順

WSLを導入

この記事を参考にした

スタートボタンを右クリックしてアプリと機能を選択

右上もしくは一番したにある「プログラムと機能」を選択

左のメニューにある「windowsの機能の有効化または無効化」を選択

Windows Subsystem for Linuxにチェックを入れOKを押す

再起動

windowsのstoreを起動

ubuntuと検索し18.03LTSをダウンロード

ubuntuを起動する

usernameを聞かれるので好きな名前を入れる

passwordを聞かれるので好きなパスワードを入れる

リポジトリの変更 ちなみにshift + 右クリックで貼り付けできます 

sudo sed -i -e 's%http://.*.ubuntu.com%http://ftp.jaist.ac.jp/pub/Linux%g' /etc/apt/sources.list

アップデート

sudo apt update
sudo apt upgrade

Node.jsをインストール

node.jsとnpmのインストール 

sudo apt install -y nodejs npm

確認

node -v
v8.10.0
npm -v
3.5.2

VScode

起動しているWSLのターミナルで適当なワークスペース用のフォルダを作成する

mkdir work

いつも使っているVScodeを起動する

拡張機能のremote-wslを導入

メニューにあたらしくwslのアイコンが追加されるのでクリック(モニターに><みたいなマーク)

ubuntuの右にあるConnect to WSLのアイコンをクリック

新しいウィンドウが開けばOK

ファイルを開くを選択しworkを選ぶ

拡張機能がいろいろ消えてるのでインストールしなおす(日本語化とか)

Vue.jsを導入する

公式サイト

インストール

sudo npm install -g @vue/cli
vue -V
@vue/cli 4.3.1

ひな形形成

vue create app

設定どうしますか？と聞かれるがとりあえずdefaultでOK

起動

cd app
npm run serve

localhost:8080にアクセスしHello WorldしていればOK

まとめ

私はmacでしかVueVueしてなかったのでwindowsの環境構築は初めてでした。

本来ならばwindowsに直接Vue-cliを導入したかったがエラーにイラついてついLinuxに逃げてしまいました。よい子はあきらめずに頑張りましょう。

次はVueの入門記事を投稿する予定です。

 ホーム雑記