npm 包 vue-template-plugin 使用教程

什么是 vue-template-plugin

vue-template-plugin 是一个用于在 Vue.js 单文件组件中创建只能在开发时使用的“开发时”模板变量的 webpack 插件。它可以帮助开发人员从繁琐的手动替换过程中解放出来。

安装

你可以使用 npm 从公共 registry 中安装 vue-template-plugin：

npm install vue-template-plugin --save-dev

使用

首先，在 webpack 配置文件的 plugin 中添加 vue-template-plugin :

const VueTemplatePlugin = require('vue-template-plugin');
const webpackConfig = {
  plugins: [
    new VueTemplatePlugin()
  ]
};

其次，在组件中使用开发时模板变量：

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

在这个示例中，我们使用了 vue-template-plugin 创建了一个名为 $dev 的对象，在编写组件时可以用它做出一些开发时的显示控制。

在运行 webpack 打包之后，在测试或者开发过程中，Webpack 会替换变量，可以通过以下方法去访问：

// 在 VueComponent 实例中
this.$dev.platform
// 在模板中
{{$dev.platform}}

vue-template-plugin 支持数组或者对象两种方式，你可以在配置中传递一个数组或者一个对象来定制化自己的模板变量控制：

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

在你的组件中，你可以通过这样的方式快速使用：

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

当你运行 npm run build 打包之后，vue-template-plugin 将会替换 $dev 中的变量，如果你使用了数组方式，那么这些变量将会被轮流地进行替换。

在 源码/浏览器DevTools中 使用

vue-template-plugin 支持在源代码和浏览器 DevTools 中使用模板变量，你可以通过配置 window.VUE_TEMPLATE_DEV 来使用：

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

当你在运行项目的时候，如果 DevTools 打开了，那么在 VUE 组件中 $dev 对象的变量将会自动被注入到 vue 实例中。

总结

vue-template-plugin 为我们提供了一种在编写组件时，提高编写效率的方法，尤其是在一些开发人员需要不断手动替换和切换开关的场景下，例如：开发环境和生产环境，不同平台的支持等等。同时，vue-template-plugin 支持自定义数组和对象的方式，你可以快速且自由地去控制自己的组件。

我们建议您可以通过 vue-template-plugin 进一步的提高您自己在开发时的效率，将更多的精力放在核心的业务关键点上。

示例

您可以通过以下链接查看 vue-template-plugin 的示例代码：

• GitHub 示例链接

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067354890c4f72775839c0