1. 引入vue.js文件（CDN文件，便捷）

2. 新建元素

3. 创建vue对象，绑定元素，赋值

   
   

new Vue({
 //指定绑定的dom元素
 el：'',
 //vue对象定义的数据变量
 data: {
     //变量名和变量值
     msg: 'hello vue'
 }
})

软回车：shift + enter，这样就不会因为回车而执行。

引用在线的库时，如果不是要调试这个库，可以引用压缩版的，即.min...，而且能够节约网络响应的时间。

vue的开发环境

集成场景！

import store from '@/store'
export default {
    name: "info",
    store,
    data () {
      return {
          msg : 'hello vue in china'
      }
    },
    mounted (){
        window.vue = this;
    },
    methods: {
        add () {
            console.log('add event from info!');
            alert(1)
            debugger
            store.commit('increase')
        },
        output () {
            console.log('this is output')
        }
    }
}

<script>
    import store from '@/store'
    export default {
        name: "info",
        store,
        data () {
          return {
              msg : 'hello vue in china'
          }
        },
        methods: {
            add () {
                console.log('add event from info!');
                alert(1)
                debugger
                store.commit('increase')
            }
        }
    }
</script>

this.msg

import store from '@/store'
export default {
    name: "info",
    store,
    data () {
      return {
          msg : 'hello vue in china'
      }
    },
    methods: {
        add () {
            console.log('add event from info!');
            alert(1)
            debugger
            store.commit('increase')
        },
        output () {
            console.log('this is output')
        }
    }
}

调试方式

console.log     console.error

alert

debugger

@ 代表src 目录 是在vue 配置文件中 配置的

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>
<script>
  import store from '@/store'
  export default {
    name: "about",
    store,
    data () {
     return {
       msg : store.state.count
     }
    }
  }
</script>

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count : 0
  },
  mutations: {
    increase () {
      this.state.count++
    }
  },
  actions: {

  },
});

        <button type="button" @click="add()">add</button>
    </div>
</template>

<script>
    import store from '@/store'
    export default {
        name: "info",
        store,
        methods: {
            add () {
                console.log('add event from info!');
                store.commit('increase')
            }
        }
    }
</script>

npm run serve

vuex 规则

状态管理模式

集中管理

统一的规则

新建文件 vuex 会自动生成store.js 文件

菜单导航

评论弹幕

都是用多个views 构成，用户的操作会带来视图的状态的变化 state   ，然后会进行更新，actions

自己能看懂的代码 

别人能看懂的代码

格式与命名规范

https://cn.vuejs.org/v2/style-guide/

什么是组件化？

独立的，可复用的，整体化的

为什么要组件化？

实现功能模块的复用；

高执行效率；

开发单页面复杂应用；

如何进行拆分？

300行原则；复用原则；业务复杂性原则；

组件带来的问题：

组件状态管理vuex;多组件的混合使用，多页面，复杂业务（vue-router）;

组件间的传参，消息，事件管理（props, emit/on, bus）

package.json

安装的依赖包 版本号