实际中不能都在一个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>