01-前端环境搭建

前端环境搭建

• vscode：代码编辑器，代码编写工具
• typora：笔记软件，支持及时渲染
• pxcook：像素大厨，用于页面标注
• chrome：谷歌浏览器，
• firefox：火狐浏览器
• safari：苹果系统自带浏览器

typora

• 概念：富文本编辑器，轻便简洁的笔记软件

• 使用快捷键：

  • 标题：六级标题，ctrl+1/2/3/4/5/6

  • 列表生成：

    • 有序列表：快捷键ctrl+shift+[，数字 +.+空格+内容
    • 无序列表：快捷键ctrl+shift+]，-+空格+内容

  • 超链接：

    • 快捷键ctrl+k，[显示的文字](跳转的路径)

  • 图片：

    • 将图片拖入到指定位置即可/截屏软件的粘贴

  • 代码块：

    • 快捷键：```+回车

    <p>    这是一个p标签</p>
    

    • 快捷键：```+语言

  • 应用模板：

    • 快捷键：>+回车

  • 表格：

    • 快捷键：ctrl+T

  • 单行代码：

    • 强调性文字

  • 自定义主题切换：

    

pxcook

• 概念：原稿查看器。

• 使用：

  • 快捷键：

    • 图片放大/缩小：ctrl +/-
    • 移动画布：按住空格键+鼠标拖动

• 使用步骤：

  0. 新建项目，选择web即可
  1. 将原稿图拖入pxcook软件当中
  2. 使用左侧工具栏进行标注即可

• 注意：智能标注只适用于psd原稿图

开发流程

• 岗位介绍：

  • 产品经理/公司老板：低保真原型图
  • UI工程师：低保真原型图给出高保真原型图
  • 前端工程师：根据高保真原型图一比一页面还原，前端和后端的数据交互。模拟数据
  • 后端工程师：负责接口设计，负责业务架构设计
  • 测试工程师：前后端接口测试/性能测试
  • 运维工程师：负责公司网络环境搭建/服务器维护/项目上线迁移

processon工具使用

• 开发步骤

  0. 新建一个项目（注意选择原型图）

  1. 在左侧工具栏中拖动一个浏览器放置在页面上

  2. 使用盒容器进行页面模块划分

     0. 按照页面结构划分：上下/作用….
     1. 按照模块功能划分：登录/注册/轮播图…

  3. 填充内容

     文本/超链接/图片…..