store模块化管理主要是满足不同开发人员的需求、避免使用单一store文件导致命名冲突。同时在main里定义了统一的模块文件满足大多数项目开发的场景需求。
文件所属store>main.js
import Vue from 'vue' import Vuex from 'vuex' import router from '@/router' import Axios from 'axios' import createPersistedState from 'vuex-persistedstate' import baseInfo_store from './baseInfo' Vue.use(Vuex) const store = new Vuex.Store({ // 用不同的模块管理vuex存储数据 modules: { baseInfoStore: baseInfo_store, //userInfo模块 }, plugins: [createPersistedState({ storage: window.sessionStorage })] }) //切换页面一般需要的loading动画状态 store.registerModule('pageSwitch', { state: { isLoading: false }, mutations: { updateLoadingStatus (state, payload) { state.isLoading = payload.isLoading } } }) //切换路由的同时切换title router.beforeEach(function (to, from, next) { if(to.meta.title){ document.title = to.meta.title } store.commit('updateLoadingStatus', {isLoading: true}) next() }) router.afterEach(function (to) { store.commit('updateLoadingStatus', {isLoading: false}) }) //ajax请求的动画状态 store.registerModule('ajaxSwitch', { state: { ajaxIsLoading: false, ajaxIsPrompt: false, }, mutations: { ajaxStar (state) { state.ajaxIsLoading = true }, ajaxEnd (state) { state.ajaxIsLoading = false }, ajaxPromptShow (state) { state.ajaxIsPrompt = true }, ajaxPromptHide (state) { state.ajaxIsPrompt = false } }, getter : { ajaxIsLoading: state => state.ajaxIsLoading } }) //请求拦截 Axios.interceptors.request.use(config => { store.commit('ajaxStar') return config; }) //响应拦截 Axios.interceptors.response.use(config => { //需要拦截的请求头 return config }) export default store;
在main.js引入
import store from '@/store/main.js';
main.js的最终形式
import Vue from 'vue' import App from './App' import router from './router' import axios from 'axios'; import "babel-polyfill"; import store from '@/store/main.js'; //自定义全局mixin import mixins from '@/components/common/mixins' Vue.mixin(mixins) //自定义全局指令 import directive from '@/components/common/directive' Vue.use(directive) Vue.config.productionTip = false Vue.prototype.$http = axios; /* eslint-disable no-new */ new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' })
解决vue-cli 初始配置的打包路径问题
其实这个在上面文件中已经有体现了，在这里再次提及一下。
步骤1：修改config>index.js文件
将build{ }下的assetsPublicPath改为如下
assetsPublicPath: './',
步骤2：修改build>utils.js文件
找到 fallback: 'vue-style-loader'，在其下加入下面这一行
publicPath: '../../'
结语
至此，一个基本完备的vue项目“脚手架”就完成了，以后每次初始化项目都可以按照这套方案来进行，省去了很多协作开发的交流环节，形成了能够满足大多数项目的目录及文件构成形式，将此项目托管至私服每次初始化项目只需拉取这个“脚手架”便能省区不少初始化项目的时间，岂不美哉！
此“脚手架”项目已开源至github，欢迎大家提出建议和互相交流，同时也可随意将项目拉下来进行使用。