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のインストール

基本は、Quiita:Ubuntuに最新のNode.jsを難なくインストールするそのままです。

まずは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のインストール

npmでvue-cliをインストールします。

sudo npm install -g vue-cli

バージョンの確認

vue -h

作業ディレクトリの作成(vue-projectは任意の名前に変更してくだささい。)

mkdir vue-project

vueテンプレートのインストール
vue init webpack-simple vue-projectと入力すると、いくつかの質問があります。
ただし、最後のUse sass以外は全てEnterのみでかまいません。

vue init webpack-simple vue-project

? Project name vue-project
? Project description A Vue.js project
? Author username <useremail>
? License MIT
? Use sass? Yes

   vue-cli · Generated "vue-project".

   To get started:

     cd vue-project
     npm install
     npm run dev

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でアクセスします。

コメント