Bootstrap と Vue.js で簡単なモックアップを作る

以前、Bootstrap ベースのモックアップについて書きました。

Bootstrap を利用して簡単なモックアップを作る - kntmr-blog

で、今回は Bootstrap + Vue.js 版のモックアップを作ってみました。モックアップとしての内容は Bootstrap 版と同じです。Vue.js と Webpack の初学習を兼ねているので、いろいろとあやしいところがあると思います。特に、Webpack の機能はまだよく理解できていない…。

github.com


以下、備忘録。

package.json を作る。

npm init

開発時に使うライブラリは --save-dev を付けてインストールする。実行時に必要なライブラリは --save を付けてインストールする。(たぶん)

npm install --save-dev webpack-dev-server webpack vue-template-compiler vue-style-loader vue-loader url-loader style-loader file-loader extract-text-webpack-plugin css-loader
npm install --save vue-router vue jquery bootstrap

package.json に scripts を定義して、npm run build で webpack コマンドを叩く。webpack.config.js の設定に従ってモジュールをビルドする。

{
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  }
}

ローカルの動作環境には webpack-dev-server を使う。npm run dev でサーバーを立ち上げて、http://localhost:8080 にアクセスするとページが表示される。webpack-dev-server は、ファイルの変更を検知して自動でリビルドしてライブリロードする機能を持つ。

一応、vue ファイルでコンポーネント化しているが、試行錯誤したものの、いろいろと中途半端なところはありそう。

ご参考まで。