使用Vue.js打造一个属于自己的音乐博客

原创 2018年04月16日 11:12:06

安装Vue: 

                官网推荐了两种安装方式 

                                1.通过在页面直接引入cdn即可  

                      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script

                                2.使用包管理工具npm

                      $ npm install vue
注:安装完毕后我们需要进行webpack相关配置 如:入口、出口、loader等等相当繁琐, 如果你是初学者强烈建议你使用第一种方式
                                 3.官方还提供了vue-cli,它是vue的命令行工具,用来初始化项目配置
                                    
                    # 全局安装 vue-cli
                    $ npm install --global vue-cli
                    # 创建一个基于 webpack 模板的新项目
                    $ vue init webpack my-project
                    # 安装依赖,走你
                    $ cd my-project
                    $ npm run dev
            
       可以发现这相当的方便,直接帮我们配置好了相关的东东。

安装bootstrap 

同上两种方式大家可以上官网自行查询  注:bootstrap依赖于jquery,使用npm安装我们需要把jquery注册为vue的插件    在webpack.config.js里配置   

   先引入                              
var jquery = require('jquery')
    然后
    
plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ],
这样我们就可以使用bootstrap快速搭建页面了

使用qq音乐网页版的api

我们直接到页面下查询api  如下:


相关参数就不说了吧,大家自行领会

经过我的使用发现只有用户自定义的歌单未开放,其他的都是可以随意使用的,第一次感觉到了腾讯的良心

大概流程如下:

首先利用qq音乐的api以jsonp的方式获取数据,

然后解析数据,提取你所需要的内容即可,

最后给元素绑定属性,方法~done!

项目地址: https://github.com/hyc127/qq-music

我在github提供的个人页面上放了项目中一个子页面(相当粗糙,见笑了)欢迎大家参观

(注:github已不支持低版本的浏览器,所以你有可能无法正常访问)

如下:https://hyc127.github.io

如果你是刚开始使用vue,相信经过一个项目的实战可以让你更理解它,爱上他。


(因为涉及的只是点太多,如果全部写下来估计和一本书也差不了多少了,这里我只是大概交代了下流程建议(非教程)大家不懂就上网查询更能提高自己的学习能力~)

欢迎大家留言~

打造属于自己的Vim神器

Why Vim? Why not Vim? How to make Vim as an IDE? Recommended plugins Basic plugins...
  • hbuxiaofei
  • hbuxiaofei
  • 2017-01-21 23:47:50
  • 822

自己动手做博客之日志管理-1.1 系统分析

    随着互联网的高速发展,越来越多的人和行业接触到了她——博客,并开始了自己了业务。与此同时,博客也成为继免费主页、论坛、QQ和邮箱之后——草民的新秀,博客也成为时下Web 2.0的代名词。   ...
  • somboy
  • somboy
  • 2007-10-08 14:15:00
  • 1946

打造自已的CMD

几次看到别人的CMD显示的与众不同,其实用DOS下的基本命令就能打造出个性化的CMD显示效果。首先看一下PROMPT这个命令的帮助:      PROMPT [text]  text    指定新的命...
  • shadowDLL
  • shadowDLL
  • 2005-03-15 22:04:00
  • 854

从零开始搭建属于自己的博客

环境:Mac OS X Yosemite 版本:10.10.5 前言:综合前辈经验,历经磨砺,终于成功部署了属于自己的博客网站,将其整个思路整理出来,希望对有需要的人有所帮助。由于撰写比较仓促,描述得...
  • xiaoyaoyou1212
  • xiaoyaoyou1212
  • 2016-05-29 20:11:59
  • 2706

你该有一个属于自己的个人博客了

前言 周末用了不到一天时间搭建了属于自己的博客,欣喜之余,就想着提笔将个人博客搭建的详细过程记录下来,以便分享给众读者使用; 搭建之前,笔者看过其他博客的搭建教程,上面都提到可以在短短几分钟搭建好自己...
  • Jack_lin_
  • Jack_lin_
  • 2017-03-21 20:37:56
  • 535

分享一个自己写的比较牛的linux服务器自动监控程序

#!/bin/bash #version0.3 使用top执行后的文件分析,对系统的影响更小 #程序目的:监控系统的cpu、内存、存储、网络的健康状态 #编写者:Lion Lan 1307103906...
  • bestlanzi
  • bestlanzi
  • 2016-11-09 17:01:28
  • 284

Android:打造一个属于自己的浏览器(1)

这篇文章主要介绍了WebView浏览器控件的基本用法,让你学会自己打造一款浏览器。...
  • qq_33357211
  • qq_33357211
  • 2017-06-02 20:14:45
  • 664

打造属于自己的智能家居(一)

         打造属于自己的智能家居(一)   这些年,自己见证了物联网世界的变迁,对于程序开发者来说,这需要整合各个方面的知识,才能在程序员的世界里面把物联网的框架理解清楚。从而加深对智能家居行...
  • qq84395064
  • qq84395064
  • 2017-10-29 19:17:14
  • 375

打造属于自己的Vim IDE

Why Vim? Why not Vim? How to make Vim as an IDE? Recommended plugins Basic plugins Bonus Plugi...
  • lhl2017
  • lhl2017
  • 2017-12-01 22:05:41
  • 58

个人PC OEM-DIY

  • 2009年07月12日 19:01
  • 2.99MB
  • 下载
收藏助手
不良信息举报
您举报文章:使用Vue.js打造一个属于自己的音乐博客
举报原因:
原因补充:

(最多只允许输入30个字)