前端开发项目前期准备工作

  1. 定义公共组件:

    比如按钮,列表 这些复用多的, 可以写公共组件出来, 如果已经有这个组件, 可以按照Ui样式先修改好, 自己再封装起来, 修改的样式不要写全局, 要写在当前组件里面。


    公共组件样式图
  2. 搭建项目框架:
    定义项目的文件目录, 代码格式等。
    单个页面目录结构:
    这里一般只需要存在Index.vue 和 index.less 即可。

    单个页面目录结构

项目目录结构:

项目目录结构

页面模块目录:

页面模块目录

  1. 前后端分离的项目,
    因为要对接接口, 建议把Url 单独提出来,
    把调用的接口的方法也单独提出来。
    然后根据每个人的名称命名,
    例如:
├── api:  
│ ├──  api-model: // 接口地址
│ │ ├──   index.js( import './lbj_api.js';import './zgb_api.js';)
│ │ ├──   lbj_api.js
│ │ ├──   zgb_api.js
│ ├──  request // 调用接口的方法
│ │ ├──   index.js( import '../api-model/index.js';import './lbj_request.js';  import './zgb_request.js'; )
│ │ ├──    lbj_request.js
│ │ ├──    zgb_request.js

这样一来, 我们在页面中只需要引入api/request/index.js即可, 解决了多人开发时使用同文件时的冲突情况。

  1. 开发时, 按照模块分工
    一个文件夹, 一个模块。


    页面模块目录
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容