vue 使用sqlite

根据提供的引用内容，Vue.js是一个用于构建用户界面的渐进式框架，而SQLite是一种嵌入式关系型数据库管理系统。Vue.js本身并不支持SQLite，但是可以通过第三方库来实现Vue.js与SQLite的集成。

一种常见的方法是使用Vue.js与Electron框架结合，Electron是一个使用JavaScript、HTML和CSS构建跨平台桌面应用程序的框架，它使用Chromium和Node.js作为后端。在Electron中，可以使用Node.js的sqlite3模块来访问SQLite数据库。

以下是一个使用Vue.js和Electron结合使用SQLite的简单示例：

1.首先，在Vue.js项目中安装sqlite3模块：

npm install sqlite3 --save

2.在Electron的主进程中引入sqlite3模块，并创建一个SQLite数据库：

// main.js

const { app, BrowserWindow } = require('electron')
const sqlite3 = require('sqlite3').verbose()

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  mainWindow.loadFile('index.html')

  mainWindow.on('closed', function () {
    mainWindow = null
  })

  // 创建SQLite数据库
  let db = new sqlite3.Database('./test.db', (err) => {
    if (err) {
      console.error(err.message)
    }
    console.log('Connected to the test database.')
  })

  // 创建数据表
  db.run('CREATE TABLE IF NOT EXISTS users (id INT, name TEXT)')

  // 插入数据
  db.run('INSERT INTO users(id, name) VALUES(?, ?)', [1, 'Alice'], function(err) {
    if (err) {
      console.log(err.message);
    }
    console.log(`A row has been inserted with rowid ${this.lastID}`);
  });

  // 查询数据
  db.all('SELECT * FROM users', [], (err, rows) => {
    if (err) {
      throw err;
    }
    rows.forEach((row) => {
      console.log(row.id, row.name);
    });
  });

  // 关闭数据库连接
  db.close((err) => {
    if (err) {
      console.error(err.message);
    }
    console.log('Close the database connection.');
  });
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
})

3.在Vue.js中使用Electron的remote模块来访问主进程中的sqlite3模块：

// App.vue

<template>
  <div class="container">
    <h1>Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.id }} - {{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
const { remote } = require('electron')
const db = remote.require('sqlite3').verbose()

export default {
  data() {
    return {
      users: []
    }
  },
  created() {
    // 查询数据
    db.all('SELECT * FROM users', [], (err, rows) => {
      if (err) {
        throw err;
      }
      this.users = rows
    });
  }
}
</script>

在上面的示例中，我们在Electron的主进程中创建了一个SQLite数据库，并在其中创建了一个名为“users”的数据表，然后插入了一条数据并查询了所有数据。在Vue.js中，我们使用Electron的remote模块来访问主进程中的sqlite3模块，并在created钩子中查询数据并将其显示在页面上。