webpack与vue集成【含vue2和vue3】下

三、webpack搭建vue3开发环境（参考上一条博客）

webpack与vue集成【含vue2和vue3】上_小榄有点懒的博客-CSDN博客

3.1 安装vue3相关依赖

卸载vue2依赖

npm uninstall vue-loader vue-template-compiler
npm uninstall vue vue-router vuex

安装vue3依赖

npm i vue-loader -D
npm i vue vue-router vuex

  "vue-loader": "^17.0.1",

  "dependencies": {
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
    "vuex": "^4.1.0"
  }

3.2 测试vue3代码

main.js入口代码：

import { createApp } from "vue";
import App from "./App";

const app = createApp(App);
app.mount("#app");

3.3 集成vue3版本vue-router

import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from "vue-router";

import Login from "../views/Login";
import Home from "../views/Home";

//配置路由
const routes = [
  {
    path: "/",
    redirect: "/login",
  },
  {
    path: "/login",
    name: "login",
    component: Login,
  },
  {
    path: "/home",
    name: "home",
    component: Home,
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

//抛出路由
export default router;

3.4 集成vue3版本vuex

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

// Vue.use(Vuex);

import { createStore } from "vuex";

//实例化vuex --5大核心
const store = createStore({
  state: {
    token: "afa79f7adf7adf7ad9f7as9df",
  },
  actions: {
    setToken({ commit }, v) {
      console.log("actions--setToken方法", v);
      commit("SETTOKEN", v);
    },
  },
  mutations: {
    SETTOKEN(state, v) {
      state.token = v;
    },
  },
  getters: {},
  modules: {},
});

//抛出store
export default store;