Vue+NodeJS+ElementUI 的简单示例

以下是一个简单的Vue+NodeJS+ElementUI的示例，它展示了如何创建一个简单的用户列表界面，并使用ElementUI进行样式设计。

NodeJS服务器代码 (server.js):

const express = require('express');
const app = express();
const port = 3000;
 
app.use(express.json());
 
// 模拟数据库
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];
 
// 获取所有用户
app.get('/api/users', (req, res) => {
  res.json(users);
});
 
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

Vue客户端代码 (App.vue):

<template>
  <div id="app">
    <el-table :data="users" style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
    </el-table>
  </div>
</template>
 
<script>
import { Table, TableColumn } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios';
 
export default {
  name: 'App',
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn
  },
  data() {
    return {
      users: []
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      axios.get('http://localhost:3000/api/users')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error('There was an error fetching the users:', error);
        });
    }
  }
};
</script>

确保您已经安装了express, element-ui, 和 axios。

npm install express element-ui axios

启动NodeJS服务器:

node server.js

启动Vue客户端:

npm run serve

这个简单的示例展示了如何使用Vue来处理前端逻辑，NodeJS作为后端服务器提供API接口，以及如何集成ElementUI来增强界面的视觉效果。