npm 包 weex-vue-loader-ex 使用教程

weex-vue-loader-ex 是一个 Vue 文件编译器，能够将 Vue 文件编译成在 Weex 平台上运行的 JavaScript 文件，因此在 Weex 平台上开发时可以使用 vue 文件来开发，使用 weex-vue-loader-ex 就可以将 vue 文件转换成 canjs 文件。

安装

weex-vue-loader-ex 可以通过 npm 安装。

--- ------- ------------------ ----------

使用方法

使用 weex-vue-loader-ex 编译 vue 文件并生成 canjs 文件，需要在 webpack.config.js 文件中增加 vue-loader 和 weex-vue-loader-ex。

----- ---- - ---------------
----- - --------------- - - ---------------------
----- --------------- - -----------------------------

-------------- - -
  ------ ------------------
  ------- -
    ----- ----------------------- --------
    --------- ----------
  --
  ------- -
    ------ -
      -
        ----- ---------
        ---- -
          -
            ------- ------------
          --
          -
            ------- ---------------------
            -------- -
              --------- ------- -------
            -
          -
        -
      -
    -
  --
  -------- -
    --- -----------------
  -
-

在代码中定义 vue 文件内容：

----------
  -----
    -------- ------- ---------
  ------
-----------

--------
  ------ ------- -
    ---- -- -
      ------ -
        -------- ------ ------
      -
    -
  -
---------

执行编译：

------- -------- -----------------

生成的 canjs 文件：

----------------------------------------- ----------------- -------- ------- -

  ---- --------

  --- ---- - ---------------
  --- ----- - -----------------------------
  --- ----------- - -----------------------
  --- ------------ - ------------------------------------
  --- -------- - -----------------------------
  --- --------- - ----------------------------

  -------- --------------------------- - ------ --- -- -------------- - --- - - -------- --- -- -

  --- --- - ----------------------
    ----- -------- ------ -
      ------ -
        -------- ------ ------
      --
    --

    -------- --
  ---

  ------ - --------
  --- ------------------------------------
  -- ---------------------- -
    ------------------------- --------
  - ---- -
    -------------- - ----
  -
----
----------------------------------- ------------------------------------ -------- --- - ------ -- ---

参数说明

weex-vue-loader-ex 的参数如下：

  • provides 功能同 webpack 里的 ProvidePlugin，提供模块在运行时模块的变量或模块
  • template 是否使用模版

常见问题

编译失败

如果编译失败，可以先尝试升级 webpack 和 weex-vue-loader-ex 版本。如果仍然不行，可以到 github 库里查看 issues，或者在群里寻求帮助。

总结

weex-vue-loader-ex 是一个能够将 vue 文件编译成在 Weex 平台上运行的 JavaScript 文件的 Vue 文件编译器，是在 Weex 开发中使用 vue 文件的必备工具。希望本文对大家有所帮助。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056cf781e8991b448e6c02

阅读全文

猜你喜欢

  • npm 包 @as-com/pson 使用教程

    前言 在现代的前端开发中，由于前端技术的复杂性和功能的不断拓展，使用工具和框架已经不仅仅是方便的选择，而与整个前端的开发和架构密不可分。本文主要讲解如何使用 npm 包 @as-com/pson 解析...

    3 年前
  • npm 包 generator-mocha-testable-class 使用教程

    在前端开发中，测试是非常重要的一部分。好的测试代码可以保证我们的代码稳定、可靠。然而，编写测试代码是一件费时费力的事情。为了提高开发效率，我们可以使用自动化工具，自动生成测试代码。

    3 年前
  • npm 包 threejs-serialize-animation 使用教程

    1. 引言 threejs-serialize-animation 是一款针对 three.js 渲染引擎的动画序列化工具，它可以方便地将 three.js 中的动画序列化为 JSON 格式，也可以将...

    3 年前
  • npm 包 allthedocs 使用教程

    allthedocs 是一个广泛覆盖多种编程语言和技术的文档聚合工具，可以通过关键字搜索来找到相应的文档。它具有高度可定制性和国际化支持，是前端开发必不可少的文档工具之一。

    3 年前
  • npm 包 atscntrb-bucs320-divideconquerpar 使用教程

    在前端开发中，使用一些成熟的 npm 包能够大大提高开发效率。本文将介绍一个基于分治算法的 npm 包 atscntrb-bucs320-divideconquerpar 的使用方法，希望能够为前端开...

    3 年前
  • npm 包 stk-lang 使用教程

    前言 在前端开发中，我们常常需要用到各种语言的代码片段，比如 JavaScript、HTML、CSS、JSON 等等，而有时候我们需要在这些代码中嵌入一些动态的内容，比如变量、表达式等等。

    3 年前
  • npm 包 soft-require 使用教程

    现在的前端开发环境日趋庞大复杂，我们需要使用大量的第三方库和工具来辅助我们的开发工作，其中 npm 包是我们使用得最多的一种工具。在使用 npm 包的过程中，我们不可避免地会遇到一些依赖关系或版本兼容...

    3 年前
  • npm 包 platzomalmz 使用教程

    简介 在前端开发中，我们常常需要进行字符串的处理。platzomalmz 就是一个用于字符串处理的 npm 包，它提供了一系列好用的方法，帮助我们方便地进行字符串格式转换和判断。

    3 年前
  • npm 包 react-construct 使用教程

    前言 React 构建一个组件非常容易，但是当我们需要在一个组件中动态地生成多个子组件时，就需要一个更加灵活的解决方案。 这就是 react-construct 诞生的原因。

    3 年前
  • npm 包 zinky-render 使用教程

    在前端开发中，我们经常会需要用到可视化图表来展示数据或者提示信息。而 zinky-render 就是一款非常实用的 npm 包，可以方便地帮助我们快速生成各种类型的图表。

    3 年前
  • npm包@wearegenki/ui-build-postcss 使用教程

    简介 在前端开发过程中，postcss 可能是使用频率较高的 CSS 处理器之一。而使用 @wearegenki/ui-build-postcss 这个 npm 包可以让我们在构建 UI 库的过程中更...

    3 年前
  • npm包jg-spotify-wrapper使用教程

    什么是jg-spotify-wrapper jg-spotify-wrapper是一个npm包，它提供了一组简单的API，可以帮助我们轻松地在前端应用程序中使用Spotify Web API。

    3 年前
  • npm 包 react-calendar-timeline-extended-drop 使用教程

    介绍 react-calendar-timeline-extended-drop 是 React 开发的一个时间轴组件，支持拖拽、缩放等交互操作，非常适合用于展示时间相关的数据，如日程安排、时间线等。

    3 年前
  • npm 包 tslint-custom 使用教程

    在前端开发中，代码规范是非常重要的一环，能够有效地提高代码的可维护性和可读性。而 tslint-custom 就是一款非常实用的 npm 包，它能够定制化地使用 TSLint 规范。

    3 年前
  • npm 包 @toba/tslint 使用教程

    简介 @toba/tslint 是一个基于 TypeScript 语言的静态代码分析工具，可帮助开发者在编码过程中自动检测代码规范的遵守情况，提高代码质量和可维护性。

    3 年前
  • npm 包 xrpmon 使用教程

    在前端开发中，经常需要使用一些 npm 包来帮助我们构建应用程序、管理依赖关系等。其中，一个非常有用的 npm 包是 xrpmon，可以帮助我们实时监控 XRP 的价格和交易量。

    3 年前
  • npm 包 ElasticWatch 使用教程

    ElasticWatch 是一个优秀的 ElasticSearch 监控工具，可以帮助开发者监控 ElasticSearch 集群的状态，获取集群的性能数据，方便定位问题。

    3 年前
  • npm 包 image-overlayer 使用教程

    在前端开发中，经常需要使用图片来吸引用户或者进行图像处理。而 image-overlayer 这个 npm 包可以帮助我们更方便地操作图片，实现图像覆盖等效果。 什么是 image-overlayer...

    3 年前
  • npm 包 ng-gun 使用教程

    简介 ng-gun是一个基于Angular的图形数据库分布式网络库，它可以将一个Angular应用程序转化为一个分布式网络，使得用户可以在不受中心化服务器的局限下实现去中心化的应用程序。

    3 年前
  • npm 包 thinbus-srp 使用教程

    前言 在计算机网络中，安全是非常重要的。而其中最关键的就是用户身份的验证。一般而言，我们使用账号密码的方式来验证用户身份。但如果我们的账号密码被盗了，那么别人就可以以我们的身份来进行各种操作。

    3 年前

相关推荐

    暂无文章