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

安装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,相信经过一个项目的实战可以让你更理解它,爱上他。


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

欢迎大家留言~

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页