menu
書いてる野郎
orebike@gmail.com
Vue.js/開発/webpack/HelloWorld
目次
Vue.js/開発/webpack/HelloWorld
一気に、しかし最小限の知識で、しかし延長線上に実用レベルになるように HelloWorld。 自分も理解が浅いので。
Vue.js は学習コストが低くとっかかりがいいと言われているが、まともな開発をしようとしたら、それなりにかなりの量の周辺知識が求められるので、そこをおさえつつ行く。
Linux 環境
ndenv のインストール
Vue.js をビルドするのに webpack が必要で、webpack を動作させるのに、Node.js が必要で、 Node.js をインストールするのに ndenv が必要なので入れる。
Node.js のインストール
Vue.js をビルドするのに webpack が必要で、webpack を動作させるのに、Node.js が必要だから入れる。 ココ参照 Node.js/ndenv
こにより node だけでなく npm と npx というコマンドもつかえるようになる。
HelloWorld 用ディレクトリを作る
作って移動
$ mkdir helloworld $ cd helloworld
以下このディレクトリで作業しているとする。
HelloWorld 用ディレクトリで使う Node.js のバージョンを決定する
バージョンはインストールした Node.js に合わせる
$ ndenv local v11.1.0 $ ndenv rehash
package.json を初期化する
これからいくつかインストールするライブラリやツールを記録するための package.json というファイルを作成する。 このファイルは npm という Node.js 用のパッケージ管理ツールで使われる
詳しくはココ参照 Node.js/npm
$ npm init
いくつか質問されるので何も入力せずオールエンターでOK
webpack をインストールする
Vue.js をビルドするのに webpack が必要なのでインストールする。
$ npm install --save-dev webpack webpack-cli
save-dev というのはこのインストール設定を package.json に記録するよという意味。 それは開発時に使いますよという意味。 逆に言うと最終的な実行時には使いませんということ。
package.json に記録するということは、次からは package.json を使って一発でインストールできるぜということ。
ダウンロードされてインストールされた webpack の本体は ./node_modules というディレクトリに入っている。
webpack の設定を用意
webpack の設定ファイルである webpack.config.js を用意する。
中にはこのように書く。
module.exports = {
entry: "./src/hoge.js"
};
意味は「 hoge.js から始まるから、hoge.js を中心にファイルを作ってくださいね webpack さん」ということである。
vue.js をインストールする
先程の webpack と同様に npm でインストールする
$ npm install --save vue
save というのは package.json に記録するよという意味。 それは実行時に使いますよという意味。
エントリーポイントを作る
先程設定に書いた hoge.js を実際に作る
ディレクトリを作る
$ mkdir src
そしてそこに hoge.js を作り、中にこう書き込む。
import Vue from "vue/dist/vue.esm.js" document.addEventListener("DOMContentLoaded", () => { new Vue({ el: "#app", data: function(){ return { msg: "HelloWorld" }; }, template: "<div>{{ msg }}</div>" }); });
ブラウザのロードイベントが動いたら Vue オブジェクト生成するということぐらいはわかる。
簡単に言うと、何処に(id=“el”に)、何を(HelloWorldを)、どのように(divでマークアップ)、表示するのかの設定が書いてある。
webpack でビルドする
package.json の scripts の項目にこのように書いて長いコマンドを短く実行できるようにしておく。
{ // 中略 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "npx webpack --mode development" }, // 中略 }
このコマンドに dev という名前をつけたので、
$ npm run dev
で実行できるようになる。
npx というのは node_modules の中のコマンドを実行するためのコマンドである。
よく作例で見るのは、説明を省くために
$ npm install -g webpack webpack-cli
のようにグローバルにインストールして環境を盛大に汚染するやつだが、そんなリスク取る必要ない。
では実際にビルドする
$ npm run dev
実行すると、./dist/main.js というやたらデカイ js ファイルが生成されていることがわかる。 非常にデカイのでエディタで開くとバグるかもしれん。 この dist や main.js というのは webpack のデフォルトの設定である。
実行する
ではこの main.js を実際に読み込んで実行してみる。
このような HTML を作って ./hoge.html として保存する。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>hoge</title> <script src="dist/main.js"></script> </head> <body> <div id="app"></div> </body> </html>
script タグで main.js を読み込んでいる。 元の hoge.js のソースでは DOMContentLoaded(DOMの構築完了) のイベントに引っ掛けてあったので、 body のケツまで読み込まれたあとに main.js が動くというタイミングになる。
中に入っている div 要素は hoge.js で指定した、「何処に」の場所として設置してある。
そしてこのファイルをブラウザで読み込むと、
<div id="app"></div>
の部分が入れ替わって
<div>HelloWorld</div>
になっていることが確認できてOK。
オツカレー。
