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);  });