这是我参与「第四届青训营 」笔记创作活动的第4天

项目简介

本次前端青训营的结营大项目官方给了几个可选方向，我们团队4人选择了仿掘金官网项目进行开发。团队选择前后端分离开发模式，主要完成官网首页和文章详情页的前端开发，后端使用flask开发完成注册登录以及新建和发布文章的功能。

项目技术选型

根据团队成员的技术栈，综合考虑各方因素后，采用vite+vue3的模式进行开发。部分组件使用了Arco-design进行设计。

技术选型的主要理由

• vite前端构建工具

  官网首页称其为下一代前端工具，选择vite主要原因是希望能够熟悉和学习前端的最新技术，vite官方对其主要优势概括为快。参考链接：vitejs.dev/guide/why.h…

• vue3

  vuejs团队成员均有技术基础，vue3完美支持typescript，使得程序在编写过程中就能发现一些问题，解决了在编写完全部代码后才能找到错误，避免在运行中程序崩溃。参考链接：cn.vuejs.org/

• acro-design

  由字节跳动开发的组件。参考链接：arco.design/vue/docs/st…

• vue router

  vue router是vue官方提供的路由，拥有直观且强大的语法来定义静态或动态路由以及将每条路由映射到应该显示的组件上。在项目中可以用来在官网首页和文章详情页跳转。

项目基本结构

JUEJIN\SRC
│  App.vue
│  main.ts
│  style.css
├─components
│        AppTopNav.vue --顶部导航栏
│        AppSideBar.vue --侧边栏
│   
│  
├─views
│  │
│  ├─home
│  │    AuthorInfo.vue --作者相关信息
│  │    ListNav.vue --文章列表导航栏
│  │    List.vue --文章列表
│  │    Login.vue --登录
│  │    Register.vue --注册
│  │
│  ├─post
│  │    AuthorInfo.vue --作者简要信息
│  │    Aside.vue --文章页侧边栏
│  │    Article.vue --文章展示
│  │    Catalog.vue -- toc目录
│  │    Content.vue -- Markdown文章显示区
│  │    NewArticle.vue -- 新建文章页面
│  │    ShowPost.vue -- 文章列表
│  │
│  └─Layout.vue --总体布局
│
├─fake-api
│      Article.ts --测试用文章数据
│      index.js --测试用首页列表数据
│
├─router
│      index.js --路由模块
│
└─request
       index.ts --请求模块

总结

团队在多种技术方案中以自身熟悉的角度，以及紧跟前端最新技术进行了技术选型，以vue技术栈开发掘金网站的前端业务。项目结构划分主要以业务线为主，分为静态资源、路由、公共组件、布局（首页组件、文章详情页组件）、api接口五大部分。最后，根据各模块的工作量大小分配给团队成员进行开发。 总体而言，本次项目的技术选型相对成熟，同时也可以让项目成员学习到最新前端开发技术。