用vue脚手架创建一个公告栏的前端项目

使用Vue CLI（Vue的官方命令行工具）创建一个公告栏前端项目的基本步骤如下：

1. **安装 Vue CLI**:
首先确保已经全局安装了Node.js，然后打开终端（Windows用户可以使用命令提示符），运行以下命令安装Vue CLI：

   npm install -g @vue/cli

2. **初始化项目**:
创建一个新的Vue项目，提供项目名称（例如`message-board`），选择默认模板（单文件组件）：

   vue create message-board

进入新项目目录：

   cd message-board

3. **选择预设** (如果你需要更多特性，可以选择其他预设，如 `webpack-manifest` 或 `e2e-testing`):

   vue add element-ui // 如果你想使用Element UI作为UI库

或者保持默认不添加任何库：

   yarn // 完成安装后需要运行此命令

4. **构建公告栏组件**:
- 在`src/components`目录下创建一个名为`NoticeBoard.vue`的文件，编写公告板组件结构，包括消息列表、添加消息功能等。

   <template>
     <div class="notice-board">
       <ul>
         <!-- 使用v-for遍历消息数组 -->
         <li v-for="message in messages" :key="message.id">{{ message.text }}</li>
       </ul>
       <input type="text" v-model="newMessage" placeholder="请输入公告内容">
       <button @click="addMessage">发布</button>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         messages: [], // 存储公告数组
         newMessage: ''
       };
     },
     methods: {
       addMessage() {
         if (this.newMessage.trim()) {
           this.messages.push({ id: Date.now(), text: this.newMessage });
           this.newMessage = '';
         }
       }
     }
   }
   </script>

5. **应用组件到主路由**:
在`src/App.vue`中引入并使用`NoticeBoard`组件，并设置路由系统。

6. **运行开发服务器**:
启动本地服务：

   npm run serve

现在你可以访问 `http://localhost:8080` 来查看和测试你的公告栏项目。