UbuntuにVue.jsの環境構築する方法

Ubuntuの①グローバル環境にインストールするもの、②プロジェクトごとの環境に用意するものという順で説明していきます。

f:id:xterm256color:20200314171910j:plain
まったく関係ない画像

目次

環境

  • Ubuntu 18.04.3 LTS
  • VS Code v1.42.1
  • インストールするもの
    • Node.js v12.16.1
    • Yarn v1.22.1
    • Vue CLI v4.2.3
    • Vue v2.6.11
    • (Vuetify v2.2.11)

グローバル環境

Node.js

開発用のJavaScript環境であるNode.jsをインストールする。 2020/03/08時点で安定版である12.16.1であるが、デフォルトではNode.jsの8系が入ってしまう。 最新の安定版をインストールするにはNode.jsの公式が提供しているリポジトリを使う。

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

参考:nodesource/distributions: NodeSource Node.js Binary Distributions

Yarn

JavaScriptのパッケージ管理ツールYarnをインストールする。

Node.jsと同様に公式が提供しているリポジトリを使う。

# リポジトリ登録
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
    
# インストール
sudo apt-get update && sudo apt-get install yarn

注意 Ubuntu 17.04 には cmdtest がデフォルトでインストールされてるので、あらかじめアンインストールしておくこと。

Yarnでグローバル環境にパッケージを入れた場合、バイナリファイルは $HOME/.yarn/bin に配置されるので、パスを通しておく。

echo 'export PATH=$PATH:$HOME/.yarn/bin' >> ~/.bashrc

参考:インストール | Yarn

Vue CLI

Vueのプロジェクトを手早く作るにはVue CLIがよい。これはグローバル環境にインストールする。

yarn global add @vue/cli

プロジェクト環境

Vue CLIでプロジェクトフォルダ作成

ここからは実際にVueを使ったWebアプリケーションをローカルマシンに作る。まずは$HOME/VueProjects にプロジェクトフォルダを作る。

mkdir $HOME/VueProjects
cd $HOME/VueProjects

    
vue create hello-world

このコマンドを実行すると、$HOME/VueProjects/hello-world にプロジェクトが作成される。

ローカルに開発サーバーを立ち上げる

下のコマンドを実行すると開発サーバーが立ち上がる。

yarn serve

ブラウザから http://localhost:8080/ にアクセスすると以下のような画面が見える。

f:id:xterm256color:20200314174041p:plain

[Option] Vuetifyを適用

コンポーネントライブラリ Vuetify を適用して、マテリアルデザインに準拠したダッシュボードを作ってみる。

mkdir $HOME/VueProjects
cd $HOME/VueProjects
    
# プロジェクトにVuetifyを追加
vue add vuetify
    
# VueのBaselineテンプレートをコピー
curl https://raw.githubusercontent.com/vuetifyjs/vuetify/master/packages/docs/src/layouts/layouts/demos/baseline.vue -o src/App.vue

http://localhost:8080/ にアクセスすると以下のような画面が確認できるはず。

f:id:xterm256color:20200314174055p:plain

参考:

開発環境

VS Code

必須

オプショナル

ブラウザ

Chrome/Firefox向けにデバッグ用エクステンションが提供されているのでインストールしておく。

Yarnタブ補完

Bashでyarnコマンドをタブ補完できるようにする。

yarn global add yarn-completion
curl https://raw.githubusercontent.com/romainberger/yarn-completion/master/yarn-completion.bash -o /home/n/.yarn/yarn-completion.bash

以下を $HOME/.bashrc に追記する

if [ -f ~/.yarn/yarn-completion.bash ]; then
    . ~/.yarn/yarn-completion.bash
    __yarn_completion_complete k
fi