UbuntuにVue.jsの環境構築する方法
Ubuntuの①グローバル環境にインストールするもの、②プロジェクトごとの環境に用意するものという順で説明していきます。
目次
環境
- 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
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/ にアクセスすると以下のような画面が見える。
[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/ にアクセスすると以下のような画面が確認できるはず。
参考:
開発環境
VS Code
必須
オプショナル
- Live Server - Visual Studio Marketplace:Webサーバーをローカル環境に立ち上げる。Vueのチュートリアルを一通りこなすためにはあったほうが楽。
- Debugger for Chrome - Visual Studio Marketplace:Chrome向けのデバッガーツール。
ブラウザ
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