什么是 pue-loader
pue-loader 是一个 webpack loader，可以将 vue 单文件组件（.vue 文件）解析成单独的 template、script、style，并转化成 JavaScript 对象返回。
pue-loader 主要功能
- 将 .vue 文件转化成单独的 template、script、style，方便后续处理和维护
- 支持 TypeScript，可将 .vue 文件中的 script 部分使用 TypeScript 编写
- 支持通过 options 配置自定义 template、script、style 的解析方式
pue-loader 的使用
安装 pue-loader
在项目根目录下，执行以下命令：
npm install --save-dev pue-loader
配置 webpack
在 webpack.config.js 中，增加如下配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-- -- ---- --
-
----- ---------
------- -------------
--
--
--
--配置 pue-loader
pue-loader 提供了一些选项，用于自定义解析方式。在 loader 配置中增加 options，可进行如下配置：
-- -------------------- ---- -------
-
-- - -------- --- ------ --
--------- -----
-- -- ----------
----------- -----
-- --- -------- ------- --- --
--------- -
------- -------------------
--
-- --- ------ ------- ----- --
------- -
------- ---------------
-------- ---
--
-- --- ----- ------- ---- --
------ -
------- --------------
-------- ---
--
-使用示例
以下是一个使用 pue-loader 的示例：
-- -------------------- ---- -------
----------
---- --------------
----- --- ------
------
-----------
------- ----------
------ --- ---- ------
------ ------- ------------
------ -
------ -
---- ------- --------
--
--
---
---------
------ ------------
------ -
- -
------ ----
-
-
--------使用 pue-loader 后，会将该文件转化成如下对象：
{
template: '<div class="hello">\n <p>{{ msg }}</p>\n </div>\n',
script: 'import Vue from \'vue\';\n\nexport default Vue.extend({\n data() {\n return {\n msg: \'Hello, world!\',\n };\n },\n});\n',
style: '.hello p {\n color: red;\n}\n',
}最终，可以在组件中使用这些对象，如下：
-- -------------------- ---- -------
------ --- ---- ------
------ ----------- ---- --------------------
----------------------------- -
--------- ---------------------
------ -
------ -
---- ------- --------
--
--
-------- -
------ ------------------------------
--
------- --------------------
---总结
通过本文的介绍，我们了解了 pue-loader 是什么以及如何使用它。pue-loader 的存在，可以方便我们将 .vue 文件转化成 template、script、style 三个部分，以便后续处理和维护。同时，使用 pue-loader 也可以支持 TypeScript，以及自定义解析方式，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557ba81e8991b448d4c48