phoenix使用vue--单独js（不使用app.js）
Posted 幽谷清水
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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> <!-- /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）的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Laravel Mix 将 Vue 块文件放在 public/js 中？
如何在vue.js项目的main.js文件中导入js类并在所有组件中使用它而不是在每个组件中导入？