Ubuntu16.04にnpmでVue.jsをインストール

javascript

Ubuntu16.04(WSL)にVue.jsをインストールし、Windows上でVue.jsのアプリケーションを構築できるようになるまでの環境構築をまとめました。

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 
? 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

コメント