以前、Bootstrap ベースのモックアップについて書きました。
Bootstrap を利用して簡単なモックアップを作る - kntmr-blog
で、今回は Bootstrap + Vue.js 版のモックアップを作ってみました。モックアップとしての内容は Bootstrap 版と同じです。Vue.js と Webpack の初学習を兼ねているので、いろいろとあやしいところがあると思います。特に、Webpack の機能はまだよく理解できていない…。
以下、備忘録。
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 ファイルでコンポーネント化しているが、試行錯誤したものの、いろいろと中途半端なところはありそう。
ご参考まで。
