src/
├── assets/
├── components/
├── views/
├── store/
├── router/
└── services/
// store/modules/user.js
export default {
state: {
userInfo: {}
},
mutations: {
setUserInfo(state, userInfo) {
state.userInfo = userInfo;
}
},
actions: {
fetchUserInfo({ commit }) {
// API call logic
commit('setUserInfo', userInfo);
}
}
};
// components/BaseButton.vue
<template>
<button :class="btnClass" @click="handleClick">Click me</button>
</template>
<script>
export default {
props: ['btnClass'],
methods: {
handleClick() {
this.$emit('click');
}
}
};
</script>
BaseButton.vue handle only UI.const routes = [
{
path: '/home',
component: () => import('@/views/Home.vue') // Lazy-loaded
}
];
// webpack.config.js
optimization: {
splitChunks: {
chunks: 'all',
}
}
// test/components/BaseButton.spec.js
import { mount } from '@vue/test-utils';
import BaseButton from '@/components/BaseButton.vue';
test('renders a button and emits click event', async () => {
const wrapper = mount(BaseButton);
await wrapper.trigger('click');
expect(wrapper.emitted().click).toBeTruthy();
});
Following these practices will help you structure your large-scale Vue.js application for scalability and maintainability. By organizing components, using Vuex for state management, implementing lazy loading, and writing tests, you ensure that your app remains robust and easy to expand.