標籤：
實際中不能都在一個js裡
api.js
app.js
admin.js －－vue 後台
記錄下方法
static--admin－－hello.js
import "phoenix_html"import Vue from "vue";new Vue({ el: "#hello-world", data: { message: "Hello World" }});
brunch-config.coffee
exports.config = files: javascripts: joinTo: ‘js/vendor.js‘: /(^node_modules\/phoenix|^node_modules\/phoenix_html|^node_modules\/vue)/ ‘js/app.js‘: /(^web\/static\/app)/ ‘js/admin.js‘: /(^web\/static\/admin)/ stylesheets: joinTo: ‘css/app.css‘ templates: joinTo: ‘js/app.js‘ conventions: assets: /^(web\/static\/assets)/ paths: watched: [ ‘web/static‘ ‘test/static‘ ] public: ‘priv/static‘ plugins: babel: ignore: [ /web\/static\/vendor/ ] modules: autoRequire: ‘js/app.js‘: [ ‘web/static/app/app‘ ] npm: enabled: true whitelist: [ ‘phoenix‘ ‘phoenix_html‘ ‘vue‘ ]
app.html.eex
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Hello Ass2!</title> <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>"> </head> <body> <div class="container"> <header class="header"> <nav role="navigation"> <ul class="nav nav-pills pull-right"> <li><a href="http://www.phoenixframework.org/docs">Get Started</a></li> </ul> </nav> <span class="logo"></span> </header> <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p> <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p> <main role="main"> <%= render @view_module, @view_template, assigns %> </main> </div> <!-- /container --> <script src="<%= static_path(@conn, "/js/vendor.js") %>"></script> <script src="<%= static_path(@conn, "/js/admin.js") %>"></script> <script> require(‘web/static/admin/hello‘); </script> </body></html>
index.html.eex
<div id="hello-world"> {{message}}</div>
phoenix使用vue--單獨js（不使用app.js）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
