介绍
vue-template-loader 是一个用于加载 Vue 单文件组件中的模板的 Webpack Loader。使用它可以让你在开发过程中更方便地分离出组件模板，让代码变得更加清晰易懂。
安装
使用 npm 安装：
npm install vue-template-loader --save-dev
使用
将 vue-template-loader 添加到 Webpack 的配置文件中：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
------- -------------
-------- -
-------- -
-- ---------- --- ------------------- -- ------- -------- -----
----------- ---------------------
-
-
-
-
-
-这里的关键是将 template 块交给 vue-template-loader 来处理。
示例
假设我们有一个名为 MyComponent.vue 的单文件组件，其内容如下：
-- -------------------- ---- -------
----------
---- ---------------------
------ ----- -------
----- ------- ------
------
-----------
--------
------ ------- -
------ -
------ -
------ ------- --------
-------- ----- -- -- ----- ------ -----------
-
-
-
---------在上述配置好的 Webpack 中，vue-template-loader 将会把 <template> 标签中的内容提取出来，生成一个新的模块，最终生成 JavaScript 代码：
-- -------------------- ---- -------
--- ------ - ---------- -
--- --- - ----
--- -- - ------------------
--- -- - ------------ -- --
------ --------- - ------------ -------------- -- -
-------- -----------------------------
-------- ---
------- ------------------------------
--
-此后，这个模板就可以像一个正常的 JavaScript 模块一样被导入和使用了：
import MyComponent from './MyComponent.vue' console.log(MyComponent.render)
总结
vue-template-loader 是一个十分方便实用的 Webpack Loader，在开发 Vue.js 单文件组件时能够帮助我们更好地分离出组件模板，使得代码更加清晰易懂。如果你正在开发 Vue.js 应用，不妨试试这个 npm 包吧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54411