当前位置：首页 > VUE

vue实现命令行

2026-01-21 11:42:50VUE

Vue 实现命令行的方式

Vue 本身是一个前端框架，但可以通过一些工具和库实现命令行交互功能。以下是几种常见的方法：

使用 Vue CLI 插件

Vue CLI 提供了插件系统，可以扩展命令行功能。通过自定义插件，可以为 Vue 项目添加命令行工具。

安装 Vue CLI：

npm install -g @vue/cli

创建自定义插件：

vue create my-plugin

在插件中定义命令行命令：

// plugins/my-plugin/index.js
module.exports = (api, options) => {
  api.registerCommand('greet', (args) => {
    console.log('Hello from Vue CLI plugin!');
  });
};

在 package.json 中添加命令：

{
  "scripts": {
    "greet": "vue-cli-service greet"
  }
}

使用 Commander.js

Commander.js 是一个流行的 Node.js 命令行工具库，可以与 Vue 项目结合使用。

安装 Commander.js：

npm install commander

创建命令行脚本：

// scripts/cli.js
const { program } = require('commander');

program
  .command('build')
  .description('Build Vue project')
  .action(() => {
    require('child_process').exec('vue-cli-service build');
  });

program.parse(process.argv);

在 package.json 中添加命令：

{
  "scripts": {
    "cli": "node scripts/cli.js"
  }
}

使用 Inquirer.js 实现交互式命令行

Inquirer.js 可以创建交互式命令行界面，适合需要用户输入的场景。

安装 Inquirer.js：

npm install inquirer

创建交互式脚本：

// scripts/interactive.js
const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'input',
      name: 'name',
      message: 'What is your name?',
    },
  ])
  .then((answers) => {
    console.log(`Hello, ${answers.name}!`);
  });

使用 Vue 服务端渲染 (SSR)

如果需要更复杂的命令行工具，可以结合 Vue 的服务端渲染能力。

安装 Vue SSR：

npm install vue-server-renderer

创建 SSR 命令行工具：

// scripts/ssr-cli.js
const Vue = require('vue');
const renderer = require('vue-server-renderer').createRenderer();

const app = new Vue({
  template: '<div>Hello from SSR CLI</div>',
});

renderer.renderToString(app, (err, html) => {
  if (err) throw err;
  console.log(html);
});

使用 Node.js 子进程调用 Vue CLI

通过 Node.js 的 child_process 模块，可以直接调用 Vue CLI 命令。

示例代码：

// scripts/run-vue.js
const { exec } = require('child_process');

exec('vue-cli-service build', (error, stdout, stderr) => {
  if (error) {
    console.error(`Error: ${error.message}`);
    return;
  }
  console.log(stdout);
});