正文 

当前位置： 首页 > 技术 > java教程

vue项目的一些最佳实践提炼和经验总结(代码片段)

zhouqy zhouqy     2023-02-27     295

关键词：

  • 项目组织结构
  • ajax数据请求的封装和api接口的模块化管理
  • 第三方库按需加载
  • 利用less的深度选择器优雅覆盖当前页面UI库组件的样式
  • webpack实时打包进度
  • vue组件中选项的顺序
  • 路由的懒加载
  • 路由模块拆分化管理

项目组织结构

清晰的项目结构能让别人开发进来更容易理解，当然，每个人都有一定的代码风格习惯。但基于vue开发框架的项目，vue-cli脚手架搭建的项目组织结构大同小异。同时，预想到后面的需求变更及功能增加进展得更有效率，下面截图是我觉得比较好的项目组织结构：

技术分享图片

这个截图只是针对个人觉得比较通用的vue工程结构，不过这个结构要根据具体的项目情况调整，不必为了模块化而模块化。模块化的优势就是体现在项目业务比较复杂的情况，如果项目业务逻辑并不复杂，可以适当的删减部分模块或文件。

相关说明：

assets: 存放图片、UI设计的图标文件

componets：自研的业务型及通用型组件

router：项目的路由管理模块

store：基于vuex的状态管理容器，api存放各模块的数据请求，modules存放将store分割成模块（module），按官网的说法，每个模块应该拥有自己的 state、mutation、action、getter，主要是解决应用的所有状态如果全部集中到一个比较大的store对象，当应用变得非常复杂时，store 对象就有可能变得相当臃肿而难以维护。

技术分享图片

例子：

其中的一个模块configManage.js

import 
  configManageService
 from "../api/index"
// state
const state = 
 accountMenuList:[]

// getters
const getters = 
// 菜单
menuTree: state => 
    return state.accountMenuList;
  ,

// actions
const actions = 
  async GET_ACCOUT_MENU(
    state,
    commit
  , model) 
    // 参数 state为当前局部状态,commit响应式改变当前绑定的菜单数据
    const res = await configManageService.getACountMenu(model);
    commit("CHANGE_MENU", res.data);
  

// mutations
const mutations = 
  CHANGE_MENU: (data) => 
    state.accountMenuList = data;
  

export default 
  state,
  getters,
  actions,
  mutations

index.js，统一出口，导出全部的store模块

import Vue from ‘vue‘
import Vuex from ‘vuex‘
import index from ‘./modules/index‘
import report from ‘./modules/report‘
import createLogger from ‘vuex/dist/logger‘ // 控制台输出当前变化的某个状态
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== ‘production‘ // 生产或开发环境打包
export const indexStore = new Vuex.Store(
  modules: 
    report,
    index
  ,
  strict: debug, // 按照官网建议，改变state的状态只能通过getter
  plugins: debug ? [createLogger()] : []
)

style：

存放重写UI库的样式和不同组件公共样式文件

util：

存放用es6封装的工具类，http请求类，配置类、校验类、事件类等

技术分享图片

views：

存放各路由模块页面

技术分享图片

static：

存放全局配置文件，环境域名等

iconfont：

存放字体图标文件

ajax数据请求的封装和api接口的模块化管理

基于vue的项目，与后台请求数据我们通常使用的是axios，它是基于promise的http库，其提供的优秀的特性被广泛运用在项目当中，官方已推荐使用axios，放弃原有的vue-resource。

1、axios的封装，在很多业务场景下用来进行请求的拦截、响应的拦截及请求超时等；

// axios请求类，一些基础化配置
class AjaxRequestModel 
  constructor(model) 
    this.url = model.url || "";
    this.data = model.data || ;
    this.method = model.method || "POST";
    // this.success = model.success || function () ;
    // this.fail = model.fail || function () ;
    // this.slientSuccess = model.slientSuccess || true;
    this.failMsg = model.failMsg || true;
    this.baseUrl = model.baseUrl || window.sysConfig.baseUrl;
    this.loading = model.loading || true;
    // this.setData();
    this.setUrl();
  
  setData() 
    // let options = 
    //   sessionid: ""
    // ;
    this.data = Object.assign(, this.data);
  
  setUrl() 
    this.url = this.baseUrl + this.url;
  

// 实例化axios，配置请求超时时间
const axiosInstance = axios.create(
  timeout: 1000 * 20
);
// 封装ajaxService函数，以更少的代码处理get、post、delete、put请求方式，同时支持async、await异步处理方案，返回promise
const ajaxService = param => 
  let model = new AjaxRequestModel(param);
  let o = 
    url: model.url,
    data: model.data,
    method: model.method
  ;
  // if (model.loading) 
  //   ak.Msg.showLoading();
  // 
  if (model.method === "GET") 
    o = 
      url: model.url,
      params: model.data,
      method: model.method
    ;
  
  return new Promise((resolve, reject) => 
    axiosInstance
      .request(o)
      .then(res => 
        if (res.data.code === 200 || res.data.code === 0) 
          resolve(res.data);
         else 
          ak.Msg.toast(res.data.message, "error");
          reject(res.data);
        
      )
      .catch(err => 
        httpResponseHandle.call(err);
        reject(err);
      );
  );
;

2、在请求的拦截中，可以携带用于接口身份验证的token，配置headers请求头、提交参数的序列化等

// 请求头相关配置
axiosInstance.interceptors.request.use(
  function (config) 
    const info = ak.Utils.getSessionStorage("USER_INFO");
    config.headers.common[‘token‘] = info ? info[0].token : "";
    // config.headers.common[‘Content-Type‘] = "application/json";
    return config;
  ,
  function (error) 
    return Promise.reject(error);
  
);

3、在响应的拦截中，可以进行根据各种状态码来进行错误的统一处理等

const httpResponseHandle = err => 
  const opt = err.response;
  // 请求超时
  if (err.code === "ECONNABORTED") 
    ak.Msg.toast("请求超时，请稍后再试", "error");
  
  if (opt.status === 401) 
    ak.Msg.confirm("用户登录超时，请重新登录", () => 
      sessionStorage.removeItem("USER_INFO");
      window.utryVue.$router.replace("/login");
      location.reload();
    );
   else 
    ak.Msg.toast(opt.data.message, "error");
  
;

4、api接口模块化管理，业务逻辑和数据请求分层，这样可以很方便统一管理我们的接口

如图，把不同的功能拆分，实现代码模块化管理，全部的接口均放在api文件夹下面。index.js是一个api接口的导出的出口，这样就可以把api接口根据功能划分为多个模块，利于多人协作开发，比如一个人只负责一个模块的开发等，还能方便每个模块中接口的命名

技术分享图片

index.js:

import report from ‘./report‘; // 报表模块
import accountService from ‘./accountService‘; // 登陆、用户信息相关
// 导出接口
export 
  accountService,
  report

API请求service层：

// 报表管理请求模块，与后台请求的参数、请求方式、url均看作一个model
import http from "@/util/http.js";
const API_CONTEXT = "sys/"; // 请求的上下文
const report = 
  async getMenuList() 
    let model = ;
    model.url = API_CONTEXT + "category/getCategoryTree";
    model.method = "GET";
    let res = await http.ajaxService(model);
    return res;
  ,
  async removeMenu(model) 
    model.data =  ...model ;
    model.url = API_CONTEXT + "category/removeCategory";
    let res = await http.ajaxService(model);
    return res;
  

export default report;

组件的业务逻辑层调用方式：

// 说明：async、await的写法省去了不少的回调，在有些必须请求两个接口或者两个接口以上场景下，async、await优势就显示出来了
import  reportService  from "../../store/api/index";
async getMenuList() 
      const param = 
        role: ""
      ;
      const res = await reportService.getMenuList(param);
      // 下面代码返回成功时才执行，错误由上面所讲的axios封装ajaxService统一处理
      this.menuList = res.data;

5、如果后期维护需要修改的接口，我们就直接在api.js中找到对应的修改就好了，而不用去每一个页面查找我们的接口然后再修改会很麻烦，如果修改的量比较大，难免会自测不充分产生bug，直接gg。还有就是如果直接在我们的业务代码修改接口，一不小心还容易动到我们的业务代码造成不必要的麻烦

6、处理接口域名、端口有多个情况

// 无需前端打包，运维环境快速修改配置，eg:
window.sysConfig = 
  // 运维平台
  baseUrl: ‘http://10.0.33.97:7083/‘,
  // 租户平台
  tenantUrl: ‘http://10.0.33.96:7082/‘

// 区分不同平台的url地址在http.js文件下的AjaxRequestModel类实例化会统一处理
this.baseUrl = model.baseUrl ? window.sysConfig.baseUrl :  window.sysConfig.tenantUrl

第三方库按需加载

按需加载是针对某些第三方库体积比较大的情况下，优化webpack打包后的js体积，减少页面的加载时间

以echart为例子：

优化前：

// 全导入
import * as echarts from "echarts";

webpack打包后：

技术分享图片

优化后（主js体积减少了400kb，同时build编译打包速度也得到了减少）

import echarts from "echarts/lib/echarts";
// 依赖注入，目前项目只用到折线图、饼图和柱形图，故只需引入对应的模块即可，tooltip是提示类，title是鼠标悬停显示的对应的图表名称
import ‘echarts/lib/chart/bar‘;
import ‘echarts/lib/chart/line‘;
import ‘echarts/lib/chart/pie‘;
import ‘echarts/lib/component/tooltip‘;
import ‘echarts/lib/component/title‘;

技术分享图片

利用less的深度选择器优雅覆盖当前页面UI库组件的样式

技术分享图片

vue页面组件的样式基本是写在<style scoped lang="less"></style>中，增加scoped属性的目的让其样式只在当前页面有效。按照这些写的方式，编译后当前标签会加上类似于[data-v-]这样的属性，但是第三方的UI组件库并没有编译为带[data-v-]这样的属性，所以就遇到了当前页面覆盖的样式没生效的情况，有没有方法处理这种问题呢。有些小伙伴可能会想到我在公共样式里面写，额外添加类名来覆盖当前组件的样式，其实，这也不失为一种方案，但是会引来样式全局污染和命名可能重名的情况。下面列举更简单粗暴的方式，同时避免了样式污染和命名冲突的问题：

.menu-tree 
    /deep/ .el-tree-node__content 
      height: 32px;
    
    /deep/ .is-current .el-tree-node__content 
      background-color: #f2f2fa;

编译后，默认给menu-tree加上了[data-v-3c93a211]

技术分享图片

/deep/深度选择器支持less或者sass，如果你用的是原生的css，可以用<<<符号

webpack实时打包进度

在项目用jenkins自动化打包前端项目的时候，常常会遇到打包速度慢而体验很差，在优化减负依赖包的情况下，同时没有一个测试环境或生产环境当前打包进度捉鸡。这里推荐一个第三方的插件包

progress-bar-webpack-plugin。

用法：
// 需安装依赖 npm install progress-bar-webpack-plugin --save-dev
const ProgressBarPlugin = require(‘progress-bar-webpack-plugin‘)
// 在生产环境webpack配置文件的plugin是加上
new ProgressBarPlugin(), // 打包进度 

技术分享图片

vue组件中写选项的顺序

这里纯属个人观点，可能有些小伙伴用vue开发不是遵从这个。为什么要规定组件的写法顺序呢，或者说它是官方要求的规范，不如说是能让的代码更加优雅，更易于维护，因为你写的代码不仅是你一个人维护。要是一个团队都按这个规范来，大家在维护代码的时候认知一样，那效率就提高了。

组件依赖：

components（自研的子组件或第三方组件）

service（api请求类,其他服务类）

utils（工具类等）

事件传递（vue eventBus）

mixins（复用的属性或方法）

组合：

mixins

组件的属性、接口：

components

props

本地响应式属性、状态：

data

computed

事件注册：

watch

组件生命周期：

created

mounted

destroyed等

组件的方法：

methods

例子：

// 例子
import utryTree from "@/components/utry-tree/utry-tree.vue";
import  reportService  from "@/store/api/index";
import Validation from "../../util/Validation";
import eventBus from "@/util/eventBus";
import reportMixins from "@/mixins/reportMixins";
export default 
  mixins: [],
  components: 
  ,
  props: 
    menuList: 
      type: Array,
      default() 
        return [];
      
    
  ,
  data(),
  computed:,
  watch:,
  mounted(),
  methods:,

路由的懒加载

有时候，针对有些复杂组件，初始化页面其实并不需要把全部组件资源加载进来，把业务复杂的组件抽离出来，从而能减少初始化页面的加载时间

优化前：

import reportManage from ‘@/views/reportManage/index‘;
import reportPreview from ‘@/views/reportManage/reportPreview‘;
export default [
   path: ‘reportManage/index‘, name: ‘reportManage‘, component: reportManage ,
   path: ‘reportManage/reportPreview‘,  name: ‘reportPreview‘, component: reportPreview 
];

初始化页面的加载耗时：

技术分享图片

优化后：

import reportManage from ‘@/views/reportManage/index‘;
export default [
   path: ‘reportManage/index‘, name: ‘reportManage‘, component: reportManage ,
   path: ‘reportManage/reportPreview‘, name: ‘reportPreview‘, component: () => import(‘@/views/reportManage/reportPreview‘),
    meta:  keepAlive: false 
  
];

初始化页面加载耗时：

技术分享图片

时间的差别主要是在js的解析上，主要是是因为初始化页面没有加载当前模块的二次组件的js，等到跳转到二次页面再去解析静态资源，总体优化后初始化页面的加载时间快了100多毫秒。

路由模块的拆分化管理

这里的路由拆分，是指按模块拆分成不同的路由文件，针对单页面应用这样更方便团队的多人协调同步开发，自己写的功能模块互不影响。如果当业务需求多起来的时候，它的优势就越能体现出来。我们并不想就在一个router.js写整个工程的路由，这样会是单文件代码量庞大而变得很槽糕，同时也会带来其他同事误改的问题。

技术分享图片

我们在router文件夹下面创建router.js作为路由的入口文件，其他以router.js后缀的文件存放着各个模块的路由。

router.js:

import Vue from "vue";
import Router from "vue-router";
import NProgress from "nprogress"; // 引入nprogress,每次路由变化网页顶端有个加载条效果
import ak from "@/util/ak.js";
// 业务路由
import login from "@/views/index/login"; // 租户平台
import oamLogin from "@/views/index/oamLogin"; // 运维平台
import indexRouter from "./index.router"; // 首页相关
import reportManage from "./reportManage.router"; // 报表管理
Vue.use(Router);
// 默认登录
let routes = [
  
    path: "/",
    redirect: "login"
  ,
  
    path: "/login",
    name: "login",
    component: login
  ,
  
    path: "/oamLogin",
    name: "oamLogin",
    component: oamLogin
  
];
routes = routes.concat(
  indexRouter,
  reportManage
);

// router register
const router = new Router(
  routes
);
// 路由相关的拦截操作，在这里处理，之前有的router相关操作写在main.js，并不是很友好
router.beforeEach((to, from, next) => 
  // 每次切换页面时，调用进度条
  NProgress.start();
  // cache机制
  const info = ak.Utils.getSessionStorage("USER_INFO");
  const token = info ? info[0].token : "";
  if (token) 
    next();
   else 
    if (to.path === "/oamLogin") 
      next();
     else if (to.path === "/login") 
      next();
     else 
      next("/login");
    
  
);
router.afterEach(() => 
  // 在即将进入新的页面组件前，关闭掉进度条
  NProgress.done();
); 

index.router.js:

import home from ‘@/views/index/home‘; 
export default [
   path: ‘/index/home‘, name: ‘home‘, component: home 
];

这里把首页的路由放在一个数组里，然后导出去，有router.js统一引入，并实例化当前路由

 

未完待续......

 



两年摸爬滚打springboot，总结了这16条最佳实践(代码片段)

...点介绍SpringBoot特有的实践（大多数时候，也适用于Spring项目）。以下依次列出了最佳实践，排名不分先后。1、使用自定义BOM来维护第三方依赖这条实践是我根据实际项目中的经历总结出的。SpringBoot项目本身使用和集成了大量的... 查看详情

单页应用spa开发最佳实践(代码片段)

最近用vue+vue-router做了个单页应用的项目，页面大概有15个左右。积累了一些开发经验在此做一些记录.本文主要从可维护性方面来考虑SPA的开发实践全站的颜色定义放在一个less或者scss的文件里，其他组件和页面import这个配置来... 查看详情

初次使用vue写项目的一些经验(代码片段)

  最近用vue正在写一个项目，本来以为vue很简单，但是还是发现是有一些坑在里面，现在边写边进行总结。  首先遇到的就是页面中img中标签的图片src的加载问题，我开始以为是图片应该和组件放在一块，但... 查看详情

建立和管理开源项目的最佳实践

】建立和管理开源项目的最佳实践【英文标题】：BestPracticesforSetupandManagementofanOpenSourceProject【发布时间】：2010-04-0216:23:03【问题描述】：今年晚些时候，我想发布一个我一直致力于开源的PHP框架。我确实使用源代码控制(SVN)，但... 查看详情

springboot实践总结（转）

...点介绍SpringBoot特有的实践（大多数时候，也适用于Spring项目）。以下依次列出了最佳实践，排名不分先后。 1、使用自定义BOM来维护第三方依赖 Spr 查看详情

vue3的composition-api实践总结(代码片段)

因为向往已久vue3的开发方式，但是组内有很多历史项目，并且我们受制于ie的支持，所以我们决定在vue2中引入composition-api，来使用他的新特性。在使用过程中，我们遇到了很多问题，也积累了一些经验ÿ... 查看详情

总结django一些开发经验(代码片段)

最喜欢的还是Django的ORM框架。公司的项目都是前后分离的，使用Django做后端接口开发还是很高效的。特此总结一些Django开发的小经验。先说一些最最基础的吧。使用virtualenv隔离开发环境使用pip管理项目依赖，主要就是一个小技... 查看详情

apache顶级项目ranger和alluxio的最佳实践（附教程）(代码片段)

作者简介：GregPalmer（Alluxio首席解决方案工程师）目录介绍一、ApacheRanger二、Alluxio和ApacheRanger三、最佳实践选项一：Ranger管理Alluxio文件系统权限选项二：Alluxio执行现有的Ranger策略四、总结介绍Alluxio让计算引... 查看详情

apache顶级项目ranger和alluxio的最佳实践（附教程）(代码片段)

作者简介：GregPalmer（Alluxio首席解决方案工程师）目录介绍一、ApacheRanger二、Alluxio和ApacheRanger三、最佳实践选项一：Ranger管理Alluxio文件系统权限选项二：Alluxio执行现有的Ranger策略四、总结介绍Alluxio让计算引... 查看详情

全网首发｜阿里资深技术专家数仓调优经验分享（上）(代码片段)

...、数据写入的最佳经验、高效查询的最佳实践，以及一些常见的问题。随着云原生数据仓库AnalyticDBforMySQL（下文统一简称：AnalyticDB）在阿里集团各个业务线、社会上各行各业的推广应用，我们沉淀了一些最佳... 查看详情

mpvue最佳实践,美团出的一个小程序框架(代码片段)

...。对于如何更好地使用mpvue进行小程序开发，我们总结了一些最佳实践。使用vue-cli命 查看详情

es最佳实践配置(代码片段)

Elasticsearch性能优化Elasticsearch是当前流行的企业级搜索引擎，设计用于云计算中，能够达到实时搜索，稳定，可靠，快速，安装使用方便。作为一个开箱即用的产品，在生产环境上线之后，我们其实不一定能确保其的性能和稳定... 查看详情

web最佳实践阅读总结(代码片段)

介绍最近开始刷一些书和题,此系列是介绍在读Web最佳实践的一些收获和体会。web前端发展现状存在问题：代码组织混乱代码格式的问题突出页面布局随意网站整体性能差，没有意识到应用诸如缓存，动态加载，脚本压缩，图片... 查看详情

vue实践技巧合集(代码片段)

...投机取巧，可能会带来一些不符合规范的副作用，请根据项目要求酌情使用。多个页面都使用的到方法，放在vue.prototype上会很方便刚接触vue的时候做过一件傻事，因为封装了一个异步请求接口post,放在post.js文件里面，然后在每... 查看详情

vue实践技巧合集(代码片段)

...投机取巧，可能会带来一些不符合规范的副作用，请根据项目要求酌情使用。多个页面都使用的到方法，放在vue.prototype上会很方便刚接触vue的时候做过一件傻事，因为封装了一个异步请求接口post,放在post.js文件里面，然后在每... 查看详情

redis最佳实践经验总结

                      查看详情

mongodb最佳实践经验总结

                    查看详情

围绕vue3compositionapi构建一个应用程序，包含一些最佳实践！(代码片段)

有梦想，有干货，微信搜索【大迁世界】关注这个在凌晨还在刷碗的刷碗智。本文GitHubhttps://github.com/qq449245884/xiaozhi已收录，有一线大厂面试完整考点、资料以及我的系列文章。1.Vue3和CompositionAPI的状况Vue3已经发布了... 查看详情