備忘録

備忘録

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. 実行結果

f:id:kagasu:20170724082119p:plain

4. my-project/src/components/Hello.vue を編集する
data () {
  return {
    msg: 'helloworld'
  }
}
5. 実行結果

helloworldに変わった。
f:id:kagasu:20170724082315p:plain