前端开发者经常需要进行之前做过的工作，比如创建一些基础的模板、添加组件等等。而这些重复性工作会浪费开发者大量的时间和精力。因此，能够自动化处理这些工作的工具包具有非常高的价值。此处推荐一款行之有效的 npm 包——vue-xu-generate，它可以极大地减少我们的工作量。
vue-xu-generate 是什么？
vue-xu-generate 是一种将页面划分为页面和组件的脚手架工具，它可以非常方便地帮助我们生成新页面或组件。它可以自动地将文件组织好，创建相应的文件夹以及相应的文件，简化起来生成页面或组件的复杂程度。另外，vue-xu-generate 还可以用于生成有状态的 Vuex 模块。
安装
首先，请确保你在本地安装了 Node.js，其次，在你的项目目录下，运行以下命令：
--- ------- -- ---------------
此时，你已经安装了 vue-xu-generate。
使用
首先，你需要创建一个文件夹，用来存放所有的新的页面、组件和模块。我们以 /src 作为例子。
其次，运行以下命令：
-- --------------------- --------------- ---- -------------- --------------- --------- ------------------- --------------- ----------- ---------------------
其中，page 和 component 分别表示要生成新页面或组件，vuex-module 分别表示要生成一个 vuex 模块。
最后，输入完命令后，vue-xu-generate 会自动在 /src 中为你创建对应的文件夹和相应的文件，这样你就可以直接在代码中使用它们了。
深度学习
vue-xu-generate 可以根据一般性的情况，来生成相应的组件和页面，但是由于业务特殊性的不能很好地适应，所以我们需要定制化。这一部分的内容实际上是 vue-xu-generate 的核心思想，需要我们自己来学习并且改写代码。
vue-xu-generate 的脚本都在 /lib/generators 文件夹中，可以根据自己的需求，调整脚本模板中的逻辑和结构来生成适合自己的代码。如果你不需要某些文件，比如样式文件、测试文件等，可以直接在模板内容中去除对应的内容。
指导意义
vue-xu-generate 是一种非常优秀的工具，它的原理非常简单易懂，使用起来也非常方便，可以大大推动前端开发的进程。除了创建页面、组件，vue-xu-generate 还可以帮助我们创建 vuex 模块。而且，vue-xu-generate 还提供了自定义生成器的方法，可以根据我们的需求来定制生成器，并且为我们节省了大量的时间和复杂的代码编写工作。
示例代码
例如，我们要创建 login 页面和 login-form 组件，其对应的文件分别为 src/views/login.vue 和 src/components/login-form.vue。首先，创建一个 vue-xu-generate 的脚本，在 lib/generators 中，命名为 phoneix.js，脚本的内容如下：
----- - ------- ---- - - ----------------------------
-------------- - -
-------- -
-
----- ----------------
-------- --------- --
--------- ------- -- -
-- ------------------ -
------ -----
-
------ ------------
-
-
--
-------- -- -- -
---------------------------
-------------------------
------ -
-
----- ------
----- --------------------------------
------------- ----------------------------------
------------ -----
--
-
-
-然后，我们运行该脚本来创建新的页面和组件。
-- --------------------- --------------- ---- ----- --------------- --------- ----------
现在，我们已经成功创建了新的页面和组件，可以直接在代码中使用它们了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f8b238a385564ab6e2e