实际中不能都在一个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. day 49 数据分析, 数据聚合 F 查询 Q 查询

    6.聚合查询和分组查询 1.聚合查询aggregate 我们先通过一个例子来感受一下吧. 1 2 3 # 计算所有图书的平均价格 books = models.Book.objects.aggrega ...

  2. linux，修改文件夹权限

    chmod -R 777 dist/ chown windseek:staff dist/   改变dist的权限到staff组里的windseek用户下   alias ll=`ls -al`   ...

  3. php5数组与php7数组区别

    http://ju.outofmemory.cn/entry/197064 http://www.fzb.me/2015-9-16-php7-implementation-hashtable.html ...

  4. Rsync备份服务

    一.Rsync 原理图 二.Rsync 原理描述 2.1:什么是Rsync Rsync是备份的一款软件,它可以实现全量备份.增量备份,也可以在不改变内容.属性的情况下进行同步备份,端口默认是873 2 ...

  5. 四、CLR执行程序集中代码和IL代码简介

    三.加载公共语言运行时中介绍了在安装了.Net Framework中加载公共语言运行时,公共语言运行时加载程序集的过程.以及通过vs stdio设置源码编译的目标平台的过程. 本问主要介绍公共语言加载 ...

  6. h5 端图片上传

    1.upload.js (function($) { $.extend($.fn, { images : new Array(), initImages:function (images) { $.e ...

  7. Linux的shell script

    Linux的shell script //编辑shell: vi a.sh //子进程运行shell sh a.sh //主线程运行shell source a.sh 相关例子: #!/bin/bas ...

  8. jquery.lazyload插件实现图片延迟加载

    jquery.lazyload是一个实现图片延迟加载的jQuery 插件,它可以延迟加载长页面中的图片.在浏览器可视区域外的图片在初始状态下不会被载入,直到用户将页面滚动到它们所在的位置. 1.引入j ...

  9. C/C++ -- Gui编程 -- Qt库的使用 -- 信号与槽的关联

    Qt信号与槽的三种关联方法:1.设计界面关联,编辑信号/槽,自动关联 2.手动关联(1).头文件中定义槽 -----mywidget.h----- #ifndef MYWIDGET_H #define ...

  10. C/C++ -- Gui编程 -- Qt库的使用 -- Qt编码问题

    1.直接使用QObject::trUtf8("中文字符串") 2.头文件<QTextCodec>QTextCodec::setCodecForTr(QTextCodec ...