VueJS 运行时间允许您在 Vue 中写入命令行 UI
Compile against VueJS 2.5.13.
This package is a Vue.js runtime for blessed and now blessed-contrib. The current version is compiled against VueJS 2.5.13, which means those lovely features and bug fixes comes with v2.5.13 in vue core will be available in the current version. For example, the lovely improvements about the functional components.
Blessed is a great replacement for ncurses in building UI for terminal interface in Javascript. The intention of creating this runtime is to bring declarative templates and reactive components of VueJS to simplify the layout of blessed components.
blessed-contrib is an extension of blessed with custom drawllie widgets to make building dashboard easy in command line.
This package is inspired by react-blessed.
All the widgets in blessed widgets and blessed-contrib widgets should be supported out of the box. For details of what attributes are available for each element, please refer to the specific widget in blessed document or blessed-contrib document.
The styling in Blessed Vue is not quite like CSS in the Web. In CSS the style you define on the parent can cascade/flow down to its children down the DOM tree, where in blessed the style is only used by the element it is defined on.
You can style your blessed element in the following ways.
If you don't need value binding in your element style. Blessed Vue supports string style definition. For nested value like focus, hover, scrollbar, etc..., you can use dot style to specify the nested value. See the following example.
npm install blessed-vue
The following example consists of two files. index.js & test-component.vue. At the moment blessed-vue shares the same template compiler with web runtime. So in order to load the single file component, you can use either vue-loader when you are using webpack, or rollup-plugin-vue when you are using rollup.
There are two lines of config you need to put into rollup-plugin-vue to get blessed-vue working properly. The full example is available in the login example.
// rollup.config.js
import vue from 'rollup-plugin-vue';
// more imports
export default {
entry: 'src/index.js',
dest: 'bundle.js', // equivalent to --output
..., // more configs.
plugins: [
vue({
htmlMinifier: {
caseSensitive: true, // turn on the case sensitive for preserving the props
keepClosingSlash: true // keep the singleton elements working.
}
}),
... // more plugins
],
...
};
There are examples available in example folder.
…
Username:
Password:
暂无开放 Issues，或尚未同步最近议题。