快速上手

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

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

安装

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

• 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.js中注册插件

Vue2

import Terminal from 'vue-web-terminal'

Vue.use(Terminal)

Vue3

import Terminal from 'vue-web-terminal'

createApp(App).use(Terminal)

你的第一个vue-web-terminal

<template>
  <terminal name="my-terminal"
            @exec-cmd="onExecCmd"
            :drag-conf="dragConf"
            theme="dark" />
</template>
<script>
import Terminal from 'vue-web-terminal';

export default {
  name: 'App',
  data(){
    return {
      dragConf: {
        width: "50%",
        height: "70%",
        zIndex: 100,
        init: {
          x: 200,
          y: 200
        },
        pinned: false
      }
    }
  },
  methods: {
    onExecCmd(key, command, success, failed) {
      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,
          tag: clazz,
          content: `Your command is '${command}'`
        })
      }
    }
  }
}
</script>
<style scoped>
</style>

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