vue-cli做一个聊天室项目笔记（一）

跟着这个教程做的https://www.bilibili.com/video/BV1m741137Q5?p=20

1、静态资源放置

2、data要return（其实就是return回html）

3、Strings must use singlequote
String必须使用单引号

data /空格 （）/空格 {}

4、父传子
1、先在子组件上定义传了一个父组件内的userlist

2、父传来的对象在子层用property注册一下名字，就能拿来用了

3、就把userlist当自己的属性值一样使用就好了

生成一个这样的页面：

4、写一下样式

5、报了一个错
index.js?bed3:161 [WDS] Errors while compiling. Reload prevented.

经查询：https://blog.****.net/xxialn/article/details/80286668
意思是[WDS]编译时出错。 重新加载被阻止。
解决办法：安装热更新，在命令行命令为输入：
npm install webpack-dev-server --save-dev即可，
此时重新启动工程npm run dev。

6、点击左侧用户，聊天框上方名字将改成用户名，数据传递方向：list->app->chat，定义一个方法。

list.vue：使用chooseUser方法，传入index，chooseUser会调用父组件中的方法，传参


对于app.vue父组件：
1、监听list定义子组件要调用的chooseuser方法，chooseuser事件会调用toggleUser方法

2、

3、

chat.vue，接收传下来的对象并展示


这样就完成了一个最基本的操作，点击list列表值，聊天窗口对象随之改变。