本文章将讲一讲如何利用vue实现一个留言板的功能。

1.下载NodeJS提供一个执行js代码的环境。

直接去官网下载就行。

点击进入nodejs官网

发现有两个版本，左侧.msi是安装程序，右侧的.zip是已经编译好的二进制文件，这里推荐直接下载右侧的.zip文件。下载之后解压点击.exe文件就能直接运行了。

但是我们要在全局使用nodejs，所以我们去配置一下环境变量，直接复制此文件夹路径就可以了。如图所示：

配置好之后按下win+r输入cmd进入命令行输入node -v测试环境变量是否配置成功。

显示版本号即为成功。

2.在vscode中创建一个新文件夹用来写代码。

将文件夹拖入vscode或在vscode打开此文件夹。在文件资源管理器打开此文件夹，点击路径输入cmd，在此路径打开命令行。

输入npm create vite创建一个vite项目，输入项目名字这里我用hello，选择vue和JavaScript。

输入cd hello进入hello文件夹里面，输入npm install cnpm -g在全局安装cnpm这样的中国镜像来加快下载。输入cnpm i即可下载此vite项目的所有依赖。

下载完成之后就可以启动我们的项目了。

3.启动项目&编写代码

输入npm run dev启动项目

复制网址到浏览器就能打开初始化的网页

在vscode里找到hello/src/App.vue。清空内容。输入vue基础模板

<template>
  <div>
    
  </div>
</template>

<script setup>

</script>

<style scoped>

</style>

此模板分为三个大标签，第一个标签里面写html，第二个写js，第三个写css，这里我们写前两个标签就行。

留言板肯定得输入吧，于是在第一个大标签里面的div标签里写一个input标签，有输入怎么能没输出，所以来一个ul+li标签显示列表消息，有输入有输出，但是输入和输出怎么联系起来呢？于是我们来一个按钮，并为按钮绑定点击事件，点击事件的实现要在js里面也就是第二个大标签实现，我们点击此按钮就把输入框里面的内容输出到ul列表里面，再清空输入框以便下一次输入。

附上完整代码：

<template>
  <div>
    <ul>
      <!-- 循环打印message_list里面的值 -->
      <li v-for="(item,index) in message_list" :key="index">
        {{ item }}
      </li>
    </ul>
    <input v-model="input_message"/>
    <button @click="handleClick">发送</button>
  </div>
</template>

<script setup>
import {ref} from "vue";

const message_list = ref([]);

const input_message = ref(null);

    const handleClick = () => {
      message_list.value.push(input_message.value);//输入值推入消息列表
      input_message.value=null;//将输入框清空
    }
</script>

<style scoped>

</style>

效果如图所示：