简单的聊天程序（二）：配置Vue-cli以加速开发

        上一章--简单的聊天程序（一）：HTML+CSS实现响应式界面已经实现了响应式的界面，接下来我们要实现一些简单的交互操作。

        预期结果 

        在左边切换不同的对话人物，并显示与其聊天记录；在输入框输入文字后按下发送按钮就会显示在上方的聊天记录区域内，并在信息下方显示发送的时间；在信息数量变多屏幕显示不下时，显示页面滚动条。

        Vue-cli的配置

        vue-cli基于vue.js，可快速开发，快速生成工程化项目。首先我们对其配置，然后将上一章的HTML界面和css样式粘入。

        首先我们在任意位置创建任意名的文件夹，我这里在桌面创建了名为projects的文件夹，如下图：

        接下来依次点击VS code的这些部分调出终端：

        确保正常安装了node.js和npm，没有安装的话可以去参考一下网络上其他作者写的文章，这里不再详细讲解。终端输入node -v查看node.js版本，我这里安装的比较早，不是最新版本，安装时直接安装最新版本即可。

        接下来在终端输入命令npm install -g @vue/cli，让软件自行安装vue-cli：

         安装完成后在终端输入下一条指令vue create project1，注意这里的“project1”是你自己的项目名称，可任意修改，程序会在此目录下创建一个你的项目名称的文件夹，里面包含了vue-cli的各个组件等。

        输入命令后程序会让你选择使用vue3还是vue2，键盘上下键选择，回车键确定。这里我选择了vue3，即此界面下直接回车。

         终端显示以下文字表示创建完成：

         这时候我们根据终端的提示先输入cd .\project1\进入新建项目project1的根目录，再输入npm run serve运行该程序，出现以下文字表示程序已成功运行（此处的默认端口应该为8080，但是我的8080端口运行着另外一个程序，因此它自动将此项目运行在了8081端口）：

&nbs