After realizing that Vue CLI comes with a plethora of node_modules, I decided to create a Vue component that can run a shell command (such as ls -l).
I integrated Electron using vue add electron-builder.
For VueRouter, I have set
mode: process.env.IS_ELECTRON ? 'hash' : 'history',To run the project, I use
npm run electron:serve.
Below is the code for the ShellExec.vue component:
<template>
<div id="wrapper">
<div class="input_row">
<input type="text" class="input_text" id="shell" v-model="shell_command" />
<label class="label_" for="shell">Type Shell Command</label>
</div>
<button type="button" class="button" @click="shellExec">Submit !</button>
</div>
</template>
<script>
import { exec } from "child_process";
export default {
name: "ShellExec",
components: {},
data() {
return {
shell_command: ""
};
},
methods: {
async shell() {
return new Promise((resolve, reject) => {
exec(this.shell_command, (err, stdout, stderr) => {
if (err) {
reject(err);
} else {
resolve({ stdout, stderr });
}
});
});
},
async shellExec() {
let { stdout } = await this.shell();
for (let line of stdout.split("\n")) {
console.log(`ls: ${line}`);
}
}
}
};
</script>
<style scoped>
</style>
You can find the JavaScript scripts here.
The value of shell_command updates based on what I type in the input field, indicating that it is working correctly.
Despite trying a simple ls -l command, when I click the Submit ! button, I encounter the following errors:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler (Promise/async): "TypeError: Object(...) is not a function"
found in
---> <ShellExec> at src/components/ShellExec.vue
<App> at src/App.vue
<Root>
vue.runtime.esm.js?2b0e:1888 TypeError: Object(...) is not a function
at eval (ShellExec.vue?face:25)
at new Promise (<anonymous>)
at _callee$ (ShellExec.vue?face:23)
at tryCatch (runtime.js?96cf:45)
at Generator.invoke [as _invoke] (runtime.js?96cf:274)
at Generator.prototype.<computed> [as next] (runtime.js?96cf:97)
at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
at _next (asyncToGenerator.js?1da1:25)
at eval (asyncToGenerator.js?1da1:32)
at new Promise (<anonymous>)