工程结构、页面结构优化整理
1、工程结构
|-- build //项目构建(webpack)相关代码
| |-- build.js //生产环境构建代码
| |-- check-version.js //检查node、npm等版本
| |-- dev-client.js //热重载相关
| |-- dev-server.js //构建本地服务器
| |-- utils.js //构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config //项目开发环境配置
| |-- dev.env.js //开发环境变量
| |-- index.js //项目一些配置变量
| |-- prod.env.js //生产环境变量
| |-- test.env.js //测试环境变量
|-- node_modules // node第三方包
|-- dist //打包后的文件夹
|-- src //源码目录
| |-- assets //静态文件 放置一些图片logo（assets最终会被 webpack打包）
| |-- styles //公共的样式和修改组件库样式
| |-- utils //工具方法
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- http //网络请求和api封装
| | |-- index.js //封装axios
| | |-- api.js //封装所有的请求(接口过多,可以创建api文件夹,然后分 模块来单独管理接口)
| |-- pages（views） //路由对应的页面
| |-- route //路由管理
| |-- App.vue //页面入口文件
| |-- main.js //程序入口文件，加载各种公共组件
|-- static //静态资源目录，比如一些图片，json数据、字体等
| |-- css //样式
| |-- data // json数据
| |-- img //图片
|-- .babelrc // ES6语法编译配置
|-- .editorconfig //定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md //项目说明
|-- index.html //入口页面
|-- package.json //项目信息，node配置文件
根据项目需求可以配置多页面开发
2、页面结构
|-- template //页面根元素
| |-- div //外层box元素
| | |--Children //引用的子组件
|-- script
| |-- import Children //引用自组件
| |-- import UI //引用UI组件
| |-- import js //引用公共的方法
| |-- props //接收父组件传递的属性
| |-- components //注册子组件
| |-- data //初始化数据
| |-- computed //计算
| |-- watch //监听
| |--hook //声明周期钩子函数 （按顺序书写）
| |--methods //页面的逻辑方法
|--style scoped //当前页面的样式
代码结构规范化：页面书写格式统一提高代码的可读性，逻辑清晰便于维护，抽离提取并封装公共组件提高工作效率，通过组件封装的形式使页面更结构化，避免了一个文件代码过多页面混乱。
组件化思路：
高内聚低耦合,尽可能少的暴露组件的api,将功能尽量封装在组件内部
组件内部根据业务需求设置了一些组件默认的配置项,再通过不同页面传入不同配置项提高组件的通用性。
前后端接口对接方式：前端在前期开发过程中可以根据规定好的数据格式去mock数据，当前后端联调的时候就可以直接替换对应的字段来实现数据和页面互相辉映。提高了联调的效率。
性能优化：严格按照vue文档编写代码，注意v-for和v-if的同时使用，key的合理使用可以提高页面的渲染速度，页面布局避免dom出现回流现象（影响性能），使用路由的懒加载，v-if和v-show的合理使用，长列表性能优化使用Object.freeze 方法来冻结一个对象。
页面整洁且统一 ！！！
网友评论