快速上手

你可以 在线体验 一部分作者写好的示例功能，也可以在 CodeSandbox 编辑代码并运行体验。

在你打算正式使用此插件之前希望你已经阅读 关于插件 并充分了解此插件支持的功能以及它的局限性。

提示

Vue2版本从 2024年12月24日 开始正式归档，不再提供维护更新，源码见 vue2分支。

安装

你需要了解插件的版本号规则：

• 2.x.x对应Vue2版本
• 3.x.x对应Vue3版本

建议前往 releases 寻找对应Vue版本最新的版本。

npm

# for vue2
npm install vue-web-terminal@2

# for vue3
npm install vue-web-terminal@3

yarn

# for vue2
yarn add vue-web-terminal@2

# for vue3
yarn add vue-web-terminal@3

pnpm

# for vue2
pnpm install vue-web-terminal@2

# for vue3
pnpm install vue-web-terminal@3

Vue注册

在 main 中注册插件

Vue3

import { createTerminal } from 'vue-web-terminal'

const app = createApp(App)

app.use(createTerminal())

app.mount('#app')

Vue2

import Terminal from 'vue-web-terminal'

Vue.use(Terminal)

全局配置

提示

全局配置需要在main中注册之前（调用app.use()之前）处理完成，此功能只有 Vue3 版本支持（从3.4.0开始）

配置本地存储名

const terminal: VueWebTerminal = createTerminal()
//  default is 'terminal'
terminal.configStoreName('my-terminal-storage')

app.use(terminal)

配置每个Terminal实例记忆历史指令的最大数量

const terminal: VueWebTerminal = createTerminal()
//  default is 100
terminal.configMaxStoredCommandCountPerInstance(200)

app.use(terminal)

配置自定义主题

//  导出css文件内容
import customTheme from '/your-style-dir/terminal-custom-theme1.css?inline';

const terminal: VueWebTerminal = createTerminal()
terminal.configTheme('my-custom-theme', customTheme)

app.use(terminal)

你的第一个vue-web-terminal

<script setup lang="ts">
import {Terminal, DragConfig, FailedFunc, SuccessFunc, TerminalMessageClass} from 'vue-web-terminal';
import {reactive} from "vue";

const dragConf = reactive<DragConfig>({
  width: "50%",
  height: "70%",
  zIndex: 100,
  init: {
    x: 200,
    y: 200
  },
  pinned: false
})

const onExecCmd = (key: string, command: string, success: SuccessFunc, failed: FailedFunc) => {
  if (key === 'fail') {
    failed('Something wrong!!!')
  } else {
    let allClass = ['success', 'error', 'system', 'info', 'warning'];

    let clazz = allClass[Math.floor(Math.random() * allClass.length)];
    success({
      type: 'normal',
      class: clazz as TerminalMessageClass,
      tag: clazz,
      content: `Your command is '${command}'`
    })
  }
}
</script>

<template>
  <terminal name="my-terminal"
            theme="dark"
            @exec-cmd="onExecCmd"
            :drag-conf="dragConf"
  />
</template>

<style scoped>
</style>

启动你的工程之后，如果在页面中出现一个可拖拽的终端窗口，那么恭喜你的第一个terminal应用实现了！ 你可以在窗口中输入任意命令然后回车，会随机提示不同的级别的内容。