vue/cli3 中配置路由和 vuex , 解決 core-js 報錯問題

用vue/cli4多了, cli4 會讓你選擇需要使用到的東西 router  vuex

但是在cli3 中, 是沒有這些配置的 , 我們在項目中需要自己配制

router 配置如下

import Vue from "vue";
import Router from "vue-router";

import Login from "../components/login";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      redirect: "/login",
    },
    {
      path: "/login",
      component: Login,
    },
  ],
});

在main入口文件中

// 導入路由
import router from "./router/router";

new Vue({
  render: (h) => h(App),
  router,
  store,
}).$mount("#app");

 

使用vuex

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 199,
    msg: 'hello world'
  },
  mutations: {},
});

export default store;

在main入口文件中

// 導入路由
import router from "./router/router";

new Vue({
  render: (h) => h(App),
  router,
  store,
}).$mount("#app");

如果在組件中使用了展開運算符 , 並且報錯了

<script>
// import { mapState } from "vuex";
import { mapState } from "vuex";

export default {
  data: function () {
    return {};
  },
  methods: {},

  computed: {
    ...mapState(["msg"]),
  },
};
</script>

或者提示  安裝 core-js@2 的時候 , 不要直接去安裝 core-js@2 , 依舊會報錯

推薦

npm install core-js --save

也就是忽略它推薦的版本號 , 不然 bug 似乎並不能 完美解決