図書館合金 Part 2

programming and books, music etc.

既存のアプリへの vue.js の組み込み

javascript programming 
<div id="app">
    <p>{{text}}</p>
</div>

ファイル名 app.jsとして以下の内容。

var Vue = require("vue");
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

基本的にはこれだけのソースでとりあえず動作確認ができるのだけど、webpackとか使うのでいろいろ障害がある。

まずは最低限、vue.jsをインストールしておかないといけないので、package.jsonに

  "devDependencies": {
    "vue": "*"
  }

と書くか、あるいは直接

npm install vue --save-dev

などとやる。ここまでは問題ないと思うが。 webpack.config.js に以下のように追記する。

module.exports = {
  resolve: {
      alias: {
        vue: 'vue/dist/vue.js'
      }
  }
};

これを忘れると、

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

というエラーが出る。

そして、実際にhtmlから読み込むためのファイルを作る。 ファイル名bundle.jsとして、wbpackで合体さす。

webpack app.js bundle.js

で、jsをHTMLの中のどこで読み込むかというのも重要で、

上の方で読み込んだりすると、

[Vue warn]: Cannot find element: #app

というようなエラーが出る。

タグの上で読み込む。

<html>
    <body>
        <div id="app">
            <p>{{text}}</p>
        </div>
        <script src="bundle.js"></script>
    </body>
</html>

Vue.js 2 Cookbook

Vue.js 2 Cookbook