辉太郎看前端(vue项目开发流程)

前言

vue作为国内主流开发框架，对于前端人员而言，还是很容易理解接收的。

开发项目的流程

• 开发前的配置

我在公司里做的是《xxx》的项目，在开发的时，我用的是vue脚手架3，在搭建完项目后，我会对环境变量进行配置，以便于我们在不同的环境下使用，配置完多环境变量我会对axios请求，进行封装，在封装axios请求时，我会在src目录下新建一个http文件夹，在文件夹下在新建三个文件，分别是api.js，http.js，request.js；api.js用于对接口进行封装，http.js用于对axios的封装，resquest.js用于对请求的一些封装。接着呢？就是对element-ui的引入了，一般element-ui有两种引入方式：全局引入和按需引入，我这采用的是按需引入的方式，用按需引入方式也是为了提高性能，只导入我们所需要的组件。

• 组件化的开发

在项目开发时，我采用的是组件化的开发方式，在开发前我们会新建两个文件夹，一个用来放置我们的子页面，一个用于放置我们的公共组件，在开发的过程中呢，用多个页面用到了搜索功能和表格的渲染，我就封装了搜索组件和列表渲染组件，由于考虑到性能问题，我在开发时用到了图片懒加载和路由懒加载，图片懒加载是为了缓解服务端的压力，减少不必要的访问数据库或延迟访问数据库的次数。而路由懒加载是为了防止数据量过大，页面初次请求时出现白屏的情况。在开发时也遇到了项目难点。就是图片上传，最后看了几篇也是给解决了。

• 项目开发难点

图片上传解决方案

1. 使用element-ui中的upload组件。
2. 设置请求头，在图片上传时，没有用到axios，所以要自己设置请求头。
3. 里边有几个属性action图片上传到后台的api地址；on-success上传成功时的钩子函数，在方法中传参数并打印就能得到上传图片的所有数据。

• 项目的打包优化

• 打包

1.是在hash路由模式下进行的打包
2. 将项目中的文件路径/都改为./。

• 优化

1. 引入cdn加速，将文件中的组件库以外部连接的形式导入到组件中。
2. 去除.map文件。
3. 去除console.log()控制台打印。
4. 进行代码压缩。
5. 图片压缩
6. 抽离公共样式。
7. 设置骨架屏(当使用者网络不稳定时，不至于出现白屏)

总结

初出茅庐，请大佬多多指教。