Ubuntu16.04(WSL)にVue.jsをインストールし、Windows上でVue.jsのアプリケーションを構築できるようになるまでの環境構築をまとめました。
Ubuntuの環境設定
WSL上にUbuntuをインストールする方法は、「WSL(Windows Subsystem For Linux)上へUbuntuのインストール・初期設定を参考にしてください。
Node.js npmのインストール
まずはaptでnodejsとnpmをインストールします。
sudo apt update
sudo apt upgrade
sudo apt install nodejs npm
次に n package をインストール。
sudo npm cache clean
sudo npm install n -g
最後に n package を使って node をインストールします。
sudo n stable
sudo ln -sf /usr/local/bin/node /usr/bin/node
node.jsのバージョンを確認します。
node -v
v10.6.0
aptでインストールしたnode.js npmを削除します。
sudo apt purge nodejs npm
きちんとnode.jsが動くか再度確認します。
node -v
v10.6.0
vue-cliのインストール
これまでのvue-cliはそのままの名称がパッケージ名でしたが、3系になって名称が変わりました。
sudo npm install -g @vue/cli
バージョンの確認
vue -h
プロジェクトの作成します。
ここではmy-appという例で行います。(フォルダが作成されるため、競合しないよう注意)
vue create my-app
コマンド入力後に切り替わります。
Vue.jsアプリを起動させるには以下のコマンドを入力します。npm run devを入力すると、ブラウザが起動し、localhost:8080でアプリケーションが動作します。
cd vue-project
npm install
npm run dev
ブラウザで確認
npm run devを実行すると、自動的にデフォルトブラウザが起動します。
初回起動時はnode.jsに対して警告が表示されるため、許可します。
許可すると以下のようにブラウザに表示されます。
自動的にブラウザが起動しない場合は、ブラウザにhttp://localhost:8080でアクセスします。
firebaseのインストール
firebase CLIをインストールします。
npm install -g firebase-tools
インストール後にログインします。
firebase login
Vueのテンプレートを編集するとエラーになる
VueでComponent template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.というエラーがでた場合、template部分のミス発生します。
エラーになる例
<h1>Chat app</h1>
<form @submit.prevent="checkForm" autocomplete="off">
<input v-model="content" placeholder="メッセージを入力">
<input type="submit" name="" value="投稿する">
</form>
エラーにならない例
<div>
<h1>Chat app</h1>
<form @submit.prevent="checkForm" autocomplete="off">
<input v-model="content" placeholder="メッセージを入力">
<input type="submit" name="" value="投稿する">
</form>
</div>
このように1つのタグの中にまとめる必要があります。
コメント