スズキ学習ノート

覚え書き走り書き@s12bt

Vue.js

npm install & npm run dev

vuejs.org

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

f:id:s12bt:20161120221616p:plain

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>mirror</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

jsどこで呼んでるんだろう?と思ったら、Webpackが色々やってくれているらしい。

localhost:8080

f:id:s12bt:20161120222009p:plain

app.jsが差し込まれている。 app.js開くと、webpackBootstrapってコメントが見えるので、そういうものだとしてとりあえず置いておきたい。

app.js
/******/ (function(modules) { // webpackBootstrap
/******/    var parentHotUpdateCallback = this["webpackHotUpdate"];

main.js

projectDir/src/以下にjsファイルがmain.jsしかなかったので、これだろうと思って読む。

import Vue from 'vue'
import App from './App'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})
  • Vue本体を呼ぶ
  • 使用するコンポーネント?(App)を呼ぶ
  • Vueするよ!
    • #appの場所に(index.html内)
    • template: (importした名前)
    • components: (importした名前)

templateとcomponentよくわからないけど、とりあえずそういうものだとしておいとく