Vue-Cli的一些配套插件的使用

1.vue-router的使用

 

//router的配置
//指定路径和要引用的组件的名字
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    //懒加载 即切换到这个路径才会加载
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

  

 <div id="nav">
    <!-- 是跳转路由的标签 -->
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
<!-- 路由的展示标签 -->
  <router-view />

2.Vuex的使用

 

 methods: {
    handleClick() {
      // 第一步必须派发action
      // 如果不是异步事件，也可以直接commit
      this.$store.dispatch("change", "hello");
    },
  },

import { createStore } from "vuex";

// vuex 创建了一个全局的唯一的仓库 用来存放全局数据
//vuex 数据管理框架
export default createStore({
  state: {
    name: "dell",
  },
  mutations: {
    // 第四步 对应的mutations被执行
    // 最好不要在这里写异步操作
    change(state, str) {
      // 第五步 在mutations里修改数据
      state.name = "lee";
    },
    changeName(state, str) {
      state.name = str;
    },
  },
  // dispatch --> actions
  // commit --> mutations
  actions: {
    // 第二步 store感知到你触发change action 调用change方法
    // 在这里写异步的操作
    change(store, str) {
      // 第三步  提交一个commit 触发一个mutation
      store.commit("change", str);
    },
    getData(store) {
      setTimeout(() => {
        store.commit("changeName", "hello");
      }, 1000);
    },
  },
});