以下是一个简单的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来增强界面的视觉效果。