使用vue elementui创建留言板

使用Vue和Element UI创建留言板的步骤如下：

1. 首先，确保你已经安装了Node.js和npm。如果没有安装，请根据你的操作系统下载并安装Node.js。

2. 打开命令行工具，进入你想要创建项目的目录。

3. 使用以下命令安装Vue CLI（脚手架）：

npm install -g @vue/cli

4. 创建一个新的Vue项目：

vue create my-message-board

在创建项目的过程中，你可以选择使用默认配置或手动选择所需的特性。在这个例子中，我们选择手动配置。

5. 进入项目目录：

cd my-message-board

6. 安装Element UI和axios：

npm install element-ui axios

7. 在项目的入口文件（通常是`src/main.js`）中引入Element UI和axios：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(ElementUI)
Vue.use(VueAxios, axios)

new Vue({
  render: h => h(App),
}).$mount('#app')

8. 创建一个留言板组件（例如`src/components/MessageBoard.vue`），并在其中使用Element UI的组件和axios发送请求：

<template>
  <div>
    <el-input v-model="message" placeholder="请输入留言"></el-input>
    <el-button @click="postMessage">提交</el-button>
    <el-divider></el-divider>
    <el-card v-for="message in messages" :key="message.id">
      <div>{{ message.content }}</div>
      <div>{{ message.author }}</div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      messages: []
    }
  },
  methods: {
    postMessage() {
      axios.post('/api/messages', { content: this.message, author: 'Anonymous' })
        .then(response => {
          this.messages.push(response.data)
          this.message = ''
        })
        .catch(error => {
          console.error(error)
        })
    },
    fetchMessages() {
      axios.get('/api/messages')
        .then(response => {
          this.messages = response.data
        })
        .catch(error => {
          console.error(error)
        })
    }
  },
  mounted() {
    this.fetchMessages()
  }
}
</script>

9. 在主组件中使用留言板组件（例如`src/App.vue`）：

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

<script>
import MessageBoard from './components/MessageBoard.vue'

export default {
  components: {
    MessageBoard
  }
}
</script>

10. 运行项目：

npm run serve

11. 打开浏览器，访问`http://localhost:8080`，你将看到一个带有留言板的页面。