どうも、カムノです。

以前の記事で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でホームページを作るときはここをこうするといいよー!って話も公開していこうと思いますので、今後ともよろしくおねがいいたします!

まとめ

SHARE

kamuno
TEXT BY kamuno

RECOMMENDED POSTこの記事もおすすめ!