准备工作
image.png
外边企业的工作分配
技术部有多少人
谁绘图（1）
谁写界面（web前端2 安卓1+，ios1+）
谁写数据 处理服务器（3+）
谁负责测试（1）
设计稿
https://js.design/community?category=search&search=%E9%9F%B3%E4%B9%90App
https://www.sucaihuo.com/search?keyword=%25E9%259F%25B3%25E4%25B9%2590&mtype=
找项目找需求
模仿别人开源项目
https://gitee.com/
https://github.com/
编写需求文档
Readme.md (笔记文档)
Readme.xmind (思维导图)
举个例子:
演示: 音乐网站
- 推荐音乐 ( 推荐导航/ 最新音乐/ 图文列表 / 播放音乐)
- 热歌榜 (图文列表 / 播放音乐)
- 搜索 (搜索歌曲 / 歌曲列表 / 播放音乐)
- 渲染歌词 (播放音乐)
技术栈: vue + vuerouter + axios
clipboard.png
源码托管
安装了git软件 需要用起来
编辑完成的功能源码(比较重要的) 就提交到git仓库
可以上传到 gitee.com (推荐)
可以上传到 github.com
结合 vue 语法 进行项目开发
指令
生命周期
组件
路由
vue-cli
注意事项:
A. @ 修饰符
clipboard.png
B. 如何打开powershell 窗口
clipboard.png
C. 启动后端项目
clipboard.png
D. 设置网络清请求基础配置
clipboard.png
//获取歌曲音频文件地址
https://music.163.com/song/media/outer/url?id=${optionItem.id}.mp3
<!-- 多媒体元素（audio） -->
<div class="wrapper" v-if="optionItem"> <audio controls autoplay :src="`https://music.163.com/song/media/outer/url?id=${optionItem.id}.mp3`" ref="audio" @timeupdate="timeupdate" @end="end" @play="play" @pause="pause" @canplay="canplay" ></audio> </div>
编码过程遇到的问题
在配置路由时 导入组件的错误问题
clipboard.png
报错的
const routes = [ { name:'Layout', path: '/', component: import('@/views/HomeView/HomeView.vue') }, ]
改
const routes = [ { name:'Layout', path: '/', component: ()=> import('@/views/HomeView/HomeView.vue') } ]
开发总结
1、数据动态渲染，处理json格式数据的方式要熟练
2、页面效果要美观（视觉效果图）字体、颜色、背景、间距 色彩搭配等
3、进行数据解剖取值，是否判断数据有值再渲染
4、编写代码的速度要提升、工作量少 (没有拓展)
5、要求页面设计要合理、一张普通页面，不能超50%留空白
6.、弄清楚路由、路由守卫、导航跳转，考虑项目问题、细节是否全面
7、项目的核心功能必须实现
8、关注用户与界面的交互逻辑，处理能力急需提升
9、快速定位代码错误、独立解决bug的能力
10、清晰描述项目、语言组织表达能力，开发流程、工作流程
11、注意开发过程中、要时不时的清除历史记录
