crawlab-ui v0.6.3-2
Crawlab-UI
This is the UI components and modules to support the frontend development for Crawlab.
How to Install
Use npm
or yarn
to install crawlab-ui
.
# npm
npm install crawlab-ui -S
# or use yarn
yarn add crawlab-ui -S
How to Use
It is similar to Element-Plus, you can import components from Crawlab-UI. Crawlab-UI is built based on Element-Plus so that you can comfortably use it with Element-Plus.
Use Globally Installed Components
Below is an example of entry file (main.ts) using Crawlab-UI globally.
import {createApp} from 'vue';
import CrawlabUI from 'crawlab-ui';
const app = createApp(App);
app
.use(CrawlabUI) // install globally
.mount('#app');
Below is an example of using globally installed Crawlab-UI in a Vue 3 component.
<template>
<cl-form :model="form">
<cl-form-item :span="2" label="Key" prop="key" required>
<el-input v-model="form.key"/>
</cl-form-item>
<cl-form-item :span="2" label="Value" prop="value" required>
<el-input v-model="form.value"/>
</cl-form-item>
</cl-form>
</template>
<script lang="ts">
import {defineComponent, ref} from 'vue';
export default defineComponent({
setup() {
const form = ref({
key: 'test-key',
value: 'test-value',
});
return {
form,
};
},
});
</script>
Use Standalone Components
Below is an example of using standalone components in a Vue 3 component.
<template>
<cl-form :model="form">
<cl-form-item :span="2" label="Key" prop="key" required>
<el-input v-model="form.key"/>
</cl-form-item>
<cl-form-item :span="2" label="Value" prop="value" required>
<el-input v-model="form.value"/>
</cl-form-item>
</cl-form>
</template>
<script lang="ts">
import {defineComponent, ref} from 'vue';
import {ClForm, ClFormItem} from 'crawlab-ui';
export default defineComponent({
components: {
ClForm,
ClFormItem,
},
setup() {
const form = ref({
key: 'test-key',
value: 'test-value',
});
return {
form,
};
},
});
</script>
Use Web Application
Crawlab-UI has a built-in web application for Crawlab frontend. You can simply use it to start Crawlab frontend Vue 3 SPA.
// index.ts or index.js or other entry file
import {createApp} from 'crawlab-ui';
createApp();
And that's it! After you build or start serving it, you can view the Crawlab frontend web application in the browser.
Development
Add a new model
Related directories:
src/views
src/components
src/store
src/router
src/i18n
src/services
src/interfaces/i18n
10 months ago
10 months ago
5 months ago
5 months ago
9 months ago
10 months ago
7 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago