Vue搭建基础框架

前言

        初始项目是由Vue-Cli3.4.0构建，代码规则和风格 eslint + prettier。整个框架符合高内聚低耦合的设计思想。

项目地址：GitHub - 122687220/web-template

码字不易，欢迎star

1. 项目创建

 1. 用Vue-Cli创建项目，插件选择Babel、Router、Vuex、Css预处理器、Linter / Formatter 格式检查、Unit测试框架

 2. 选择hash路由、sass预处理器、eslint+prettier、测试框架Jest

2. 全局组件自动注册

1. 在components目录下创建一个global目录，里面放置一些需要全局注册的组件。

index.js作用只要是引入main.vue，导出组件对象

2. 在components中创建一个index.js，用来扫描全局对象并自动注册。

3. 路由自动引入

1. 根据不同的业务模块进行拆分路由

2.在每个子模块中导出一个路由配置数组

3.在根 index.js中导入所有子模块

4.axios封装

1.配置环境，依次是：

调试：与后台开发人员通过IP直连的方式调试程序（局域网内）

开发：对接线上的测试环境

mock：通过本地假数据，进行调试

生产：对接线上生产环境

分别输入不同的地址， 比如debugger就写 debugger的api地址、development就写development的api地址

然后在src/utils/request/index.js中配置axios信息

2.请求响应封装

3.loading效果，在data参数中添加isHideLoading属性，控制是否要显示loading

loading效果

清除loading

4.上传文件处理，api中加入isFile参数

5.微服务本地多端口调试，新建src/utils/request/debugger.port.js文件，用来存储各个接口模块的端口号，在axios封装文件中，动态插入端口号。

5.前端数据请求方案

1.src/utils/request/index.js中封装axios，统一请求的入口和出口，可以方便调试及监控请求。（请求层）

2.请求异常处理，在respone拦截器中处理全局异常和业务异常

全局异常，也可以说是通用的异常，比如服务端返回503，网络异常，登录失效，无权限等，这些异常是可以预料并可控的，只要和服务端约定好格式，捕获下异常再展示出来即可。

业务异常，指的是和业务逻辑紧密相关的，比如提交失败，数据校验失败等，这些异常往往每个接口有不一样的情况，而且需要个性化展示错误，所以这部分可能不能进行统一处理，有时候需要把展示错误交到View层去实现。

3.为了防止将请求实现和页面解耦，在src/api文件夹中创建各个模块的请求文件api,作用是当后台的接口有任何修改，只要在相应api文件中修改即可，对页面没有任何影响。（服务层）

6.错误日志收集

使用vue自带的errorHandler函数处理错误日志，拿到vue对应的实例之后，我们就可以轻松获取到vue对应的组件名称以及自定义属性等等，新建文件src/utils/errorLog.js

1.以下是获取组件名称的方法：

2.具体实现

7.优化方案

1.骨架屏，提升用户体验。

引入vue-skeleton-webpack-plugin第三方库，新建src/components/zv-skeleton/index.js和src/components/zv-skeleton/Skeleton.vue文件

在vue.config.js中添加配置，先引入const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

2.配置cdn,在vue.config.js中添加配置

3.配置gzip压缩，安装第三方compression-webpack-plugin，vue.config.js中引入const CompressionPlugin = require('compression-webpack-plugin')

4.配置splitChunk

（待续...）

8.国际化方案

新建src/lang/en-US和src/lang/zh-CN文件夹，zh-CN中存储所需的中文json文件，利用Gulp,通过文案翻译平台将翻译后的json文件自动存储到en-US文件夹中。

（待续...）

参考文档：

vue-cli3 项目从搭建优化到docker部署

前端错误收集（Vue.js、微信小程序）

前端数据请求的终极方案

聊聊前端国际化文案该如何处理