vue实现一个系统

Vue 实现一个系统的基本步骤

项目初始化

使用 Vue CLI 或 Vite 初始化项目，安装必要依赖如 Vue Router、Vuex/Pinia、Axios 等。选择适合的 UI 框架如 Element Plus、Ant Design Vue 或自定义组件。

npm init vue@latest my-system
cd my-system
npm install vue-router pinia axios element-plus

路由配置

在 src/router/index.js 中配置路由，定义系统模块的页面路径和懒加载。

const routes = [
  {
    path: '/login',
    component: () => import('@/views/Login.vue')
  },
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { requiresAuth: true }
  }
]

状态管理

使用 Pinia 或 Vuex 管理全局状态，如用户信息、权限数据等。创建 stores/userStore.js 存储会话信息。

export const useUserStore = defineStore('user', {
  state: () => ({
    token: null,
    roles: []
  }),
  actions: {
    async login(formData) {
      const res = await api.login(formData)
      this.token = res.data.token
    }
  }
})

API 封装

在 src/api 目录下封装 HTTP 请求，使用 Axios 实例配置拦截器处理全局错误和权限验证。

const service = axios.create({
  baseURL: '/api',
  timeout: 5000
})

service.interceptors.request.use(config => {
  if (store.token) {
    config.headers.Authorization = `Bearer ${store.token}`
  }
  return config
})

权限控制

实现路由守卫检查用户权限，在 router.beforeEach 中验证 meta 字段并动态加载可访问路由。

router.beforeEach(async (to) => {
  const store = useUserStore()
  if (to.meta.requiresAuth && !store.token) {
    return '/login'
  }
})

组件开发

按功能模块划分组件，使用 views 目录存放页面级组件，components 存放复用组件。通过 props/emits 实现数据流。

<template>
  <el-table :data="tableData">
    <template #action="{ row }">
      <el-button @click="handleEdit(row)">编辑</el-button>
    </template>
  </el-table>
</template>

样式管理

采用 CSS 预处理器如 SCSS，使用 BEM 命名规范或 CSS Modules 避免样式冲突。全局样式定义在 assets/styles 中。

.table-container {
  &__header {
    background: var(--el-color-primary);
  }
}

构建部署

配置环境变量区分开发和生产环境，通过 vite.config.js 设置代理和打包优化。

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js'
      }
    }
  }
})

性能优化

实现路由懒加载、组件异步加载，使用 v-lazy 指令延迟加载图片，通过 Tree Shaking 减少打包体积。

<template>
  <img v-lazy="imgUrl" />
</template>

<script setup>
defineAsyncComponent(() => import('./HeavyComponent.vue'))
</script>

测试验证

编写 Jest 单元测试验证组件逻辑，使用 Cypress 进行 E2E 测试关键业务流程。

describe('Login.vue', () => {
  it('submits form with valid data', async () => {
    const wrapper = mount(Login)
    await wrapper.find('form').trigger('submit')
    expect(api.login).toHaveBeenCalled()
  })
})