phoenix使用vue

phoenix使用vue

• mix phoenix.new ass2
• Fetch and install dependencies? [Yn] y
• 修改 package.json

  {
  "repository": {},
  "dependencies": {
    "babel-brunch": "~6.0.0",
    "brunch": "~2.1.3",
    "clean-css-brunch": "~1.8.0",
    "css-brunch": "~1.7.0",
    "javascript-brunch": "~1.8.0",
    "phoenix": "file:deps/phoenix",
    "phoenix_html": "file:deps/phoenix_html",
    "uglify-js-brunch": "~1.7.0",
    "vue": "^1.0.17"
   }
  }

增加 "vue": "^1.0.17"

• 修改 brunch-config.js

  npm: {
    enabled: true,

    whitelist: ["phoenix", "phoenix_html", "vue"]
  }

• 页面
• page -index.html

    <div id="hello-world">
    {{message}}
   </div>

• app.js

  import Vue from "vue";
  new Vue({
  el: "#hello-world",
  data: {
    message: "Hello World"
  }
  });

• cd ass2

• npm install

• mix phoenix.server

• 启动浏览器
  
  http://localhost:4000/

看到 Hello World 就对了

看到 {{message}} 好好检查吧 呵呵