Vue技术栈开发目录与实用示例

在使用Vue技术栈开发管理系统时，建立高效的开发目录结构至关重要。以下是我基于实际项目总结的开发目录和实用技巧，供开发者参考。

开发依赖

项目中主要依赖包括：

状态管理：Vuex

前端框架：Vue + Vue Router

组件库：Element UI

网络请求：Vue Axios

代码规范：Babel Polyfill

开发目录结构

核心模块划分

├── api/                 # API接口管理
│   ├── config.js        # 请求配置
│   ├── index.js         # axios封装
│   └── types.js        # 接口类型定义
├── components/          # 组件库
│   ├── el-icon/         # icon组件
│   │   ├── Icon.vue
│   │   └── assets/    # 图标素材
│   └── el-message/    # 消息提示组件
├── plugins/            # Vue插件目录
├── router/            # 路由定义
│   └── index.js      # 路由配置
├── store/             # Vuex状态管理
│   ├── index.js      # 主状态管理
│   └── types.js     # 状态类型定义
├── views/             # 业务组件
│   ├── Home.vue       # 主页面
│   └── Login.vue      # 登录页面
└── main.js            # 项目入口

特点说明

模块划分清晰：按功能划分目录，方便开发与维护。

组件管理系统化：建立组件库，支持快速复用。

状态管理集中：Vuex负责全局状态管理，按业务功能划分模块。

API管理规范：统一接口定义和请求处理。

项目入口（main.js）

import Vue from 'vue';
import 'babel-polyfill';
import App from './App.vue';
import router from './router';
import store from './store/index.js';
import { gl_ajax } from './api/index.js';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.prototype.$gl_ajax = gl_ajax;
Vue.config.productionTip = false;
Vue.use(ElementUI);
new Vue({
  el: '#app',
  store,
  router,
  components: {
    App,
  },
  template: '
   
   '
});

特点说明

插件加载：动态加载Element UI组件库。

自定义函数挂载：将gl_ajax函数挂载到Vue.prototype.$gl_ajax，方便全局使用。

生产环境优化：关闭开发者模式提示。

路由定义与守卫

路由配置（router/index.js）

import Vue from 'vue';
import VueRouter from 'vue-router';
import store from '../store/index.js';
import * as types from '../store/types.js';
Vue.use(VueRouter);
const routes = [
  { path: '', redirect: '/login' },
  { path: '/', component: require('@/views/Home.vue'), children: [
    { path: '/admin', name: 'admin', component: require('@/views/index.vue') }
  ] },
  { path: '/login', name: 'Login', component: require('@/views/Login.vue') }
];
const router = new VueRouter({
  mode: 'history',
  routes
});
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    store.commit(types.LOGOUT);
    next();
  } else {
    const token = sessionStorage.getItem('token');
    if (!token) {
      next({ path: '/login', query: { redirect: to.fullPath } });
    } else {
      next();
    }
  }
});
export default router;

路由守卫功能

登录页面跳转：未登录用户无法访问非登录页面。

token验证：检查sessionStorage中的token，确保登录状态。

重定向机制：登录失败或权限失效时，自动跳转到登录页面。

全局数据存储（Vuex）

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import * as types from './types.js';
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    token: null
  },
  mutations: {
    [types.LOGOUT]: (state, data) => {
      sessionStorage.removeItem('token');
      state.token = null;
    },
    [types.LOGIN]: (state, data) => {
      sessionStorage.setItem('token', data);
      state.token = data;
    }
  },
  actions: {},
  getters: {}
});

退出功能

清除sessionStorage：防止浏览器刷新丢失token。

触发路由跳转：返回登录页面，提示401认证错误。

Axios请求封装

api/index.js

export const gl_ajax = params => {
  return axios({
    method: params.method.toLowerCase(),
    url: `${axios.defaults.baseURL}${params.url}`,
    data: params.method !== 'get' ? params.data : '',
    params: params.method === 'get' ? params.data : '',
    responseType: params.file ? 'blob' : ''
  })
  .then(res => {
    params.success && params.success(res);
  })
  .catch(err => {
    params.error && params.error(err);
  });
};

特点说明

二次封装：增强请求参数处理能力。

文件下载支持：支持responseType为blob的文件下载。

gl_ajax使用示例

登录功能示例

特点说明

简洁接口：通过gl_ajax统一处理各种请求。

数据处理：支持get和post方法，适用于不同接口。

路由拦截与错误处理

axios拦截器

axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          store.commit(types.LOGOUT);
          router.replace({
            path: '/login',
            query: { redirect: router.currentRoute.path }
          });
          const message = error.response.data.message ? '未知错误' : '登录失败';
          Message.error(message);
          break;
        case 403:
          Message.error('权限不足');
          router.replace({ path: '/login' });
          break;
      }
    } else if (error.code === 'ECONNABORTED' && error.message.includes('timeout')) {
      Message.error('请求超时');
    }
    return Promise.reject(error);
  }
);