Vue.js + webpack で helloworld する

Ⅰ. はじめに

タイトルの通り「Vue.js + webpack で helloworld する」方法です。

Ⅱ. やり方

1. vue-cliのインストール

$ npm install -g vue-cli

2. Vue.js + webpack のテンプレートを使って初期化する

$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

3. 実行結果

4. my-project/src/components/Hello.vue を編集する

data () {
  return {
    msg: 'helloworld'
  }
}

5. 実行結果

helloworldに変わった。

Ⅲ. リリース版としてビルドする方法

以下のコマンドを実行するとdistディレクトリにファイルが生成されます。

npm run build

参考

https://github.com/vuejs-templates/webpack