vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component

下面是详细讲解 vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component 的完整攻略。

1. 什么是 vue-cli3？

Vue CLI 是一个官方发布的 Vue.js 项目脚手架，提供了标准化、插件化的 Vue 项目开发体验。vue-cli3 是 Vue CLI 的第三个版本，相较于前两个版本，vue-cli3 采用了完全不同的实现方式，推出了全新的集成式配置，可以更加方便地定制配置，同时也提供了更好的插件支持，可以让开发者更快地构建 Vue 项目。

2. 为什么要进行项目优化？

在开发 Vue 项目的过程中，我们可能会遇到许多问题，比如：代码重复、文件体积过大、命名不规范等等。这些问题可能会影响项目的可维护性、可扩展性和代码质量，因此进行项目优化是非常必要的。

3. 通过 node 自动生成组件模板 generate View、Component

vue-cli3 提供了许多命令行工具，其中就包括了 vue-cli-service generate 命令，通过该命令可以生成指定模板的组件。在 vue-cli3 中，我们可以通过 node 脚本自动生成组件模板，省去手动创建文件和书写模板代码的烦恼。

以下是通过 node 自动生成组件模板的步骤：

安装 inquirer、fs 和 path 模块，用于实现交互式命令行界面、文件读写和路径处理。

bash npm install inquirer fs path --save-dev

在 package.json 中添加生成模板的 script。

json { "scripts": { "generate": "node ./build/generate.js" } }

在项目根目录下新建 build 目录，并在该目录下新建 generate.js 文件。generate.js 中定义了生成模板的逻辑代码，如下所示：

```js
const inquirer = require('inquirer');
const fs = require('fs');
const path = require('path');

const basePath = './src/components';

const COMPONENT_TEMPLATE = `

const QUESTIONS = [
{
name: 'componentName',
type: 'input',
message: '输入组件名称：'
},
{
name: 'componentType',
type: 'list',
message: '选择组件类型：',
choices: ['component', 'view']
}
];

const OPTIONS = {
component: 'components',
view: 'views'
};

inquirer
.prompt(QUESTIONS)
.then(answers => {
const template = COMPONENT_TEMPLATE.replace(/\$componentName/g, answers.componentName);
const typeDir = OPTIONS[answers.componentType];
const outputFile = path.join(basePath, typeDir, answers.componentName + '.vue');
fs.writeFileSync(outputFile, template);
console.log(组件生成成功：${outputFile});
})
.catch(error => console.error(error));
```

运行以下命令，根据提示输入组件名称和类型，即可自动生成组件模板。

bash npm run generate

例如，输入组件名称为 "MyButton"，选择组件类型为 "component"，则在项目的 src/components 目录下自动生成了 MyButton.vue 的组件文件。

除了生成普通的组件模板外，我们还可以根据需要生成其他类型的模板，例如带有路由的组件模板。以下是生成带有路由的组件模板的示例代码：

``js const ROUTER_COMPONENT_TEMPLATE =

const ROUTER_QUESTIONS = [
...QUESTIONS,
{
name: 'hasRouter',
type: 'confirm',
message: '是否需要添加路由？'
},
{
name: 'routerPath',
type: 'input',
message: '输入路由路径（使用 / 分隔）：',
when: answers => answers.hasRouter
}
];

inquirer
.prompt(ROUTER_QUESTIONS)
.then(answers => {
const template = answers.hasRouter
? ROUTER_COMPONENT_TEMPLATE.replace(/\$componentName/g, answers.componentName) +
\n<script>\nexport const router = {path: '/${answers.routerPath}', component: ${answers.componentName}}\n</script>\n
: COMPONENT_TEMPLATE.replace(/\$componentName/g, answers.componentName);
const typeDir = OPTIONS[answers.componentType];
const outputFile = path.join(basePath, typeDir, answers.componentName + '.vue');
fs.writeFileSync(outputFile, template);
console.log(组件生成成功：${outputFile});
})
.catch(error => console.error(error));
```

运行以上代码后，询问是否需要添加路由，如果需要，则需要输入路由路径；否则按照普通组件模板生成文件。