vue 生成组件_Vue JS组件生成器

vue 生成组件

ue (Gue)

Vue js component generator.

Vue js组件生成器。

Features

特征

• 📜 Generate Vue component

  📜生成Vue组件

• 🧰 Generate test file for the component

  🧰生成组件的测试文件

• ⚙️ Dynamic path for component

  ⚙️组件的动态路径

• 📁 Configurable root directory for components and tests

  components用于组件和测试的可配置根目录

• 📝 Custom templates for components and test

  📝用于组件和测试的自定义模板

正在安装 (Installing)

Note that this package is published under name of vue-gue

请注意，此软件包以vue-gue名称发布

npm i -g vue-gue

入门 (Getting started)

Head over to root of your project in terminal, say you want to create a component named footer:

在终端中转到项目的根目录，说您想创建一个名为footer的组件：

gue footer

This will generate footer component in ./src/components/footer.vue

这将在./src/components/footer.vue生成footer组件

更改组件目录 (Change directory of component)

You can define a directory which you want your component to be generated in.

您可以定义要在其中生成组件的目录。

gue tab ./menu

This will generate tab component in ./menu/tab.vue

这将在./menu/tab.vue生成tab组件

Consider behavior of directory parameter when you have a config file and you don't. details For a consistent way to change root directory of components see config.

当您拥有配置文件而没有配置文件时，请考虑目录参数的行为。 详细信息有关更改组件根目录的一致方法，请参见config 。

生成测试文件 (Generate test file)

Now if you want a component and also it's corresponding unit test file you can do:

现在，如果您需要一个组件及其对应的单元测试文件，则可以执行以下操作：

gue footer -u

This will generate footer component in ./src/components/footer.vue and also a test file in ./tests/unit/footer.js

这将产生footer在组件./src/components/footer.vue并在测试文件./tests/unit/footer.js

To change any of these directories see config

要更改任何目录，请参阅config

用法 (Usage)

General usage is like:

一般用法如下：

gue <componentName> [directory] [options]

• <componentName> is mandatory.

  <componentName>是必需的。

• [directory] is optional, and is a relative path.

  [目录]是可选的，并且是相对路径。

  
  If you have a config file this will be a
  如果您有配置文件，这将是一个

  subdirectory of your componentRoot

  你的componentRoot的 subdirectory

  
  If you don't, then this will lead to generation of component in exact
  如果您不这样做，则将导致精确生成组件

  direcroty

  direcroty

• [options] are optional, only available option is -u which will generate test file.

  [选项]是可选的，只有可用的选项是-u ，它将生成测试文件。

配置文件 (Config file)

Gue accepts a config file to change default settings. In root directory of project make a file gue.json, and Gue will automatically recognize and use it.

Gue接受配置文件以更改默认设置。 在项目的根目录中，创建一个文件gue.json ，Gue将自动识别并使用它。

选件 (Options)

Here are available options for config file:

以下是配置文件的可用选项：

• componentRoot: root directory which components will be generated in. should be relative path.

  componentRoot ：将在其中生成componentRoot根目录。应该是相对路径。

• componentSource: path to custom component template.

  componentSource ：自定义组件模板的路径。

• unitRoot: directory which test will be generated in. should be a relative path.

  unitRoot ：将在其中生成测试的目录。应为相对路径。

• unitSource: path to custom test file template.

  unitSource ：自定义测试文件模板的路径。

An example of a config file with all options:

具有所有选项的配置文件示例：

{
  "componentRoot":"./front-end/src/components",
  "unitRoot":"./front-end/test",
  "componentSource":"./myTemplates/myVueTemplate.vue",
  "unitSource":"./myTemplates/myTestTemplate.js"
}

Now if you run gue to create a clock component in your project, it'll generate it in ./front-end/src/components/clock.vue. If you run following command in the same project:

现在，如果运行./front-end/src/components/clock.vue在项目中创建一个clock组件，它将在./front-end/src/components/clock.vue生成它。 如果在同一项目中运行以下命令：

gue title ./header

Will generate ./front-end/src/components/header/title.vue

将生成./front-end/src/components/header/title.vue

自定义模板 (Custom templates)

As said you can use custom templates in Gue, define path to them with componentSource and unitSource so that Gue will use them instead of it's default ones.

如前所述，您可以在Gue中使用自定义模板，使用componentSource和unitSource定义它们的路径，以便Gue将使用它们而不是默认模板。

变数 (Variables)

In your component template you can use variable <%NAME%> and Gue will replace it with name of component when generating. And also in test template you use <%NAME%> and <%PATH%> which will be replaced with path where component is located, relative to path of test file. Here is an example of custom component template:

在您的组件模板中，您可以使用变量<%NAME%>并且Gue在生成时会将其替换为组件名称。 同样在测试模板中，您使用<%NAME%>和<%PATH%> ，它们将被替换为相对于测试文件路径的组件所在的路径。 这是自定义组件模板的示例：

<template>
  <div class="app">
    Hey I'm a component generated with Gue, my name is <%NAME%>
  </div>
</template>

export default {
name: "<%NAME%>",
data() {
  return {
    someData: "a sample"
  }
}
<style scoped>
</style>

To see other examples look at templates folder.

要查看其他示例，请查看模板文件夹 。

翻译自: https://vuejsexamples.com/vue-js-component-generator/

vue 生成组件