第二节:vuex与wabpack基本配置
2.进行安装vuex或者3.配置store新建以及store里边的4.继续在main.js 导入store 以及挂载状态。
·
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":""
}
}
})
更多推荐
已为社区贡献9条内容
所有评论(0)