Vue项目开发

随笔6个月前发布大陈的西游

77 0 0

准备工作

Vue项目开发

外边企业的工作分配

技术部有多少人
谁绘图（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

Vue项目开发

源码托管

安装了git软件需要用起来
编辑完成的功能源码(比较重要的) 就提交到git仓库
可以上传到 gitee.com (推荐)
可以上传到 github.com

结合 vue 语法进行项目开发

指令
生命周期
组件
路由
vue-cli
注意事项:
A. @ 修饰符

Vue项目开发

B. 如何打开powershell 窗口

Vue项目开发

C. 启动后端项目

Vue项目开发

D. 设置网络清请求基础配置

Vue项目开发

//获取歌曲音频文件地址
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`"></audio> </div>

编码过程遇到的问题

在配置路由时导入组件的错误问题

Vue项目开发

报错的

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、注意开发过程中、要时不时的清除历史记录

# 随笔