适配vue3版本改造

Author: tzfun

README.md

@@ -9,31 +9,41 @@
 npm安装vue-web-terminal
 
 ```shell
-npm install vue-web-terminal --save 
+//  vue2安装
+npm install [email protected] --save
+
+//  vue3安装
+npm install [email protected] --save 
 ```
 
 main.js中载入 Terminal 插件
 
 ```js
 import Terminal from 'vue-web-terminal'
 
+// for vue2
 Vue.use(Terminal)
+
+// for vue3
+const app = createApp(App)
+app.use(Terminal)
 ```
 
 使用示例
 
 ```vue
-
 <template>
   <div id="app">
     <terminal name="my-terminal" @execCmd="onExecCmd"></terminal>
   </div>
 </template>
 
 <script>
+import Terminal from "vue-web-terminal"
 
 export default {
   name: 'App',
+  components:{Terminal},
   methods: {
     onExecCmd(key, command, success, failed) {
       if (key === 'fail') {
@@ -115,7 +125,7 @@ terminal标签支持属性参数表
 | warnLogLimitEnable  | 是否开启日志限制警告                              | boolean  | true              |
 | auto-help           | 是否打开命令行自动搜索提示功能                         | boolean  | true              |
 | help-style          | help自定义样式                               | string   |                   |
-| command-store       | 自定义的命令行库，见[命令行定义格式](#命令行定义)             | array    | [内置命令行](#内置命令行)   |
+| command-store       | 自定义的命令库，见[命令定义格式](#命令定义)                | array    | [内置命令行](#内置命令行)   |
 | command-store-sort  | 命令行库排序                                  | function | function(a,b) {}  |
 
 ## Select Events
@@ -133,14 +143,11 @@ terminal标签支持事件表
 
 本插件提供了一些 Api 可以使用 Vue 主动向插件发起事件请求。
 
-Terminal在 Vue 的prototype中定义了一个变量可以获取Terminal对象
-
 ```js
-this.$terminal
+import Terminal from "vue-web-terminal"
 
-//  or
-
-Vue.prototype.$terminal
+//  获取api
+Terminal.$api
 ```
 
 ### 向Terminal推送一条消息
@@ -153,22 +160,23 @@ let message = {
     content: 'This is a wanning message.'
 }
 
-this.$terminal.pushMessage(name, message)
+Terminal.$api.pushMessage(name, message)
 ```
 
 ### 修改上下文
 
 比如当前输入行`$ /vue-web-terminal/tzfun > `的 */vue-web-terminal/tzfun* 就是上下文，上下文文本可以由开发者自由设置 ，但是需使用`.sync`绑定一个变量
 
 ```vue
-
 <template>
   <div id="app">
     <terminal name="my-terminal" :context.sync="context"></terminal>
   </div>
 </template>
 
 <script>
+import Terminal from "vue-web-terminal"
+
 export default {
   name: 'App',
   data() {
@@ -178,7 +186,7 @@ export default {
   },
   methods: {
     _updateContext(newCtx) {
-      this.$terminal.updateContext("my-terminal", newCtx)
+      Terminal.$api.updateContext("my-terminal", newCtx)
     }
   }
 }
@@ -344,22 +352,22 @@ execCmd(key, command, success)
 }
 ```
 
-## 命令行定义
+## 命令定义
 
-如果开启了命令行帮助搜索功能，在实例化Terminal之前需要传入自定义命令行库，传入的命令行库为 N 个命令行的数组，以下是命令行格式定义规则：
+如果开启了命令帮助搜索功能，在实例化Terminal之前需要传入自定义命令库，传入的命令库为 N 个命令的数组，以下是命令格式定义规则：
 
-| 参数          | 说明                        | 类型     |
-|-------------|---------------------------|--------|
-| key         | 命令行关键字，必填                 | string |
-| title       | 显示标题                      | string |
-| group       | 分组，可自定义，默认为 `local`       | string |
-| usage       | 使用方法                      | string |
-| description | 详细描述                      | string |
-| example     | 使用示例，见[命令行示例格式](#命令行示例格式) | array  |
+| 参数          | 说明                      | 类型     |
+|-------------|-------------------------|--------|
+| key         | 命令关键字，必填                | string |
+| title       | 显示标题                    | string |
+| group       | 分组，可自定义，默认为 `local`     | string |
+| usage       | 使用方法                    | string |
+| description | 详细描述                    | string |
+| example     | 使用示例，见[命令示例格式](#命令示例格式) | array  |
 
-### 命令行示例格式
+### 命令示例格式
 
-示例格式比较简单，`des`为描述，`cmd`为具体的命令行，json格式如下：
+示例格式比较简单，`des`为描述，`cmd`为具体的命令，json格式如下：
 
 ```json
 [
@@ -374,7 +382,7 @@ execCmd(key, command, success)
 ]
 ```
 
-### 内置命令行
+### 内置命令
 
 Terminal默认内置有以下命令，且不可替代
 

modify_lib.py

@@ -0,0 +1,19 @@
+import os
+
+obj_name = 'vue-web-terminal'
+
+if os.path.exists('lib/demo.html'):
+    os.remove('lib/demo.html')
+    print('removed demo.html')
+
+if os.path.exists('lib/' + obj_name + '.common.js'):
+    os.remove('lib/' + obj_name + '.common.js')
+    print('removed ' + obj_name + 'common.js')
+
+if os.path.exists('lib/' + obj_name + '.umd.js'):
+    os.remove('lib/' + obj_name + '.umd.js')
+    print('removed ' + obj_name + 'umd.js')
+
+if os.path.exists('lib/' + obj_name + '.umd.min.js'):
+    os.rename('lib/' + obj_name + '.umd.min.js', 'lib/' + obj_name + '.js')
+    print('renamed js to ' + obj_name + '.js')

package.json

@@ -1,16 +1,17 @@
 {
   "name": "vue-web-terminal",
-  "version": "1.3.0",
+  "version": "2.0.0",
+  "description": "网页端命令行插件，适配vue3",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build-cli": "vue-cli-service build --dest lib src/index.js",
+    "build-cli": "vue-cli-service build --target lib --dest lib src/index.js && python modify_lib.py",
     "build": "webpack --mode=production --config webpack.config.js",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "object-sizeof": "^1.6.2",
-    "vue-json-viewer": "^2.2.21"
+    "vue-json-viewer": "^2.2.22"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -26,7 +27,7 @@
     "vue": "^2.6.11",
     "vue-loader": "^15.9.8",
     "vue-template-compiler": "^2.6.11",
-    "webpack": "^5.69.0",
+    "webpack": "^4.46.0",
     "webpack-cli": "^4.9.2",
     "uglifyjs-webpack-plugin": "^2.1.3"
   },

src/Terminal.js

@@ -1,4 +1,3 @@
-import 'vue-json-viewer/style.css'
 import sizeof from 'object-sizeof'
 import {_dateFormat, _isEmpty, _nonEmpty, _sleep} from "./Util.js";
 import historyStore from "./HistoryStore.js";

src/Terminal.vue

@@ -164,8 +164,9 @@
 </template>
 
 <script>
-import TerminalJs from './Terminal.js'
 import './css/style.css'
+import 'vue-json-viewer/style.css'
+import TerminalJs from './Terminal.js'
 
 export default TerminalJs
 

src/index.js

@@ -2,12 +2,12 @@ import Terminal from './Terminal.vue'
 import TerminalObj from './TerminalObj.js'
 import JsonViewer from 'vue-json-viewer'
 
-let terminal = {}
-terminal.install = function (Vue, options) {
+Terminal.install = function (Vue, options) {
     Vue.use(JsonViewer)
     if (options != null) {
         TerminalObj.setOptions(options)
     }
-    Vue.component(Terminal.name, Terminal)
+    Terminal.$api = TerminalObj
 }
-export default terminal
+
+export default Terminal

vue.config.js

@@ -1,6 +1,14 @@
-const path = require("path");
 const name = "vue-web-terminal"
+let path = require('path')
+
 module.exports = {
+    publicPath: './',
+    css: {
+        extract: false
+    },
+    runtimeCompiler:true,
+    productionSourceMap: false,
+    filenameHashing: false,
     configureWebpack: {
         output: {
             filename: `${name}.js`,
@@ -9,13 +17,11 @@ module.exports = {
             umdNamedDefine: true
         }
     },
-    css: {
-        extract: {
-            filename: `${name}.css`,
-            chunkFilename: `${name}.chunk.css`
-        }
-    },
     chainWebpack: (config) => {
+        config.plugins.delete('preload')
+        config.plugins.delete('prefetch')
+        config.plugins.delete('html')
+
         config.module
             .rule("js")
             .include.add(path.resolve(__dirname, "packages"))
@@ -25,5 +31,15 @@ module.exports = {
             .tap((options) => {
                 return options;
             });
-    }
+
+        config.optimization
+            .minimize(true)
+            .minimizer('terser')
+            .tap(args => {
+                let {terserOptions} = args[0];
+                terserOptions.compress.drop_console = false;
+                terserOptions.compress.drop_debugger = true;
+                return args
+            });
+    },
 };