はじめに
Vue CLI環境構築からGitHub Pagesに公開するまでをこの記事にまとめました。
天気予報APIを使ったアプリケーションをつくる過程で行ったことの備忘録的な内容です。
Node.jsを使える環境が準備されていることを前提に進めます。
Vueをインストール
Vue CLIを使うことで、欲しい機能にあわせたスタート時の環境を作ることができます。
下記コマンドで、Vue環境準備のためのコマンドラインインタフェースをインストールします。
npm install -g @vue/cli
Vue CLI バージョン確認
% vue --version
@vue/cli 4.5.11
また、グローバルインストールを行うための環境パスが通っていない場合はエラーがでるので、この記事を参照ください。
Vueプロジェクト作成
vue create weather-app
vue create の後にプロジェクト名を指定してください。（今回は weather-app で作成）
途中で出てくる選択肢は全部 enter で問題ないですが、カスタマイズしたい場合は最初の質問で Manually select features を選択してください。 画像のように vuex や vue-router の追加や、細かい設定が可能です
vue uiコマンドで、グラフィカルインターフェイスを使って、プロジェクトの作成・管理を行うことも可能です
vue ui
ローカルホスト立ち上げ
cd weather-app
npm run serve
つくったプロジェクト配下に移動し、
npm run serve を実行すると、localhostが立ち上がります。http://localhost:8080/でこの画面を確認。
ここでブラウザに表示される画面は、src内のファイルが使用されています。
GitHubのリモートリポジトリに登録
まずはGitHubに新規リモートリポジトリを作成し、下記コマンドを実行し登録します。
% git init
% git remote add origin <リモートリポジトリのURL>
% git remote -v //確認
% git add .
% git commit -m 'initial commit'
% git push origin master
GitHub Pagesに公開
gh-pagesというツールを使って、gh-pagesブランチを公開する方法で進めていきます。
1. Vueの設定ファイルを作成
プロジェクトのルートディレクトリ直下に、以下の内容でvue.config.jsという名前で設定ファイルを作成します。
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/weather-app/' //任意
: '/'
}
2. gh-pagesをインストール
--save-dev （ -D でもOK ）は開発用パッケージのインストールに必要なオプションです。
npm install gh-pages --save-dev
package.jsonの devDependencies というところに `` が追加されています。
"devDependencies": {
// 略
"gh-pages": "^3.1.0",
},
3. デプロイのためのコマンドを追加
package.jsonのscriptsに "deploy": "gh-pages -d dist" を追記します。下記のようになるはずです。
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"deploy": "gh-pages -d dist" //追加
},
4. deployコマンドで反映
npm run build により、srcのファイルを元に、dist配下に本番環境用のファイルを生成します。その後、npm run deploy を実行することで、リモートにgh-pagesブランチが作られ、distディレクトリの内部がGitHub Pagesに公開されます。
- npm run build
- npm run deploy
今後、ソースコードを変更し反映させたい場合は、同様の手順で更新してください。
まとめ
下記が続きになります。
この記事では、ここで作成したVue環境を使って、天気予報APIとAJAX通信を行います。