使用VUE3+VUEX+VUE-ROUTER写的小练习

最新推荐文章于 2025-04-14 12:00:34 发布

CoCoNut秋浔

最新推荐文章于 2025-04-14 12:00:34 发布

阅读量1k

点赞数

分类专栏：练习文章标签： vue.js vscode 前端

本文链接：https://blog.youkuaiyun.com/m0_62570630/article/details/123559384

版权

练习专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用Vue3、Vuex 4.0、Vue Router和VSCode创建一个音乐播放应用，包括登录页面的实现和音乐列表页展示，涉及用户登录存储、路由配置及Vuex状态管理

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相应配置：

vue3，vuex4.0版本以上,vue-router，vscode编辑器,图片，node.js等

效果如图所示：

登陆页效果

音乐列表页效果（内容是真的）

创作过程如下：

首先创建环境和项目：

在我的D盘中新建名为music的文件夹，进入后右键通过vscode 打开，之后在vscode中，右键打开小黑屏，并将PowerShell切换成cmd（Command Prompt），新建一个名为music的Vue3项目，使用的配置有babel,vuex,vue-router,sass,eslint（不喜欢eslint做检查的也可以关闭）,使用哈希模式为路径返回模式，

在view目录下新建Home页面和login登陆页面：

其中，登陆界面相关代码：(部分不常用代码已做注释处理)

<template>
  <div class="login">
    <div class="user">
      <div class="title">Login</div>
      <div class="userinfo">
        <p>账号：<input type="text" v-model="user.account" /></p>
        <p>密码：<input type="password" v-model="user.password" /></p>
      </div>
      <div class="sub">
        <router-link to="/music"
          ><button @click="entry">登陆</button></router-link
        >
      </div>
    </div>
  </div>
</template>

<script>
//引入所使用的的相关功能项
import { ref, reactive } from "vue";
export default {
  setup() {
    //登陆页用户信息
    let user = reactive({
      account: "",
      password: "",
    });
    //点击事件
    let entry = () => {
      //在浏览器内存储
      sessionStorage.setItem("user", JSON.stringify(user));
      //清空输入框
      user = reactive({
        account: "",
        password: 0,
      });
    };
    return {
      //上面定义完了记得返回出去
      user,
      entry,
    };
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}
.login {
  width: 100vw;
  height: 100vh;
  background: url("../../public/qinchen.jpeg") no-repeat 0 0 / 14440px;
  position: relative;
}
.user {
  width: 500px;
  height: 300px;
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
/*public目录下的文件会在打包时单独放置，因此前面的路径可以省略*/
  background: url("../../public/qinchen.jpeg") no-repeat 0 0 /500px;
/*该属性设置透明度*/
  opacity: 0.5;
}
.title {
  height: 40px;
  line-height: 40px;
  margin-top: 20px;
/*该属性设置字符间距*/
  word-spacing: 10px;
  text-align: center;
  font-size: 40px;
  color: darkseagreen;
}
.userinfo {
  line-height: 40px;
  text-align: center;
  margin-top: 50px;
  color: rgb(50, 161, 50);
  font-size: 20px;
}
.userinfo input {
  outline: none;
  border: none;
  border-bottom: 1px solid lightgreen;
  background: none;
}
.sub {
  margin-top: 30px;
  text-align: center;
}
.sub button {
  width: 100px;
  height: 30px;
  border: none;
  outline: none;
  line-height: 30px;
  text-align: center;
  border-radius: 10px;
  background: none;
  border: 1px solid lightgreen;
/*该属性设置鼠标显示*/
  cursor: pointer;
}
.sub button:hover {
  background-color: rgba(144, 238, 144, 0.267);
  color: snow;
}
</style>

LoginView.vue组件

音乐播放页面代码：(部分不常见代码已做注释)

<template>
  <div class="music">
    <div class="navheader">
      <div class="welcome">
        <i>欢迎你，亲爱的{{ username }}用户</i>
      </div>
      <div class="text">
        由于未知错误，播放器不能正常播放（有解决方法的可以留下评论哦，谢谢）
      </div>
    </div>
    <div class="musicbody">
      <ul class="musicul">
        <li v-for="(item, index) in musiclist" :key="index">
          <div class="musicno">{{ index }}</div>
          <div class="musicname">{{ item.name }}</div>
          <div class="musicsinger">{{ item.singer }}</div>
          <div class="musiccd">{{ item.cd }}</div>
          <div class="audio1">
            <audio controls><source :src="item.audio" /></audio>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
//导入所需功能项
import { ref, reactive } from "vue";
//导入数据代理功能函数
import { useStore } from "vuex";
export default {
  setup() {
//重命名该函数
    let $store = useStore();
//从浏览器缓存中读取用户登陆信息
    let username = JSON.parse(sessionStorage.getItem("user")).account;
    let musiclist = $store.state.musiclist;
    return {
      username,
      musiclist,
    };
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
.music {
  width: 100vw;
  height: 100vh;
}
.navheader {
  width: 100vw;
  height: 170px;
  background: url("https://img1.baidu.com/it/u=41916664,3398580545&fm=253&fmt=auto&app=138&f=PNG?w=800&h=500")
    no-repeat 0 -700px /100vw;
  position: relative;
}
.welcome {
  width: 300px;
  height: 50px;
  line-height: 50px;
  text-indent: 1em;
  position: absolute;
  left: 200px;
  top: 60px;
  transform: rotate(1deg);
/*filter为滤镜的意思，blur是模糊，括号里填像素单位，值越大越模糊*/
  filter: blur(0.5px);
/*线性渐变，第一个值是方向*/
  background-image: linear-gradient(
    to right,
    rgba(135, 206, 250, 0.219),
    rgba(255, 255, 255, 0.212)
  );
}
.welcome i {
  font-size: 16px;
}
.musicbody {
  width: 100vw;
  height: 150vh;
  padding: 100px;
  background: url("https://img1.baidu.com/it/u=41916664,3398580545&fm=253&fmt=auto&app=138&f=PNG?w=800&h=500")
    no-repeat 0 0 /14400px;
  opacity: 0.9;
}
.musicul li {
  height: 70px;
  line-height: 70px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}
.musicul li:hover {
  height: 80px;
  line-height: 80px;
  margin: 10px 0;
  color: lightskyblue;
  transition: all 1s;
}
.musicul li div {
  height: 50px;
  line-height: 50px;
  border-left: 2px solid lightskyblue;
}
.musicname {
  width: 400px;
  text-align: center;
}
.musicsinger {
  width: 200px;
  text-align: center;
}
.musiccd {
  flex: 1;
  text-align: center;
}
.musicul li .musicno {
  width: 50px;
  text-align: center;
  font-size: 20px;
  border-left: none;
}
.audio1 {
  width: 400px;
}
.text {
  text-align: center;
}
</style>

MusicView.vue组件

在路由中定义这俩个路由页面：

import { createRouter, createWebHashHistory } from 'vue-router'


const routes = [
  {
    path: '/',
    //“/”的意思是默认页面，即主页
    name: "login",
    component: () => import('../views/LoginView.vue')
  },
  {
    path: '/music',
    name: 'music',
//路由懒加载
    component: () => import('../views/MusicView.vue')
  }
]

const router = createRouter({
//使用哈希模式为路由变更模式
  history: createWebHashHistory(),
  routes
})

export default router

router/index.js配置

VUEX中的数据内容：（问就是粉丝）

import { createStore } from 'vuex'

export default createStore({
  state: {
    "musiclist": [
      {
        "name": "Green",
        "singer": "轻晨电",
        "cd": "我们背对着青春",
        "audio": "../../public/Morning Call 轻晨电乐团 - Green.mp3"
      },
      {
        "name": "我们背对着青春",
        "singer": "轻晨电",
        "cd": "我们背对着青春"
      },
      {
        "name": "法国片",
        "singer": "轻晨电",
        "cd": "我们背对着青春"
      },
      {
        "name": "一切都沉睡了",
        "singer": "轻晨电",
        "cd": "我们背对着青春"
      },
      {
        "name": "Fine",
        "singer": "轻晨电",
        "cd": "StreeVoice冬季选集"
      },
      {
        "name": "声体",
        "singer": "轻晨电",
        "cd": "练团室demo"
      },
      {
        "name": "52Hz的鲸鱼",
        "singer": "轻晨电",
        "cd": "孤独三部曲"
      },
      {
        "name": "孤独已是这世界的显学",
        "singer": "轻晨电",
        "cd": "孤独三部曲"
      },
      {
        "name": "有轨电车难题",
        "singer": "轻晨电",
        "cd": "孤独三部曲"
      },
      {
        "name": "Elephant Machine",
        "singer": "轻晨电",
        "cd": "未知专辑"
      }
    ],
    "cdimg": "https://img1.baidu.com/it/u=41916664,3398580545&fm=253&fmt=auto&app=138&f=PNG?w=800&h=500",
    "bgcimg": "https://img0.baidu.com/it/u=2842418731,3313064502&fm=253&fmt=auto&app=138&f=JPEG?w=150&h=150"

  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

数据存放（一般要做请求）

APP容器内容：

<template>
  <router-view />
</template>

<style>
</style>

只是个容器

入口文件main.js配置：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

一般在建项目时就会帮你挂载好

为了达到效果，可以在public资源目录下放置你喜欢的图片，就能拿到想要的效果了。

看到了这里，靓仔，点个赞可好？