项目 - 仿网易云音乐 - 《前端学习总结》

一、前言
二、安装
三、技术栈
四、开发
五、第一部分总结

一、前言

链接
Vue-cli文档
 网易线上h5地址
 项目参考文档
线上地址 http://music.rockshang.cn/dist/index.html#/
网易云api接口 https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=neteasecloudmusicapi

项目地址

                                          ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1225858/1600951894942-8f5b02db-1780-4efb-9517-930d3ce15642.png#align=left&display=inline&height=350&margin=%5Bobject%20Object%5D&name=image.png&originHeight=700&originWidth=426&size=213614&status=done&style=none&width=213)

二、安装

cnpm install -g @vue/cli

vue create wy-music

目录结构

├── dist/                      # build产出物
│   └── ...
├── public/                     
│   ├── index.html               # 项目页面
│   └── ...
├ ── node_module/               #项目中安装的依赖模块
   ── src/
│   ├── main.js                 # 程序入口文件
│   ├── App.vue                 # 程序入口vue组件
│   ├── components/             # 组件
│   │   └── ...
│   └── assets/                 # 资源文件夹，一般放一些静态资源文件
│       └── less                # 存放了公共样式、重重css
├──  style/                     # 样式文件
├── .babelrc                    # babel 配置文件
├── .editorconfig               # 编辑配置文件
├── .gitignore                  # 用来过滤一些版本控制的文件，比如node_modules文件夹 
└── package.json                # 项目文件，记载着一些命令和依赖还有简要的项目描述信息 
└── README.md                   #介绍自己这个项目的，可参照github上star多的项目。

三、技术栈

前端

Vue：用于构建用户界面的 MVVM 框架
vue-router：为单页面应用提供的路由系统，使用了 Lazy Loading Routes 技术来实现异步加载优化性能
vuex：Vue 集中状态管理，在多个组件共享某些状态时非常便捷
vue-lazyload：实现图片懒加载，节省用户流量，优化页面加载速度
better-scroll：解决移动端各种滚动场景需求的插件，使移动端滑动体验更加流畅
LESS 预编译处理器
ES6：ECMAScript 新一代语法，模块化、解构赋值、Promise、Class 等方法非常好用

其他工具

vue-cli：Vue 脚手架工具，快速初始化项目代码
iconfont ：阿里巴巴图标库，谁用谁知道
fastclick ：消除 click 移动游览器 300ms 的延

四、开发

1、版本规范

拉取下来项目后，新建一个自己的分支名
git clone …
git checkout -b manber/lisi

在自己的分支上面开发完后，提交到远端分支
git add .
git commit -m “feat: 新增购物车功能” （新增需求的提交）
git commit -m “fix: 修改XXX的bug” (修改bug提交)
git push -u origin manber/lisi

合并到我们的迭代开发分支
git merge feature/0.0.1

最后我会统一合到master分支

git 基础用法不知道的话，点这里

2、开发技巧_生成代码片段

快速生成代码片段
mac电脑选择
code/preference/user snippets

点击：代码生成工具

<template>
  <div class="list-page-container">
    <div>1</div>
    <div>2</div>
  </div>
</template>
<script lang="ts">
import { mapState } from "vuex";
import Vue from "vue";
export default Vue.extend({
  name: "List",
  props: {},
  data() {
    return {};
  },
  computed: {
    ...mapState({
      //  loading: state => state.layoutConfig.loading,
    })
  },
  created() {
    console.log("created");
  },
  methods: {},
  components: {}
});
</script>
<style lang="less" scoped>
@import "../../style/base.less";
@import "../../style/minix.less";
</style>

复制右侧的内容，粘贴到code/preference/user snippets 里面，选择vue，
然后在新的vue文件中，敲vueapp回车，便会产生该代码

3、less的妙用

style/minix.less

// minix
// flex
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
// 水平居中
.spcenter {
  -webkit-box-pack: center;
  -ms-box-pack: center;
}
// 垂直居中
.cscenter {
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
// flex 1
.flex-1 {
  flex: 1;
  -webkit-flex: 1;
}
// 一行文本超出宽度变省略号
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/**
 * 多行省略（容器可以不设置高度）
 *  webpack编译时，autoprefixer会将-webkit-box-orient属性省略，必须采用黑科技克服
 *
 * @lineNum 行数
 */
.text-lines(@lineNum) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @lineNum;
  overflow: hidden;
  text-overflow: ellipsis;
}

使用的时候

div{
  .flex;
  .cscenter;
  .spcenter;
  .ellipsis;
  .text-lines(2);
}

4、axios的封装

fetch脱离了xml
http.js
封装axios
src/api/http.js

import axios from 'axios';
import qs from 'qs';
axios.defaults.baseURL = "";
axios.defaults.withCredentials = true; // 允许跨域携带资源凭证
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.transformRequest=data=>qs.stringify(data)  // post => xxx=xxx
axios.defaults.timeout = 0; // 超时时间
// 请求拦截器 客户端向服务端发送之前
axios.interceptors.request.use(config=>{
  // config  包含所有请求的配置信息
  // config.headers['X-token'] = 'xxx'
  // 把token信息发给服务器
  return config
})
// 响应拦截器,从服务器获取的结果进行统一处理
axios.interceptors.response.use(response=>{
  // 处理成功,默认认为状态码以2开头
  return response.data
},reason=>{
  // 失败 1、获取了结果但是状态码不是2开头 2、压根没有从服务器获取数据
  if(reason.response){
     // 获取到数据了,根据不同状态码做不同提示
  }else{
     // 没有获取数据
     if(!window.navigator.onLine){
        // 断网
     }
  }
  return Promise.reject(reason)
})
// axios.defaults.validate...
export default axios;

src/api/index.js

import axios from './http'
function QUERY_LIST(){
   return axois.get('/list')
}
export default {
  QUERY_LIST
}

五、第一部分总结

1、学习到的东西

2、总结

1、	封装组件，其实就是父给子传值，子组件一般是UI组件，只管展示数据，逻辑和数据的控制由父组件完成，触发的事件一般也交给父组件去完成
2、	封装的组件内部是不调取数据的，我们在页面调数据，然后传给UI组件不同的数据，进行不同的展示
3、	遇到样式问题或者base64形式的图片都可以通过网页的源代码，搜索css和html结构进行配合，查看， svg格式的图片暂时通过截图就可以，网络图片可以直接使用
4、	一般通过vuex进行数据接口的调取使用，需要熟悉vuex的相关操作
5、	遵循我们的开发规范，会使用两次及以上的组件我们放到外面的component文件夹里面，只有自身页面调用一次的组件，放到自己页面的component里面

第二期开发须知

第二期我们将完成剩下的功能，任务划分的粒度会变大，难道会提高，但是万变不离启宗，通过开发第一期的页面，大家已经知道了，组件封装的技巧和对于开发带来的便利，剩下的页面，我们需要继续通过组件的开发，来拼接我们的一个个页面，通过复用组件来简便我们的开发，接下来的开发我们需要注意的是

为了解决我们版本频繁改动，造成的每个人代码不统一，合并冲突大的问题，
最新的开发需求我们将在feature/0.0.2 的基础上进行开发，

我已经在远端提交了feature/0.0.2分支，大家拉取一下feature/0.0.2，然后git checkout -b member/name2 在原来分支名的后面加2，新划出一个新的分支进行开发，以前自己老得分支将被废弃。

最终开发代码的合并也将会合到feature/0.0.2上面进行测试，没有问题我们会合到master上进行部署上线

仿网易云音乐