美文网首页前端开发技巧
前端开发项目前期准备工作

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

作者: Biao_349d | 来源:发表于2019-01-02 15:46 被阅读350次
  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. 开发时, 按照模块分工
    一个文件夹, 一个模块。


    页面模块目录

相关文章

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

    定义公共组件:比如按钮,列表 这些复用多的, 可以写公共组件出来, 如果已经有这个组件, 可以按照Ui样式...

  • 如何搭建酷炫个人博客?只要十分钟

    准备工作 安装 初始化 创建新文章 运行开发环境 构建 部署 详细准备工作,可以查阅hexo官网 我是一名前端开发...

  • React+AntDesign开发完整的考勤系统前端页面(一)

    一:项目准备工作 1:开发环境准备 准备好Visual Studio Code前端开发工具,下载并安装Node.j...

  • 前端开发平时笔记记录

    在前端开发过程中,要善于观察和抽象。尤其是在项目前期,不要着急写代码,一定观察项目的原型图或者设计稿,想想哪些部分...

  • 前端开发准备工作流程

    1. 浏览器 chrome FireFox 360 Opera 2. 编辑器 VsCode sublime Ato...

  • 搭建mock.js服务

    前端请求接口数据需要后端提供支持,但在项目前期,会遇到没有接口给前端人员测试的尴尬。这时候mock.js就能起到关...

  • 推荐几个好的前端博客和网站

    前端开发博客前端开发博客-前端开发,前端博客 对前端知识结构的理解人类身份验证 - SegmentFault 脚本...

  • 如何学习一门新的开发技术

    前端学习1.了解本身是什么,它能做什么,不能做什么。1.1.了解开发前的必要准备工作。2.了解开发工具3.了解标准...

  • 项目管理笔记-项目启动

    在做好项目前期准备工作,并且明确了项目的范围、目标、风险、干系人这些关键要素之后,我便约好客户,踏上了首次拜访之路...

  • 2018-05-16

    web前端开发 什么是web前端 web前端开发也戏称“web前端开发攻城狮”,目前这个职位也叫“大前端”。这个职...

网友评论

    本文标题:前端开发项目前期准备工作

    本文链接:https://www.haomeiwen.com/subject/fzuzlqtx.html