Vue.jsのメモ

Vue

Vue.js を .vue という拡張子で使ってみようと思ったんだけど、npm とか yarn とか webpack とか全然わからなかったので色々やってみたことのメモ。 いろいろ間違ってるような気もする。

npm, yarn

アプリが使用するNode.jsのモジュールとそのバージョンを管理するものっぽい。

Rubyで言うbundlerみたいなものかな。

npm よりも yarn の方が後発で良いらしい。

webpack

複数のJavaScriptを一つにまとめることができるものらしい。

複数のJavaScriptを一つずつHTTPで取得しようとするよりはネットワーク上のオーバーヘッドが軽減されるのがメリットなのかな。

空白や改行を取り除いて圧縮化したりもできるらしい。

あと、JavaScriptだけでなくCSSも一つのファイルにできるという謎機能もあるらしい。

拡張子vueのファイル

単一ファイルコンポーネントというらしい。

Vueのコンポーネントを作るにあたり、JavaScriptとCSSとテンプレートを別ファイルで管理するより、一つのファイルで管理した方がやりやすいってことで、一つのファイルにしたものがvue拡張子のファイル。

上記ページに載ってる例: (Hello.vue)

<template>
  <p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
  data: function () {
    return {
      greeting: 'Hello'
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

当然こんなファイルはブラウザは読み込めないので、これをJavaScriptに変換するのにwebpackが使われる。 webpackでvue-loaderというローダーを使うようにする必要あり。

vueからjsを作ってみる

yarnのインストール

https://yarnpkg.com/ja/docs/install#debian-stable に従って yarn をインストール。

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn

yarnを使って必要なモジュールをインストール

mkdir /tmp/hoge
cd /tmp/hoge
yarn add vue vue-loader vue-template-compiler webpack webpack-command css-loader

package.jsonとyarn.lockが勝手に作られる。

モジュールはnode_modules配下に置かれるみたい。 依存関係にあるモジュールも自動的にインストールされる。

上のコマンドだけで445個も作られた。しかし多すぎない？ Node.jsの世界はこういうもんなのかな…。

src配下にソース作成

srcディレクトリを作って、その下にHello.vueとindex.jsを作成。 Hello.vueは上記のものから若干変更してる。

src/Hello.vue

<template>
<p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
    props: ['greeting'],
}
</script>

<style scoped>
p {
    font-size: 2em;
    text-align: center;
}
</style>

src/index.js

import Hello from './Hello'
export { Hello }

webpack.config.jsを作成

よくわかってないけど、色々見てみて雰囲気で…。

const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'hello.js',
        path: '/tmp/hoge/dist',
        library: 'Hoge',
    },
    module: {
        rules: [
            { test: /\.vue$/, loader: 'vue-loader' },
            { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] },
        ]
    },
    resolve: {
        alias: { 'vue$': 'vue/dist/vue.esm.js' },
        extensions: [ '.js', '.vue', '.json' ],
    },
    plugins: [
        new VueLoaderPlugin()
    ]
};

webpackを実行

yarn run webpack

dist/hello.js が作成される。

使ってみる

次のように index.html を作成してブラウザから開くと、

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="dist/hello.js"></script>
    </head>
    <body>
        <div id="app">
            <hello :greeting="greeting"></hello>
        </div>
        <script>
         Vue.component('hello', Hoge.Hello)
         var app = new Vue({
             el: '#app',
             data: {
                 greeting: 'こんにちは',
             },
         })
        </script>
    </body>
</html>

「こんにちは World!」と表示される。

JavaScriptでapp.greeting="〜"と設定すると「World!」の前の文字列を変更できる。

HTML全体をマルっとVueアプリ

src/App.vueを作成:

<template>
<hello :greeting="greeting"></hello>
</template>

<script>
import Hello from './Hello'
export default {
    name: 'app',
    components: {
        'hello': Hello,
    },
    data: function() {
        return {
            greeting: 'はろー'
        }
    },
}
</script>

src/index.js を変更:

import Vue from 'vue'
import App from './App'
new Vue({
    el: '#app',
    components: { App },
    template: '<App/>',
})

index.html はこんな感じ:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="app"></div>
        <script src="dist/hello.js"></script>
    </body>
</html>

yarn run webpack 後に index.html を表示すると「はろー World!」と表示される。

んー、見よう見まねすぎて全然理解できてない…。