UbuntuにnpmでVue.js(Vue-cli)をインストール

javascript
スポンサーリンク

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に対して警告が表示されるため、許可します。

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つのタグの中にまとめる必要があります。

コメント