Vue仿网易云音乐播放器（二）

最新推荐文章于 2024-05-23 09:57:00 发布

低迷小马农

最新推荐文章于 2024-05-23 09:57:00 发布

阅读量1.6k

点赞数 3

分类专栏：前端技术交流 IT技术交流文章标签： vue.js javascript jquery html node.js

本文链接：https://blog.csdn.net/weixin_48833991/article/details/106891169

版权

本文详细介绍了使用Vue.js构建一个仿网易云音乐播放器的过程，包括项目运行步骤、项目结构解析、主要组件的创建，以及如何导入和使用vue-router和element-ui。内容涵盖Vue项目的初始化、数据绑定、接口调用、分页处理和组件通信等关键知识点。

摘要由CSDN通过智能技术生成

项目运行

首先要安装npm或者cnpm和node.js环境
在终端建立vue-cli项目，命令行cnpm install vue-cli -g //全局安装 vue-cli
查看vue-cli是否成功，不能检查vue-cli,需要检查vue 命令行vue list
下面建立项目名为webmusic新建vue项目 vue init webpack “项目名称”
在这里插入图片描述
创建好了，那就让项目先安装下依赖再运行一下，会出现下面的页面，操作指令是：cnpm install cnpm run dev
注意这里要在webmusic下进行安装和运行!!!
最后打开终端npm run serve 就可以获得本地端口号啦

项目结构

文件夹结构
dist文件夹是存放最终发布版本的代码，这就是dist文件夹的用处
1、build：构建脚本目录
1）build.js ==> 生产环境构建脚本；
2）utils.js ==> 构建相关工具方法；
3）webpack.base.conf.js ==> webpack基本配置；
4）webpack.dev.conf.js ==> webpack开发环境配置；
2、config：项目配置
1）dev.env.js ==> 开发环境变量；
2）index.js ==> 项目配置文件；
3、node_modules：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
2）components：组件目录，我们写的组件就放在这个目录里面；
3）router：前端路由，我们需要配置的路由路径写在index.js里面；
4）App.vue：根组件；
5）main.js：入口js文件；
5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、index.html：首页入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、README.md：项目的说明文档，markdown 格式
9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

主页面文件里导入vue相关插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 导入 iconfont的字体图标 -->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1654044_7fb6pz0mo1.css">
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
</head>
<body>
    <div id="app"></div>
    if ( NODE_ENV === 'production' ) {
    
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.runtime.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.6/dist/vue-router.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js"></script>
</body>
</html>

制作网页头部和左边菜单栏

在第一步先创建top.vue 和 index.vue两个组件，然后在App.vue根组件上引入这两个组件。下面这个是index.vue组件

<template>
  <div class="index-container">
    <div class="nav" >
      <ul>
        <li>
          <router-link to="/discovery">
            <span class="iconfont icon-find-music"></span>
            发现音乐
          </router-link>
        </li>
        <li>
          <router-link to="/playlists">
            <span class="iconfont icon-music-list"></span>
            推荐歌单
          </router-link>
        </li>
        <li>
          <router-link to="/songs">
            <span class="iconfont icon-music"></span>
            最新音乐
          </router-link>
        </li>

最低0.47元/天解锁文章

低迷小马农

关注

3
点赞
踩
38

收藏

觉得还不错? 一键收藏
6
评论
Vue仿网易云音乐播放器（二）

项目运行首先要安装npm或者cnpm和node环境在终端建立vue-cli项目，命令行cnpm install vue-cli -g //全局安装 vue-cli查看vue-cli是否成功，不能检查vue-cli,需要检查vue 命令行vue list下面我一项目名为webmusic新建vue项目 vue init webpack ”项目名称“创建好了，那就让项目先安装下依赖再运行一下，会出现下面的页面，操作指令是：cnpm installcnpm run dev注意这
复制链接

扫一扫