### Install vue-web-terminal for Vue 2 and Vue 3

Source: https://github.com/tzfun/vue-web-terminal/blob/vue3/README_ZH.md

Install the vue-web-terminal package from npm. Use version 2.x.x for Vue 2 projects and 3.x.x for Vue 3 projects. It's recommended to install the latest version within the major release.

```shell
#  install for vue2
npm install vue-web-terminal@2.xx --save

#  install for vue3
npm install vue-web-terminal@3.xx --save
```

--------------------------------

### Install vue-web-terminal for Vue 2 and Vue 3

Source: https://github.com/tzfun/vue-web-terminal/blob/vue3/README.md

Install the vue-web-terminal package using npm. Use version 2.x.x for Vue 2 and 3.x.x for Vue 3. It's recommended to use the latest minor version within the major release.

```shell
# install for vue2
npm install vue-web-terminal@2.xx --save

# install for vue3
npm install vue-web-terminal@3.xx --save
```

--------------------------------

### Basic Usage of vue-web-terminal Component

Source: https://github.com/tzfun/vue-web-terminal/blob/vue3/README_ZH.md

Integrate the Terminal component into your Vue application. Define an `onExecCmd` function to handle command execution, passing success or failure callbacks. The component emits the 'exec-cmd' event with the command key, command string, and callbacks.

```vue
<script setup lang="ts">
  import {Terminal, SuccessFunc, FailedFunc} from "vue-web-terminal"

  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,
        tag: 'success',
        content: command
      })
    }
  }
</script>
<template>
  <div id="app">
    <terminal name="my-terminal" @exec-cmd="onExecCmd"></terminal>
  </div>
</template>

<style>
  body, html, #app {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
</style>
```

--------------------------------

### Use Terminal Plugin in Vue 2 Main File

Source: https://github.com/tzfun/vue-web-terminal/blob/vue3/README.md

Integrate the vue-web-terminal plugin into your Vue 2 application by importing and using `Vue.use()`. This makes the terminal component available globally.

```javascript
import Terminal from 'vue-web-terminal'

Vue.use(Terminal)
```

--------------------------------

### Use Terminal Plugin in Vue 3 Main File

Source: https://github.com/tzfun/vue-web-terminal/blob/vue3/README.md

Integrate the vue-web-terminal plugin into your Vue 3 application by importing `createTerminal` and using `app.use()`. This sets up the terminal component for your app.

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

const app = createApp(App)

app.use(createTerminal())

app.mount('#app')
```

--------------------------------

### Load Terminal Plugin in Vue Main File

Source: https://github.com/tzfun/vue-web-terminal/blob/vue3/README_ZH.md

Load the Terminal plugin globally in your Vue application's main entry file. For Vue 2, use `Vue.use()`. For Vue 3, import `createTerminal` and use `app.use()`.

```javascript
// Vue2
import Terminal from 'vue-web-terminal'

Vue.use(Terminal)
```

```typescript
// Vue3
import { createTerminal } from 'vue-web-terminal'

const app = createApp(App)

app.use(createTerminal())

app.mount('#app')
```

--------------------------------

### Vue Web Terminal CSS Styling

Source: https://github.com/tzfun/vue-web-terminal/blob/vue3/design/logo.html

Defines the visual appearance of the logo, icon, and line elements in the Vue Web Terminal. Includes styling for margins, padding, dimensions, colors, borders, shadows, positioning, and transformations.

```css
#logo {
  margin: 100px;
  overflow: hidden;
  padding: 15px;
  width: 200px;
  height: 200px;
  background-color: #35495e;
  border-radius: 15px;
  position: relative;
  filter: drop-shadow(0 0 5px #000);
}
.vue-icon {
  width: 100px;
  position: absolute;
  left: 20px;
  top: 50px;
  transform: rotate(-90deg);
  z-index: 2;
}
.line {
  position: absolute;
  bottom: 50px;
  right: 30px;
  width: 85px;
  height: 18px;
  background-color: #41b883;
  z-index: 2;
}
.shadow {
  position: absolute;
  background: #0000002b;
  z-index: 1;
  width: 243px;
  height: 74px;
  transform: rotate(30deg);
  top: 135px;
  left: 29px;
}
```

--------------------------------

### Generate Image from DOM Element

Source: https://github.com/tzfun/vue-web-terminal/blob/vue3/design/logo.html

Uses the html2canvas library to capture a DOM element ('logo') as an image. The function configures options like CORS, taint, dimensions, and background color for the canvas, then converts the canvas to a data URL and appends the resulting image to the document body. Requires the html2canvas library.

```javascript
function download() {
  const node = document.getElementById("logo")
  html2canvas(node, {
    useCORS: true,
    allowTaint: true,
    height: node.offsetHeight,
    width: node.offsetWidth,
    scrollY: 0,
    scrollX: 0,
    backgroundColor: null
  }).then(async (canvas) => {
    canvas.shadowOffsetX = 0;
    canvas.shadowOffsetY = 0;
    canvas.shadowBlur = 15;
    canvas.shadowColor = "rgba(0,0,0,0.5)"
    let imgUrl = canvas.toDataURL();
    let img = new Image();
    img.src = imgUrl;
    // 导出图片
    document.body.appendChild(img);
    // 将生成的图片添加到body
  })
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.