Vue.jsを使い始めていろいろできることが多くなってきたので、整理する意味も兼ねてチュートリアルにまとめます。
今回はコーポレートサイトを想定して作成していきます。
※記事が長くなったのでチュートリアルを分割しました。
目次
前提
- タスクは
npm scriptsで一限管理 - コマンドは
yarnを使用 -
vue-cliのwebpack-simpleを使用
バージョン
- "vue": "^2.5.11"
- "webpack": "^3.6.0"
手順
1. vue-cliでVue.jsの足場を構築
vue-cliを追加します。
$ yarn add -D vue-cli
webpackのシンプル版で初期化します。
$ vue init webpack-simple
* Generate project in current directory? => Enter
* Project description => Enter
* Author => Enter
* License => Enter
* Use sass? => y
webpack-simpleで使用するパッケージをインストールします。
$ yarn
2. ローカルで確認する環境を構築
browser-syncを追加します。
$ yarn add -D browser-sync
bs-config.jsをcliで実行するためpackage.jsonを変更します。
{
// 省略
"scripts": {
"watch:server": "browser-sync init", // 追加
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
// 省略
}
CLIでbrowsersync initを実行します。
$ yarn watch:server
bs-config.jsを変更します。
module.exports = {
// 省略
"files": "./dist/**/*", // 変更
// 省略
"server": {
"baseDir": "./dist",
"middleware": function(req, res, next){
var timestamp = "[" + new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '') + "] ";
console.log(timestamp + req.method + " " + req.originalUrl + " - " + req.connection.remoteAddress + " - " + req.headers['user-agent']);
next();
}
},
// 省略
};
npm scriptsでコマンドを複数使えるようにするためnpm-run-allを追加します。
$ yarn add -D npm-run-all
webpackでファイルを監視してローカルで確認できるように変更します。
{
// 省略
"scripts": {
"watch:server": "browser-sync start --config bs-config.js", // 変更
"watch:js": "webpack -w", // 追加
"start": "run-p watch:*", // 追加
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
// 省略
}
npm scriptsのstartを実行します。
※まだ正しく表示されません。
$ yarn start
書き出されたindex.htmlをsrcディレクトリに移動して変更します。
<!DOCTYPE html>
<!-- 省略 -->
<body>
<div id="app"></div>
<script src="/js/bundle.js"></script> <!-- dist を js に変更 -->
</body>
</html>
ファイルをコピーするパッケージを追加します。
yarn add -D cpx
src内のhtml・画像・フォントファイルをdistへコピーするコマンドを追加します。
{
// 省略
"scripts": {
"watch:server": "browser-sync start --config bs-config.js",
"watch:file": "cpx \"./src/**/{*.html,*.jpg,*.png,*.gif,*.svg,*.eot,*.ttf,*.woff,package.json}\" ./dist",
"watch:js": "webpack -w",
"start": "run-p watch:*",
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
// 省略
}
srcディレクトリのassetsディレクトリ名をimgへ変更します。
/src/App.vueを変更します。
<template>
<div id="app">
<img src="./img/logo.png"> <!-- assets を img へ変更 -->
<!-- 省略 -->
webpackで画像ファイルのパスを/img、フォントファイルを/fontsとするためwebpack.config.jsを変更します。
// 省略
module.exports = {
// 省略
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/', // /dist/ を / へ変更
filename: 'js/bundle.js'
},
// 省略
module: {
rules: [
// 省略
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: 'img/[name].[ext]?[hash]' // img/ を追記
}
},
{ // フォントファイルを使用する場合は以下を追記
test: /\.(eot|ttf|woff)$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]?[hash]'
}
}
// 省略
以下をcliで実行し、ブラウザでVue.jsのアイコンが表示されたページが開かれれば成功です。
$ yarn start
まとめ
表示するだけならvue-cliで用意されたnpm scriptsのコマンドで問題ないですが、今回は自作でいろいろカスタマイズしていくので、あえてvue-cliで用意されたものは使用していません。
webpackは一から書き始めるといろいろ詰まってしまう場合がarunode,vue-cliで自動的に書き出された綺麗なものを使っています。
「ここは自作」「ここはツールのものを使う」この辺りの判断ができるようになると時間をうまく使えるようになるので、一つずつ理解して使えるものは使って効率的に作業していきましょう。