实现一个网易云音乐

2017-12-27  本文已影响0人  阿鲁提尔

RT实现一个可以在线播放的移动端网易云音乐。

tips：网易云音乐没用响应式，因为它做了两套网站。用户使用的PC端时，域名为http://music.163.com/；使用移动端时，域名为http://music.163.com/m/。

根据用户设备自动跳转相匹配页面，不是响应式
PC端和手机端的区别
界面

开始

  mkdir music-demo

  git init
  //生成.git目录

  npm init  //回车到结束
  //生成package.json文件

  git add .
  git commit -v   ==> init

编写网页

  touch home.html  playlist.html song.html
  // 创建首页  歌单页面  播放页面

  git add .
  git commit -v ==> add pages
  
  commit查看记录
  git log
  git show [commit字符串]  //查看修改代码 

  npm i jquery --save
  //安装到node_modules文件中
  使用ll node-modules/ 可以查看里面的文件
  包有jquery，就对了

  git add .
  git commit -v ==> install jquery
  git status

vim home.html
==>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网易云音乐</title>
</head>
<body>
    <div id="hi"></div>
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script>
        $('#hi').text('hello world')
    </script>
</body>
</html>
---
:wq
---
http-server -c-1 //模拟线上预览
(如果没有http-server 请安装 npm install http-server -g)
http://localhost:8080/home.html  //访问网页

  git add .
  git commit -v ==> init home.html
  git status

补充：真正做开发时

  vi .gitignore  ==> /node_modules
  //把node_modules根目录隐藏，不上传到git仓库里
  //因为node_modules要安装很多需要的库，一个项目下来会特别大

  git status 
  git add .gitignore
  git commit -v  ==> add ignore
  git status 

  在GitHub新建空项目
  ...or push an existing repository from the command line
  代码抄写到git中
  //上传

  npm i 
  ll node_modules //检查是否成功
  git add node_modules/jquery/dist/jquery.min.js
  会提示：
  // The following paths are ignored by one of your .gitignore files:
  // node_modules/jquery/dist/jquery.min.js
  // Use -f if you really want to add them.
  意思是：这个路径被你的gitignore给忽略了。如果你真的想添加他，使用 -f
  ok,everybody...
  git add node_modules/jquery/dist/jquery.min.js -f
  git commit -v   //add jquery

    <script>
        document.write(`
          <style>
            html{
              font-size: ${document.documentElement.clienWidth/10}px;
            }
          </style>
        `)
    </script>

我的博客：动态REM是什么，如何使用

上一篇 下一篇

猜你喜欢

热点阅读