实际中不能都在一个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. iOS-AFNetworking参数和多文件同时上传【多文件上传】

    1. 前言 在项目开发中,我们经常需要上传文件,例如:上传图片,上传各种文件,而有时也需要将参数和多个文件一起上传,不知道大家的项目中遇到了没有,我在最近的项目中,就需要这样的一个功能:同时上传参数. ...

  2. 纯css实现不固定行数的文本在一个容器内垂直居中

    项目中要实现的效果如图: html代码 及 css代码: <!DOCTYPE html> <html> <head> <meta charset=" ...

  3. 利用Django做一个简单的分页页面

    views代码: from django.shortcuts import render from django.conf import settings from booktest.models i ...

  4. Swift的Guard语句

    与if语句相同的是,guard也是基于一个表达式的布尔值去判断一段代码是否该被执行.与if语句不同的是,guard只有在条件不满足的时候才会执行这段代码.你可以把guard近似的看做是Assert,但 ...

  5. 手机端布局，rem布局动态获取根字体大小

    手机端布局,rem布局动态获取根字体大小. 以下代码: //rem布局动态获取根字体大小 function remDynamicLayout(){ var $windowWidth = $(windo ...

  6. Matlab 基础

    命令行(Command Line) 1. help  格式:help  命令 2. cd 配合 Tab 使用 pwd: print current working directory,打印当前工作路径 ...

  7. 免密sudo su

    1.添加文件 /etc/sudoers.d/wsy_sudoers %wsy-sudoers ALL=(ALL:ALL) NOPASSWD:ALL 2.添加用户组 groupadd wsy-sudoe ...

  8. Css权重解析

    Css权重解析 关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下: spec ...

  9. MYSQL 中的日期操作（不包含跨年问题）

    先从一个简单的SQL说起 当前week的第一天:select date_sub(curdate(),INTERVAL WEEKDAY(curdate()) + 1 DAY): DATE_SUB() 函 ...

  10. tomcat启动(四)Catalina分析-server的init()方法

    上一回load()方法解析讲到xml解析完成. load()内部接下来会获取server getServer().setCatalina(this); 这个server从createStartDige ...