如何用vue的node写一个简单的登录界面

以下是一个使用Vue和Node.js编写的简单登录界面的示例：

1. 创建一个Vue项目并进入项目目录。

2. 安装依赖项：

npm install --save express body-parser cors

3. 在项目的根目录下创建一个名为“server.js”的文件，用于编写服务器端代码。

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')

const app = express()

app.use(bodyParser.json())
app.use(cors())

const users = [
  { username: 'admin', password: 'admin' },
  { username: 'user', password: 'user' }
]

app.post('/login', (req, res) => {
  const { username, password } = req.body
  const user = users.find(u => u.username === username && u.password === password)
  if (user) {
    res.json({ success: true })
  } else {
    res.json({ success: false })
  }
})

app.listen(3000, () => {
  console.log('Server started on port 3000')
})

4. 在Vue项目的src目录下创建一个名为“views”的文件夹，并在其中创建一个名为“Login.vue”的文件，用于编写登录页面的代码。

<template>
  <div>
    <input type="text" v-model="username" placeholder="Username">
    <input type="password" v-model="password" placeholder="Password">
    <button @click="login">Login</button>
    <div v-if="message">{{ message }}</div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      username: '',
      password: '',
      message: ''
    }
  },
  methods: {
    async login() {
      const { data } = await axios.post('http://localhost:3000/login', {
        username: this.username,
        password: this.password
      })
      if (data.success) {
        this.message = 'Login success'
      } else {
        this.message = 'Login failed'
      }
    }
  }
}
</script>

5. 在Vue项目的App.vue文件中导入Login组件并将其添加到模板中。

<template>
  <div id="app">
    <Login />
  </div>
</template>

<script>
import Login from './views/Login'

export default {
  name: 'App',
  components: {
    Login
  }
}
</script>

6. 运行Vue项目并访问http://localhost:8080，即可看到登录页面。

以上示例代码仅供参考，实际项目中需要根据需求进行修改和完善。