实际中不能都在一个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. Xcode10 libstdc++.6.0.9.tbd移除引起的错误

    /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS.sdk/u ...

  2. 基于CAS操作的非阻塞算法

    非阻塞算法(non-blocking algorithms)定义        所谓非阻塞算法是相对于锁机制而言的,是指:一个线程的失败或挂起不应该引起另一个线程的失败或挂起的一种算法.一般是利用硬件 ...

  3. 简述ARP请求过程(同一子网和不同子网)

    1. 同一子网 主机A在准备构造链路层以太网帧头时,首先根据目的IP去查找ARP表,如果找到对应项,则直接得到目的MAC地址,如果没有查到才执行上面所说的ARP广播请求.这样做是为了最大限度地减少广播 ...

  4. Java之集合(九)LinkedHashMap

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7367525.html 1.前言 前一章对Map中的HashMap进行了讲解(虽然只详细介绍了一下红黑树的部分), ...

  5. 数据输入——生成你需要的echart图(堆积柱状图、扇形图、嵌套环形图)

    最近论文需要一些比较直观的图表, 发现echart做出来的图还是比较美观的,这里介绍如何修改数据生成你需要的echart图. 1.堆积柱状图: http://echarts.baidu.com/exa ...

  6. 【C#小知识】C#中一些易混淆概念总结(四)---------解析Console.WriteLine() 分类： C# 2014-02-05 17:18 1060人阅读 评论(0) 收藏

    目录: [C#小知识]C#中一些易混淆概念总结 [C#小知识]C#中一些易混淆概念总结(二) [C#小知识]C#中一些易混淆概念总结(三) ------------------------------ ...

  7. log4net udp

    官方文档: http://logging.apache.org/log4net/release/config-examples.html 配置: <?xml version="1.0& ...

  8. JVM调优一些相关内容

    JVM调优工具 Jconsole,jProfile,VisualVM Jconsole : jdk自带,功能简单,但是可以在系统有一定负荷的情况下使用.对垃圾回收算法有很详细的跟踪.详细说明参考这里 ...

  9. IRing项目开发

    最近在做一个应用,名字我把它命名为IRing. 这是一款管理手机铃声的软件,主要目的是将白天和晚上的铃声设置进行区分,为用户提供方便.

  10. Oracle 相关查询

    --创建用户 create user zzg identified by zzg123; --修改用户的密码 alter user zzg identified by unis; --所有用户所在的表 ...