ElasticView

English

简体中文

English

简体中文

Appearance

Frontend Development ​

Learn how to build the user interface for your ElasticView plugin using Vue.js.

Technology Stack ​

Core Technologies ​

  • Vue.js 3: Progressive JavaScript framework
  • Vue Router: Client-side routing
  • Element Plus: UI component library
  • Vite: Build tool and development server

Project Structure ​

frontend/
├── src/
│   ├── components/        # Reusable components
│   ├── views/            # Page components
│   ├── router/           # Route configuration
│   ├── store/            # State management
│   ├── utils/            # Utility functions
│   └── main.js           # Application entry point
├── package.json          # Dependencies
└── vite.config.js        # Build configuration

Component Development ​

Basic Component Structure ​

vue
<template>
  <div class="my-component">
    <h2>{{ title }}</h2>
    <div class="content">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    title: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // Component data
    }
  }
}
</script>

<style scoped>
.my-component {
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}
</style>

HTTP Client Integration ​

API Service ​

javascript
// utils/api.js
import axios from 'axios'

const api = axios.create({
  baseURL: '/plugin/my-plugin/api',
  timeout: 10000
})

export default api

Using in Components ​

vue
<script>
import api from '@/utils/api'

export default {
  data() {
    return {
      data: [],
      loading: false
    }
  },
  
  methods: {
    async loadData() {
      this.loading = true
      try {
        const response = await api.get('/data')
        this.data = response.data
      } catch (error) {
        this.$message.error('Failed to load data')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

UI Components ​

Using Element Plus ​

vue
<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="Name">
      <el-input v-model="form.name" />
    </el-form-item>
    
    <el-form-item label="Type">
      <el-select v-model="form.type">
        <el-option label="Type A" value="a" />
        <el-option label="Type B" value="b" />
      </el-select>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="submit">Submit</el-button>
    </el-form-item>
  </el-form>
</template>

Build Configuration ​

Vite Configuration ​

javascript
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  
  build: {
    outDir: 'dist'
  },
  
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

Best Practices ​

Performance Optimization ​

  • Use lazy loading for routes and components
  • Implement virtual scrolling for large lists
  • Optimize bundle size with code splitting

Code Organization ​

  • Follow Vue.js style guide
  • Keep components small and focused
  • Use proper error handling

Next Steps ​