【vue+webpack开发游戏】 1.$emit和$on实现组件间通信 2.通过css实现UI显示隐藏

1)安装node.js

2)安装vue cli
    npm install -g @vue/cli
    
    npm i -g @vue/cli-init // 必做

3)新建:项目
    vue init webpack cardBattle
    然后各种y
    
4)运行:创建的脚手架项目
    cd cardBattle
    npm run dev
    
5)发布：
    npm run build   // 此时就会生成dist目录

6)vue的一些生命周期函数:
    mounted: 相当于构造函数

    methods: 里面的可以在template中使用，比如:onBtnClick

7)组件间通信
    Event: new Vue();
    
    Event.$emit("xxx", xxx);
    Event.$on("xxx", function(){
        // 写其它页面发来的监听逻辑
    }.bind(this));
    
8)场景的切换
    使用class 和  data(){} 中的数据，通过vue的mvvm机制，实现隐藏之类的。
    
9)通过css实现反转效果

10)vue的缺点：
    无法实现组件化：
        比如：点击响应按钮，还要搞多个btnClickA、btnClickB、btnClickC。
        再比如：还要设置多个css，及时一样。
        
11)vue是mvc架构，响应式是mvvm，还是分开说比较好。
    mvc:
        v: template（视图，包含css）
        m: data里面的东西，根据数据驱动UI的显示。 这种数据驱动，在底层实现成了mvvm，是双向绑定的。
        c：各种方法，methods是要绑定的方法，其它的是自己的。
        
12)css里面的这种：xx > xx.xx  需要注意下是啥意思。

13)动画的实现：
    @keyframes shake {
        0% {xxx}
        20% {xxx}
    
    }
    
14)通过document.querySelector找到元素对象