Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://tzfun.github.io/vue-web-terminal/getting-started.html below:

Website Navigation

• Next

  Theme

Quick Start | vue-web-terminal

You can experience some of the sample functions written by the author in Online Experience, you can also edit the code and run in CodeSandbox.

Before you plan to officially use this plugin, I hope you have read About the plugin and fully understand the functions supported by this plugin and its limitations.

Tips

The Vue2 version will be officially archived from December 24, 2024 and will no longer provide maintenance updates. For the source code, see vue2 branch.

You need to understand the plugin version number rules：

• 2.x.x corresponds to Vue2 version
• 3.x.x corresponds to Vue3 version

It is recommended to go to releases to find the latest version of the corresponding vue version.

npm

npm install vue-web-terminal@2


npm install vue-web-terminal@3

yarn

yarn add vue-web-terminal@2


yarn add vue-web-terminal@3

pnpm

pnpm install vue-web-terminal@2


pnpm install vue-web-terminal@3

Register the plugin in 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)

Tips

Global configuration needs to be processed before registering in main (before calling app.use()). This feature is only supported by Vue3 version (starting from 3.4.0).

Configure the local storage name

const terminal: VueWebTerminal = createTerminal()

terminal.configStoreName('my-terminal-storage')

app.use(terminal)

Configure the maximum number of historical commands to be memorized per terminal instance

const terminal: VueWebTerminal = createTerminal()

terminal.configMaxStoredCommandCountPerInstance(200)

app.use(terminal)

Configuring a custom theme

import customTheme from '/your-style-dir/terminal-custom-theme1.css?inline';

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

app.use(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>

After starting your project, if a draggable terminal window appears on the page, congratulations on your first terminal application!

You can enter any command in the window and press Enter, and different levels of content will be randomly prompted.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4