程序员经验分享-hwhale

gulp - 在没有“require”的情况下编译 Vue 组件

2024-02-08

我试图了解如何使用 Gulp 构建组件。此时，我有一个如下所示的 Vue 组件：

我的组件.vue

<template>
  <div class="foo">
  </div>
</template>

<script>
  export default {
    data() {
      return {};
    },

    props: {
      message: {
        type: String,
        default: ''
      }
    },

    methods: {
      display: function() {
        alert(this.message);
      }
    },
  };
</script>

我正在通过 Gulp 构建这个组件。我的 gulpfile.js 有以下内容：

gulpfile.js

const gulp = require('gulp');
const vueify = require('gulp-vueify2');

gulp.task('default', ['build']);

gulp.task('build', function() {
    return gulp.src('./src/my-component.vue')
        .pipe(vueify())
        .pipe(gulp.dest('./deploy'))
    ;
});

当我运行它时，我的“deploy”目录中有 my-component.js。当我查看该文件时，我在 my-component.js 顶部看到以下内容

var __vueify_style_dispose__ = require("vueify/lib/insert-css")

我正在尝试将组件加载到 HTML 文件中，如下所示：

<script type="text/javascript" src="./my-component.js"></script>

脚本加载。但是，控制台中出现错误：

Uncaught ReferenceError: require is not defined

我如何构建组件以便require未使用？有没有办法做到这一点？如果是这样，怎么办？


好吧，我确实找到了一些不需要任何 require 模块的东西。 这有点难看，所以你可能不喜欢它。

Step 1:将 CSS 提取到gulpfile.js.

const gulp = require('gulp');
const vueify = require('gulp-vueify2');

gulp.task('default', ['build']);

gulp.task('build', function() {
    return gulp.src('./src/my-component.vue')
        .pipe(vueify({
            extractCSS: true,
            CSSOut: './deploy/bundle.css'
        }))
        .pipe(gulp.dest('./deploy'))
    ;
});

Step 2:你的组件，my-component.vue.

<template>
  <div class="foo">
      World
  </div>
</template>

<script>
  module.exports = {
      data() {
          return {};
      },

      props: {
          message: {
              type: String,
              default: ''
          }
      }
  };
  // Well, hu, you have no module so just keep your component somewhere.
  window.vueComponents['my-component'] = module.exports;
</script>

<style>
    .foo {
        color: red;
    }
</style>

Step 3: The index.html.

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/bundle.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
        <script>
            window.module = {}; // Yeah just avoid the error as you have no module
            window.vueComponents = {}; // Global register of your components...
        </script>
        <script src="./my-component.js"></script>
    </head>

    <body>
        <div id="app">
            <div>
                {{ foo }}
                <my-component></my-component>
            </div>
        </div>

        <script>
            new Vue({
                // Here you give your component to your vue instance
                components: window.vueComponents, 
                data() {
                    return {
                        foo: 'Hello'
                    };
                },
                el: '#app'
            });
        </script>
    </body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

Gulp

vuejs

gulp - 在没有“require”的情况下编译 Vue 组件 的相关文章

随机推荐

  • 在iOS 5中，如何使用AudioSession来确保插入耳机时通过扬声器播放音频？

    void viewDidLoad super viewDidLoad NSString filePath NSBundle mainBundle pathForResource 1 ofType mp3 Convert the file p

  • Genymotion不会停止优化应用程序

    我尝试将 Genymotion 与 Android Studio 结合使用 以便可以测试应用程序 但每当我尝试启动模拟器时 它都会显示 Android 正在启动 正在优化应用程序 of 74 并且它会优化一段时间 最终它停止优化 但随后它只

  • 在 eclipse 中为项目生成 Ant 构建文件

    我有一个使用 eclipse 用 Ja va 编写的项目 我想为其生成一个 Ant 构建文件 如何做呢 我经常需要使其与源代码保持同步 以便在修改项目结构时可以将其与代码一起提升到公共存储库 我很抱歉问这样一个愚蠢的问题 我浏览了各个论坛

  • JS：如何处理从 API url 返回的 400 Bad Request 错误

    仍然很缺乏经验 我正在尝试错误处理 400 Bad Request 我有一个带有搜索栏的网站 然后 输入到搜索栏中的值将被放入返回对象的 api url 中 每当输入拼写错误的搜索值时 站点的控制台都会针对 api url 返回 400 错

  • 在 C 中使用变量文件名读取多个具有相似名称的文件？

    我有多个名为sensor0 txt sensor1 txt sensor2 txt 等的文件 我需要打开这些文件 用它们进行计算 并将它们打印在屏幕上 所以我想到了类似的事情 for i 0 i lt N Number of files i

  • 通过JTAG恢复STM32 MCU磨掉的标记

    我有一块可能带有 STM32 MCU 的板 我想为该板制作定制固件 因为库存板有很多问题 不幸的是 电路板制造商很友善地磨掉了所有标记 有没有办法通过 jtag 获取设备 系列 ID 并将其交叉引用到型号 我能找到的一切都是关于获取芯片的唯

  • 非常大的非线性最小二乘优化的收敛

    我正在尝试解决以下问题 我有很多 80000 正在生长的器官表面斑块 我随着时间的推移 18 个时间点 测量它的每个面积 并希望拟合一条增长曲线 双逻辑模型 例如 只是两个逻辑函数 bcs 的总和 在观察期 我有框约束来确保指数项不会爆炸

  • 如何在 MongoDB 中执行 SQL Join 等效操作？

    如何在 MongoDB 中执行 SQL Join 等效操作 例如 假设您有两个集合 用户和评论 我想提取 pid 444 的所有评论以及每个集合的用户信息 comments uid 12345 pid 444 comment blah ui

  • 使用 Google Play 提供的上传密钥签署 APK

    我正在尝试了解如何在使用 Google Play 应用签名时将应用上传到 Google Play 这是我所做的 创建了一个应用程序 使用 keytool exe 为该应用程序生成密钥 已将应用上传至 Google Play 已注册 Goog

  • 在图的顶层绘制圆圈

    我正在制作一个图形 试图在组合颜色图和等高线图的顶部绘制一个圆圈 圆圈不断地绘制在轮廓下方而不是轮廓上方 参见下图 我尝试重新排序如何调用 imshow contour 和 Circle 看看是否能让圆圈显示在顶部 但我没有任何运气 有没有

  • .NET 3.5 是媒体中心插件的合理先决条件吗？

    我们有一个开源媒体中心插件 目前它的下载大小只有区区一兆字节 如果我将插件更改为需要 NET 3 5 用户可能需要下载197 megs http www west wind com weblog posts 292203 aspx只是为了能

  • Django：子查询的注释

    我正在尝试注释一个查询集Station与id最近邻的Station使用 Django 2 0 3 和 PostGIS GeoDjango 功能 简化版Station model class Station models Model name

  • 如何将整个 python 解释器打包到 Android APK 中？

    我了解 SL4A 以及如何在 Android 中运行 Python 脚本 我需要知道如何将整个 Python 解释器打包到我的 APK 中 这样我的最终用户就不必在运行我的应用程序之前下载并安装 SL4A Thanks 尝试看看kivy o

  • 如何在Windows Phone 7.1中捕获解锁屏幕事件？

    如何捕获屏幕解锁事件 然后在 Window Phone 7 1 中屏幕解锁时从我的应用程序触发一些事件 您可以处理PhoneApplicationFrame Unobscured http msdn microsoft com en US

  • Firefox 中不遵循 SVG 的百分比变换来源，仅有时在 WebKit 中遵循

    我有这个蛋卷冰淇淋 SVG 图形 我想用一个transform origin of 50 100 中心底部 Firefox 声称遵守 即检查员记录了正确的transform origin 但实际上是围绕左上角进行变换 奇怪的是 WebKit

  • 使按钮一次仅打开一个窗口（通过关闭顶级窗口来启用按钮）

    I want NewWinButton一次只创建一个新窗口 这意味着如果 if NewWin winfo exists 1 NewWinButton config state disabled else NewWinButton confi

  • iOS7 UIScrollView 在状态栏下方显示偏移内容

    我正在开发我的应用程序以与 iOS7 配合使用 我有一个 UINavigationController 我正在推送一个 UIViewController 里面有一个 ScrollView 在scrollView 里面我有一个tableVie

  • Pygame，角色移动速度

    我是犹他大学的一名学生 正在使用 Pygame 进行一个项目 但遇到了一些小问题 我已经编写了整个游戏的代码 并且运行完美 但我希望我的角色在走过某些地形时减慢移动速度 例如 如果他 她走过沙砖 我希望他 她的速度减半 我无法自己解决这个问

  • 在 R6 类上实现 S3 调度的正确方法

    我有一个R6类 我想添加一个S3的方法 我发现的文档简要提到为了使用S3派送于R6你必须有class TRUE 但我找不到应该如何完成的示例 我确实凭经验看到 只需以以下形式编写 S3 方法s3generic r6class有效 但我想知道

  • gulp - 在没有“require”的情况下编译 Vue 组件

    我试图了解如何使用 Gulp 构建组件 此时 我有一个如下所示的 Vue 组件 我的组件 vue

热门标签