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

    #include<iostream> #include<stdio.h> #define MAXN 100 #define inf 1000000000 using names ...

  2. CAS优缺点

    cas优点:如一描述在并发量不是很高时cas机制会提高效率.cas缺点:1.cpu开销大,在高并发下,许多线程,更新一变量,多次更新不成功,循环反复,给cpu带来大量压力.2.只是一个变量的原子性操作 ...

  3. oauth三方登陆的原理

    一 说明 OAuth是由Blaine Cook.Chris Messina.Larry Halff 及David Recordon共同发起的,目的在于为API访问授权提供一个开放的标准(resful和 ...

  4. Java之集合(二十二)PriorityBlockingQueue

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7510799.html 1.前言 本章介绍阻塞队列PriorityBlockingQueue.这是一个无界有序的阻 ...

  5. Ajax关于readyState和status的讨论

    熟悉web开发的程序员想必对Ajax也不会陌生.现在已经有很多js框架封装了ajax实现,例如JQuery的ajax函数,调用起来非常方便.当然本文不打算讲框架的使用,我们将从Ajax的javascr ...

  6. 忘记mysql密码的解决办法--针对windows系统

    C:\Users\Administrator>cd C:\Program Files\MySQL\MySQL Server 5.5\bin C:\Program Files\MySQL\MySQ ...

  7. Android Library项目发布到JCenter最简单的配置方法

    前沿 网上的步骤看起来实在太麻烦,gituhb上偶然间看到的一个项目,经过实际验证确实可行.github连接:https://github.com/xiaopansky/android-library ...

  8. nginx添加多站点

    1.登陆服务器2.修改ngnix配置文件3.重启ngnix4.测试是否添加成功 修改/nginx/conf/nginx.confviminclude /alidata/server/nginx/con ...

  9. Python -- Gui编程 -- Tkinter的使用 -- 菜单与画布

    1.菜单 tkMenu.py import tkinter root = tkinter.Tk() menu = tkinter.Menu(root) submenu = tkinter.Menu(m ...

  10. OpenGL12-shader(GLSL)着色语言1（代码已上传)

    OpenGL着色语言(GLSL――OpenGL Shading Language)是用来在OpenGL中着色编程的语言, 也即开发人员写的短小的自定义程序,他们是在图形卡的GPU (Graphic P ...