编写计算机前端资料需要遵循以下步骤：
明确文档目标和受众
确定文档的主要目标，例如解释代码的目的、实现工作流程或者是帮助用户使用系统。
考虑到文档的受众是开发者、经理、测试人员还是最终用户。
列出文档内容
根据目标和受众的不同，确定文档的主要内容，包括介绍项目、架构设计、代码逻辑、API文档等。
确定文档结构
根据内容确定文档的结构，包括章节、段落和标题的组织方式。可以根据重点划分章节，或者按照主题组织。
编写文档
在确定好结构的基础上，根据每个章节的结构，开始编写文档。
注意遵守文档格式规范，并保证文档的可读性。
添加注释
在代码中添加必要的注释，帮助阅读者更好地理解代码逻辑。可以包括函数用途、输入输出参数和处理流程等。
更新文档
在开发过程中，随时更新文档，包括代码修改、新增函数或模块等。这有助于保持文档的准确性和实时性。
与团队分享文档
当文档编写完毕后，需要与团队分享，以便大家理解项目的架构和代码实现。可以通过邮件、聊天工具或者团队内部网站进行分享。
收集反馈并迭代
文档的发布随时可能遇到问题，需要收集反馈并根据反馈修订文档。
示例结构
项目介绍
项目背景
项目目标
项目范围
技术栈
前端基础
HTML5
CSS3
JavaScript
前端框架
React
Vue.js
AngularJS
前端工具
npm
Yarn
Gulp
Webpack
编辑器
VS Code
Sublime Text
代码结构
目录结构
/html
/index
/index.html
/user
/login.html
/css
/base.css
/page
/pagename.css
/common.css
/js
/lib
/jquery.2.2.3.min.js
/page
/pagename.js
/common.js
/img
/page
/wap
/wap_icon.png
/logo.png
API文档
主要API列表
功能1
功能2
功能3
API详细说明
功能1
功能2
功能3
开发流程
开发阶段划分
需求分析
设计与开发
测试与调试
部署与维护
总结
项目亮点
遇到的挑战及解决方案
后续改进计划
通过以上步骤和结构，可以编写出清晰、完整、易于理解的前端资料。