远航前端基建

Appearance

新人指南 ​

提示

这是一个为公司前端新人准备的新人入职指南。包含了工作环境、开发环境、技术栈要求、项目介绍、团队文化等，旨在帮助新人快速进入工作状态快速融入团队，帮助团队建设成一个技术风格统一的、技术栈全面的前端研发团队。

1. 工作环境 ​

1.1 研发管理工具 ​

1.2 远程代码仓库 ​

1.3 API文档 ​

2.开发环境 ​

2.1 环境工具 ​

2.2 IDE ​

2.2.1 VSCode 插件 ​

json
{
  "recommendations": [
    "formulahendry.auto-complete-tag",
    "streetsidesoftware.code-spell-checker",
    "naumovs.color-highlight",
    "mikestead.dotenv",
    "usernamehw.errorlens",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "tombonnike.vscode-status-bar-format-toggle",
    "mhutchie.git-graph",
    "eamodio.gitlens",
    "kisstkondoros.vscode-gutter-preview", // Image Preview
    "simonsiefke.svg-preview",
    "wayou.vscode-todo-highlight",
    "chakrounanas.turbo-console-log",
    "sdras.vue-vscode-snippets",
    "vue.volar", // vue3启用
    "octref.vetur", // vue2启用
    "uni-helper.uni-app-schemas-vscode", // uniapp启用
    "uni-helper.uni-app-snippets-vscode", // uniapp启用
    "voorjaar.windicss-intellisense",
    "lokalise.i18n-ally",
    "antfu.iconify",
    "antfu.unocss"
  ]
}

3.技术栈要求 ​

3.1 Vue2 ​

  • 响应式原理
  • 生命周期
  • v-model原理
  • 计算属性computed、侦听器watch使用场景
  • 插槽slot的使用
  • 组件通信方式（props、自定义事件、依赖注入、事件总线等）
  • 动态组件
  • 自定义指令
  • 插件的开发及使用
  • 渲染函数h的使用
  • vue-router
  • vuex

3.2 uni-app ​

  • 通过cli创建项目
  • uni-app组成和跨端原理
  • 工程及页面配置
  • 内置组件及API
  • 页面、组件生命周期
  • 条件编译
  • nvue开发
  • HTML5+
  • renderjs（e.g. renderjs运行echarts）
  • wxs（小程序端）
  • 分包、预加载（小程序端）

3.3 Vue3 ​

  • 使用vite创建vue3项目
  • 声明响应式状态（ref、reactive、toRefs等）
  • 计算属性computed、侦听器watch使用场景
  • 生命周期
  • 自定义指令
  • 组件通信方式
  • Teleport
  • composition API
  • setup 语法糖
  • vueuse
  • pinia

3.4 TypeScript ​

  • 基础类型
  • 接口
  • 类
  • 函数
  • 泛型
  • 枚举
  • 命名空间和模块
  • 装饰器
  • tsconfig.json

3.5 高德地图jsapi2.0 ​

  • 熟练使用高德地图jsapi2.0

3.6 其他 ​

4.项目介绍 ​

产品介绍

金鹰卫士是一个高速公路涉路施工安全管控平台，系统通过物联网技术，既能帮助交警、路政、管理中心等用户全面了解施工路段的现场及车辆通行情况，又能针对突发事故快速联动响应、预警提醒，有效降低作业人员及行车人员的伤亡率。

4.1 金鹰卫士-APP端 ​

平台

android、ios端

技术栈 ​

  • uni-app
  • vue2
  • amap jsapi 2.0
  • uview 2.0
  • sass
  • renderjs
  • 原生Android、IOS插件

4.2 金鹰卫士-PAD端 ​

平台

华为pad平板

技术栈 ​

  • uni-app
  • vue2
  • amap jsapi 2.0
  • uview 2.0
  • sass
  • renderjs

4.3 金鹰卫士-PC监管端 ​

技术栈 ​

  • vue3
  • vite
  • typescript
  • amap jsapi 2.0
  • sass
  • element-plus
  • vueuse

访问地址 ​

4.4 金鹰卫士-管理端 ​

技术栈 ​

  • vue2
  • amap jsapi 2.0
  • sass
  • element-ui

访问地址 ​