第二节：vuex与wabpack基本配置

vuex

1.：vuex官网
2.进行安装vuex npm install vuex@next --save或者yarn add vuex@next --save
3.配置store 新建store文件夹以及store里边的index.js

import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
export default store

4.继续在main.js 导入store 以及挂载状态

import { createApp } from 'vue'
import './style.css'
import App from '@/App.vue'
// 导入路由
import router from '@/router/index'
// 导入状态管理
import store from '@/store/index'

 //创建并挂载根实例
 const app =createApp(App)
 app.use(router)//整个应用支持路由
 app.use(store)//整个应用支持状态管理
//  挂载根应用
 app.mount('#app')

进行wabpack配置 1.打包地址 2.路径由./ …/换成@3.如果接口有跨域问题,可以设置服务器代理

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
  base:"./",//1.进行编译打包地址
  plugins: [vue()],
  // 2.设置资源路径别名 路径不用./ 或者../  直接@
  resolve:{
    alias:{
      //配置别名
        '@':path.resolve(__dirname,"src"),//仅在src路径文件夹使用@
    }
  },
  // 3.如果接口有跨域问题,可以设置服务器代理
  server:{
    proxy:{
      // "/api":""
    }
  }
})