Vue.jsインストールからGitHubPagesで公開するまで

環境

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.14.1
BuildVersion:   18B75

$ node -v
v10.14.1

$ npm -v
6.7.0

環境構築

npmインストール

homebrewインストール

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Node.jsインストール

$ brew install node

確認

$ npm -v

Vue.jsインストール

$ # vue-cli をインストール
$ npm install --global vue-cli
$ vue --version
2.9.6

vue-cliは雛形からプロジェクトを作成してくれる公式ツールです．

プロジェクト作成

vue init <template> <project-name>でプロジェクトを作成． "webpack" ボイラープレートを使用している．

$ vue init webpack my-project
$ cd my-project
$ npm run dev

起動

DONE  Compiled successfully in 119ms                                                                                         23:51:58

 I  Your application is running here: http://localhost:8080

http://localhost:8080にアクセス

GitHub Pagesに公開

docsディレクトリを生成

GitHub-pagesでは，./docsディレクトリが配信されるため，/config/index.jsを修正する．

/config/index.js

var path = require('path')

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../docs/index.html'), // (1)
    assetsRoot: path.resolve(__dirname, '../docs'), // (2)
    assetsSubDirectory: 'static',
    assetsPublicPath: './', // (3)
    productionSourceMap: true,
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    cssSourceMap: false
  }
}

ビルドする

npm run build

docsディレクトリが生成される．
masterにpushする．

公開設定

リポジトリのSettingsをクリック GitHub Pages->Sourceで 「master branch / docs folder」を選択． 数分後公開される．

参考にしたサイト

vue-cliで始めるVue.jsチュートリアル (2) - Qiita