phoenix使用vue--单独js（不使用app.js）

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

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