vue模块化实现
Vue 模块化实现方法
使用单文件组件（SFC）
Vue 的单文件组件（.vue 文件）是模块化的核心。一个文件包含模板、脚本和样式，便于维护和复用。
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
}
}
</script>
<style scoped>
div {
color: red;
}
</style>组件注册与引用
通过 import 引入组件，并在父组件中注册使用。
// ChildComponent.vue
<template>
<button @click="emitEvent">Click Me</button>
</template>
<script>
export default {
methods: {
emitEvent() {
this.$emit('custom-event', 'data');
}
}
}
</script>
// ParentComponent.vue
<template>
<child-component @custom-event="handleEvent" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleEvent(data) {
console.log(data);
}
}
}
</script>Vuex 状态管理
对于跨组件状态共享，使用 Vuex 将状态和逻辑模块化。
// store/modules/user.js
export default {
namespaced: true,
state: () => ({
name: 'User'
}),
mutations: {
updateName(state, payload) {
state.name = payload;
}
}
};
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
user
}
});
// 组件中使用
<script>
import { mapState, mapMutations } from 'vuex';
export default {
computed: {
...mapState('user', ['name'])
},
methods: {
...mapMutations('user', ['updateName'])
}
}
</script>插件与混入（Mixins）
通过插件或混入复用逻辑，避免代码重复。
// mixins/logger.js
export default {
created() {
console.log('Component created');
}
};
// 组件中使用
<script>
import logger from '../mixins/logger';
export default {
mixins: [logger]
}
</script>动态导入与懒加载
使用动态导入实现路由或组件的懒加载，优化性能。
// 路由配置
const routes = [
{
path: '/dashboard',
component: () => import('./views/Dashboard.vue')
}
];工具函数模块化
将工具函数拆分为独立模块，便于复用。
// utils/format.js
export function formatDate(date) {
return new Date(date).toLocaleString();
}
// 组件中使用
<script>
import { formatDate } from '../utils/format';
export default {
methods: {
showDate(date) {
return formatDate(date);
}
}
}
</script>
