Vue.jsでホームページを作ってみよう！（開発環境準備編）

どうも、カムノです。

以前の記事でCHEATホームページはVue.jsを使って作成していることをお伝えしましたが、今回はVue.jsでホームページを作るための開発環境準備編をお送りいたします！

というわけで、「2018/11/29時点の最新情報」をお届けします。

今回準備する開発環境

• Visual Studio Code
• Node.js
• Yarn
• Vue.js

WindowsでもMacでも、どちらでも開発可能です。

今回はMacBookProに準備していく様子のスクリーンショットを使って解説していきます。

Visual Studio Code をインストール

1. Visual Studio Code のダウンロードサイトへアクセス
2. Download for Mac （Stable Build）をクリック
3. ダウンロードされた「VSCode-darwin-stable.zip」を解凍
4. アプリ本体「Visual Studio Code.app」がでてくるので、任意の場所に移動

Node.js をインストール

1. Node.js のダウンロードサイトへアクセス
2. LTS（推奨版）をダウンロード
3. ダウンロードされたインストーラー（今回はnode-v10.14.0.pkg）を実行
4. インストールを完了

Visual Studio Code のターミナルでnpmの準備

• Visual Studio Code を起動
• TerminalメニューからNew Terminalを開く
• グローバルインストールのためのディレクトリを作成する
• mkdir ~/.npm-global
• 新しいディレクトリを使う設定をnpmで行う
• npm config set prefix ‘~/.npm-global’
• ~/.profileに以下の行を追加する
• touch ~/.profile
• echo ‘export PATH=~/.npm-global/bin:$PATH’ >> ~/.profile
• cat ~/.profile
• 変更を反映する
• source ~/.profile

Yarn をインストール

• npm i -g yarn

Vue.js (vue-cli) をインストール

• npm install -g vue-cli

できあがり。

ね、簡単でしょ？

（出典：ボブの絵画教室）

CHEATホームページはこれに「Nuxt」「Buefy」を導入して、ブラウザによる挙動の差異を防ぐために「babel-polyfill」プラグインを使ったりしています。

ソースコードはGitLabで管理しています。

駆け足でサーセンwww

もっといろいろと語りたいんですが、

「…きこえますか…カムノよ…早く…ブログを…アップ…するのです…」

という声が心に直接呼びかけてくるので、今日はこんな感じで失礼します！！

Vue.jsでホームページを作るときはここをこうするといいよー！って話も公開していこうと思いますので、今後ともよろしくおねがいいたします！