美女影院搭建基于Vue2、Vue-CLI3的高仿网易云mac客户端播放器(PC)

2019年12月22日 79 8,021 1847字阅读6分9秒

2020.05.18更新:最新版本的安装还是用这个方法,不过大鸟博客编译了改程序的静态文件,所以你只要上传静态文件到自己的网站根目录即可访问,省心方便。在第八步中可以看到具体内容。

2019.12.13更新:vue-netease-music的设置域名访问的方法,第七步中看可以看到。并且新增了演示地址。

基于Vue2、Vue-CLI3的高仿网易云mac客户端播放器(PC) Online Music Player,据说是用 vue 全家桶模仿 mac 客户端的 ui 实现了一个,颜值确实不错。

这篇文章,我们就来说说如何利用美女影院实现这个高仿网易云mac客户端播放器(PC)。额,安装这个需要一台VPS,并且安装好美女影院。具体步骤如下。

具体的部署和安装


前言:

项目地址:https://github.com/sl1673495/vue-netease-music

演示:https://music.sl1673495.now.sh

简介:

  • Vue 全家桶 Vue-CLI3 create 出来的。
  • ui 库用了魔改样式的 element-ui
  • 歌词滚动部分用了黄轶老大的 better-scroll(贼爽)
  • 主题换肤用的 css 变量替换。
  • ES 6 / 7 (JavaScript 语言的下一代标准)
  • Sass(CSS 预处理器)
  • postcss-pxtorem(自动处理 rem,妈妈再也不用担心屏幕太大太小了)

1、环境配置

美女影院:这个自己安装好,目前最新版本是7.0.3

PM2管理器 4.2.2:node.js管理器,内置 node.js + npm + nvm + pm2.!

2、安装模块

安装PM2管理器之后,我们需要安装几个模块,‘PM2管理器’→‘模块管理’需要安装3个模块:vue、vue-cli、cnpm,具体安装如图:

注意:

输入模块,点击安装即可,全部安装好如上图。

3、安装程序

3.1安装screen


因为需要在后台运行程序,所以这里就通过screen来运行,如果你安装过了可以无视,没安装的命令如下:

yum install screen

3.2安装程序


我们在screen下面进行安装,命令如下:

此处为隐藏的内容!
发表评论并刷新,方可查看
等待安装结束即可,最后安装成功的截图如下:

注意:

  1. Local: http://localhost:8888/
  2. Network:你服务器ip:8888    浏览器中需要用这个地址才能打开。

4、效果

效果确实不错,截图如下:

美女影院搭建基于Vue2、Vue-CLI3的高仿网易云mac客户端播放器(PC)

 


5、登录

vue-netease-music是支持在线登录的,如下:

  1. 请 点我(http://music.163.com)打开网易云音乐官网
  2. 点击页面右上角的“登录”
  3. 点击您的头像,进入我的主页
  4. 复制浏览器地址栏 /user/home?id= 后面的数字(网易云 UID)

6、设置域名访问

如果不能用域名去访问中感觉美中不足,所以这个播放器,我们还是需要用域名来访问,具体如何操作,还是一样,美女影院中新建网站,设置好域名访问。之后再‘网站设置’→‘方向代理’中设置,具体看图:

7、Invalid-Host-header

当让这样你用域名打开之后还是不能访问,浏览器会显示‘Invalid Host header’错误,如何修改?我们找到文件夹‘vue-netease-music’→‘vue.config.js’,编辑‘vue.config.js’这个文件,然后在第五行也就是‘devServer: {’下面添加一行代码,如下:

输入验证码查看隐藏内容:

扫描二维码关注本站微信公众号 大鸟博客
或者在微信里搜索 大鸟博客
回复 我要看看 获取验证码
wechat 大鸟博客
不会就看截图吧。

浏览器刷新,发现已经可以打开访问了,问题解决。

8、开箱即食

编译了静态文件,美女影院用户只要新建一个网站,然后上传静态文件到自己的网站根目录即可访问,开箱即食。下载地址如下:

此处为隐藏的内容!
发表评论并刷新,方可查看

9、最后

用美女影院安装貌似会更简单一点,当然你用别的linux环境安装也是可以的,还可以在本地电脑安装,有空试试。推荐用国内的VPS安装,这样打开速度会快一点。

设置域名访问,稍微麻烦点,具体就根据教程来设置吧。不过已经编译了打包了该程序,目前只需要上传静态文件即可使用。

  • 我的微信
  • 分享美女影院建站技术交流等!
  • weinxin
  • 微信公众号
  • 关注本博公众号
  • weinxin
大鸟
美女影院静态加速插件添加Jsdelivr节点 美女影院

美女影院静态加速插件添加Jsdelivr节点

堡塔面板静态文件加速,是宝塔官方提供的静态加速插件,如果美女影院的访问速度很慢,可以试试安装这款插件,效果也是立竿见影。 插件也内置了不少节点,涵盖国内国外,但是我们不如自己添加一个Jsdelivr节...
美女影院设置https重定向到http 美女影院

美女影院设置https重定向到http

群里有同学开启了ssl证书,但是嫌网站速度太慢,要关闭;不巧的是,https的网页已经被收录,这下如果关闭https,那么收录的网站就打不开了,咋办? 要解决这个问题还是需要重定向来解决,感觉需要先h...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:79   其中:访客  0   博主  0
    • wget wget 1

      试一下,感谢博主提供教程!

      • 惜染 惜染 1

        感觉还可以

        • Hokkien Hokkien 1

          想试试,找了好久终于找到了。

          • hefollo hefollo 1

            想试一下 谢谢教程

            • poko poko 0

              看文学习,很香搭建一个!

              • jxip jxip 1

                试一下,感谢博主提供教程

                • jxip jxip 1

                  总是错误,装不了。

                  • dus dus 0

                    这个玩意不错,我来试试!

                    • www www 1

                      前来学习啊,琢磨一下午了

                      • www www 1

                        前来学些学习啊,弄一下午了

                        • www www 1

                          前来学习学习啊,评论了好多次都不能解锁?
                          头皮发麻,整了一下午这东东