从零开始开发音乐中心--(2)初始界面

之前说了, 比较像一个社交型的系统.

说到系统, 所以就要有一个桌面, 然后还可以设置背景壁纸.

为了组件化, 我就把桌面与背景拆成两个组件, 直接把桌面组件叠在背景组件上.

然后在顶层放一个总的组件, 这就是初始的结构了.

然后慢慢细化, 慢慢堆界面和堆代码, 就变成了一个系统了...(不知道堆到什么时候)

不多说, 开始写把了

---

准备工作

vue cli的各种操作, 就不细讲了

vue create music-center # 建项目, 手动选择vuex可以免去之后的安装, 选择node-sass
cd music-center # 进入项目目录
vue add vuetify # 添加vuetify
npm i -D @mdi/js # 安装mdi图标

大概是这样, 可能会有些出入, 具体可以参考仓库的package.json

组件存放与自动注册

组件放在components目录里, 使用帕斯卡命名(大驼峰命名)组件目录, index.vue编码组件内容

然后在main.js里面的new Vue前加入自动注册全局组件代码

// 自动注册全局组件
const requireComponent = require.context('./components', true, /index\.vue$/)
requireComponent.keys().forEach(fileName => {
    const componentConfig = requireComponent(fileName),
        componentName = componentConfig.default.name
    Vue.component(componentName, componentConfig.default || componentConfig)
})

总组件MusicCenter

components/MusicCenter/index.vue

<template>
    <v-app></v-app>
</template>

<script>
export default {
    name: 'MusicCenter'
}
</script>

其实可以直接不用这个组件, 把基本组件直接放到App.vue里的, 但为了App.vue的代码干净点, 就决定加这个组件, 之后做的组件, 直接扔到这个组件里就好了.

背景组件

功能

1. 设置壁纸
2. 设置壁纸的样式

代码

components/Background/index.vue

<template>
    <v-container
        class="bg"
        :class="`bg-style-${backgroundStyle}`"
        fluid
        fill-height
        :style="{
            backgroundImage:
                'url(' +
                require(`@/assets/images/bg/${backgroundImage}.jpg`) +
                ')'
        }"
    ></v-container>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'Background',
    computed: {
        ...mapGetters(['backgroundImage', 'backgroundStyle'])
    }
}
</script>

<style lang="scss" scoped>
.bg {
    background-repeat: no-repeat;

    &.bg-style-default {
        background-position: center center;
        background-size: cover;
    }
}
</style>

状态

store/modules/background.js

import storage from '../../utils/storage'

const state = {
    image: storage.get('BackgroundImage') || 'default',
    style: storage.get('BackgroundStyle') || 'default'
}

const mutations = {
    SET_BACKGROUND(state, image) {
        state.image = image
    },
    SET_STYLE(state, style) {
        state.style = style
    }
}

const actions = {
    setBackground({ commit }, image, style = 'default') {
        commit('SET_BACKGROUND', image)
        commit('SET_STYLE', style)
        storage.set('BackgroundImage', image)
        storage.set('BackgroundStyle', style)
    }
}

export default {
    namespaced: true,
    state,
    mutations,
    actions
}

---

原文地址