导图 1
配套工具
  VueCLI 构建工具
    删除Vue-cli
      npm uninstall vue-cli -g
      yarn global remove vue-cli
    安装vue-cli
      最新版：npm install -g @vue/cli
      固定版： npm install -g @vue/cli@4.5.9
    创建项目：vue create demo(项目名称)
    启动项目： npm run serve
    安装项目依赖： npm install
  Vue-Router路由
    作用：根据URL的不同，展示不同的内容
    <router-link to="/">Home</router-link> 模板中使用的路由跳转标签
    <router-view/>标签， 负责展示当前路由对应的组件内容
    异步加载路由：component:( ) => import('../xxxx')
  VueX语法
    作用: Vuex数据管理框架，VueX创建了一个全局唯一的仓库，用来存放全局的数据。
    声明数据：state:{name:'jspang'}
    获取数据：computed:{myName(){return this.$store.state.name;}}
    修改数据
      步骤1. dispatch方法，派发action，名字叫做change：this.$store.dispatch('change')
      步骤2.感知到change，这个action，执行store中actions下面的change方法
        编写/store/index.js下actions: change(){console.log('jspang.com')}
        VueX的store自动感知到你派发出了一个叫做change的action，并执行action方法
      步骤3.commit 提交一个叫做change的数据改变
        在/store/index下actions里编写:change( ){this.commit('change')}
      步骤4：mutation 感知到提交的change改变，执行change方法
        在/store/index下muations里编写：change(){console.log('mutation')}
      步骤5：在Mutation里修改数据
        在/store/index下muations里编写：change(){this.state.name="技术胖"}
    PS:在mutation里面只允许写同步代码，不允许写异步代码。如果要写异步操作，可以在actions里进行。
  Vetur：VSCode中的代码提示工具