在 vue 项目中，使用 clickhouse js 进行增删改查可以分为以下几个步骤：

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

1. 安装 clickhouse js

npm install clickhouse-js

2. 封装一个数据库访问层

// clickhouse.js
import { client } from 'clickhouse-js';

class clickhouse {
  constructor(config) {
    this.client = new client(config);
  }

  async query(sql) {
    return this.client.query(sql);
  }

  async insert(table, data) {
    const sql = `insert into ${table} (${object.keys(data).join(', ')}) values (${object.values(data).map(() => '?').join(', ')})`;
    return this.client.query(sql, object.values(data));
  }

  async update(table, data, where) {
    const sql = `update ${table} set ${object.keys(data).map(key => `${key} = ?`).join(', ')} where ${where}`;
    return this.client.query(sql, [...object.values(data)]);
  }

  async delete(table, where) {
    const sql = `delete from ${table} where ${where}`;
    return this.client.query(sql);
  }
}

3. 在 vue 组件中使用

import ClickHouse from '@/clickhouse';

export default {
  data() {
    return {
      clickHouse: new ClickHouse({host: 'localhost', port: '8123', database: 'test'})
    }
  },
  methods: {
    async query() {
      const result = await this.clickHouse.query('SELECT * FROM test');
      console.log(result);
    },
    async insert() {
      const result = await this.clickHouse.insert('test', {name: 'John Doe', age: 30});
      console.log(result);
    },
    async update() {
      const result = await this.clickHouse.update('test', {name: 'Jane Doe'}, 'id = 1');
      console.log(result);
    },
    async delete() {
      const result = await this.clickHouse.delete('test', 'id = 1');
      console.log(result);
    },
  }
}