实际中不能都在一个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）的更多相关文章

  1. 小程序公用js提取到app.js中调用的实例

    index.wxml: <view "> <text>{{page}}</text> </view> <view "> ...

  2. 小程序-调用公共js对象方法/ app.js

    在小程序中,如果在子页面想调用共公js的方法,需先在子页面js中先实例化app:具体过程如下 子页面js: 1 2 3 4 5 6 7 8 //调用公共js对象以便调用其方法 var app = ge ...

  3. 解决使用vue打包时vendor文件过大或者是app.js文件很大的问题

    这篇文章主要介绍了使用vue打包时vendor文件过大或者是app.js文件很大问题的解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 第一次使用vue2.0开发,之前都是用的angu ...

  4. App.js实现使用js开发app的应用，此文是中文文档

    在阅读前,在此说明下,本人英文一直不好,所以该文档是借助翻译工具翻译的,阅读起来可能有点不好,请各位谅解,哪位大神有标准的中文文档请分享下 Github下载地址:https://github.com/ ...

  5. 微信小程序 --- 设置app.js/page.js参数的方法

    设置 app.js 文件: //app.js App({ globalData: { is_login:false, userInfo:{} } }) 设置gloabalData的方法: // 定义a ...

  6. 通过const app = getApp()实现在 page 页面获取 app.js 定义的属性globalData,即获取全局数据

    App.js是项目的入口文件,页面的 page.js 文件会覆盖 app.js文件, App.js文件里面的一些方法: onLaunch : function(){}:这个方法是当小程序加载完毕后就执 ...

  7. js模块化开发——require.js的用法详细介绍(含jsonp)

    RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签脚本加载步骤.可以用它回事.优化代码,但其主要的目的还是为了代码的模块化.它鼓励在使用脚本以moudle ...

  8. vue.js移动端app实战2：首页

    貌似有部分人要求写的更详细,这里多写一点vuel-cli基础的配置 什么是vue-cli? 官方的解释是:A simple CLI for scaffolding Vue.js projects, 简 ...

  9. vue.js移动端app实战2

    貌似有部分人要求写的更详细,这里多写一点vuel-cli基础的配置 什么是vue-cli? 官方的解释是:A simple CLI for scaffolding Vue.js projects,简单 ...

随机推荐

  1. 将一个List拆分为n份的方法

    public static void main(String[] args) { List<Integer> taskList = new ArrayList<>(); for ...

  2. HTML 遍历

    HTML 遍历 HTML基本格式: 1.下行遍历: 属性 说明 contents 子节点的列表,将所有儿子节点存入列表 children 子节点的迭代类型,与.contents类似,用于循环遍历儿子节 ...

  3. 6.关于Xamarin Android对APK包大小的处理

    降低学习成本是每个.NET传教士义务与责任. 建立生态,保护生态,见者有份. 对于apk 包的大小大家都是很敏感的,虽然现在安卓手机的性能和存储越来越厉害了.本着能少一点是一点的态度,我们还是要深入理 ...

  4. 剑指offer二十三之二叉搜索树的后序遍历序列

    一.题目 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 二.思路 1.二叉搜索树又称二叉排序树(Binar ...

  5. Vundle，Vim 的 Bundle(转)

    长久以来,我管理 Vim 配置的方式都非常原始—— zip 打包,然后发到邮箱上.偶尔会发生忘记备份,或者配置混淆的状况,不过由于懒筋发作,竟然这个方案就这么用了两年. 终有一天,我觉得这个方法太笨了 ...

  6. IntelliJ IDEA使用心得之快捷键篇

    关于IDEA快捷键的文章有很多,因此,我只对经常使用快捷键进行介绍. 因为我的第一款IDE是eclipse,因此我是根据eclipse的快捷键习惯来重置IDEA的快捷键. 点击进入IDE设置界面:

  7. YAOLEI

    http://www.cnblogs.com/skyblue/p/3356933.html

  8. ZooKeeper：架构和算法

    ZooKeeper主要用来解决分布式应用场景中存在的一些问题,如:统一命名服务.状态同步服务.集群管理.分布式应用配置管理等. 它支持Standalone模式和分布式模式,在分布式模式下,能够为分布式 ...

  9. json对象按时间排序

    //正序var data = {"rows": [{"name": "张三","time": "2011/4/ ...

  10. BATJ面试必会之 Spring 篇(一）

    译者:深海 校对:方腾飞 出自并发编程网 – ifeve.com 目录 Spring 概述 依赖注入 Spring beans Spring注解 Spring数据访问 Spring面向切面编程(AOP ...