我正在参加「掘金·启航计划」

项目准备要求

首先需要对vue有所了解，通过安装了node环境。本教程主要是为刚学vue提供一些思路和教程，不足的话欢迎提出！使用到的第三方组件库是Element-plus，也就是Element-UI的加强版！

没有安装环境的可以去网上安装，这是我的版本信息

构建项目

1、自己找一个空的文件夹，打开vscode，使用vue3官方推荐的方式构建新项目，这里我选择的是JavaScript，创建的文件名称可以根据自己的需求选择。

npm init vue@latest

2、测试构建的项目是否能跑起来，

cd yun-music
npm install
npm run dev

访问本地服务器出现这个界面就成功了

3、安装第三方组件库Element-plus，同时安装自动引入的插件 官方网站：快速开始 | Element Plus (element-plus.org)

npm install element-plus --save

安装自动导入的插件：

npm install -D unplugin-vue-components unplugin-auto-import 

同时需要配置一下vite.config.js文件，可以参考我的代码：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

项目结构

把comments和views中初始的代码删除掉。这里我在views创建了一个首页：IndexView.vue和两个组件：HeaderCom.vue,AsideCom.vue

项目框架

使用Element-plus中的布局容器：

app.vue

<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <header-com></header-com>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <aside-com></aside-com>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

这里使用的是setup语法糖，在app.vue中引用两个组件：HeaderCom.vue,AsideCom.vue。直接引用就可以使用，不需要暴露组件。

<script setup>
    import HeaderCom from './components/HeaderCom.vue'
    import AsideCom from './components/AsideCom.vue'
</script>

还有css文件：

<style scoped>
    .el-container {
        height: 100vh;
    }

    .el-aside {
        height: 100%;
        overflow: auto;
    }

    .el-header {
        padding: 0;
        background-color: #eee;
    }
    .el-main {
        background-color: #fff;
    }
</style>

router：index.vue

为了测试我们现在路由中添加了首页路由：

main.css

为了去除边距记得修改main.css的代码：

h1,h2,h3,h4,h5,h6,p,ul,form,dl,dd,dt{
  padding: 0;
  margin: 0;
}
ul,li{
  list-style: none;
}
a,a:visited{
  color: #000;
  text-decoration: none;
}
img{
  display: block;
  border: none;
}
body{
  min-width:320px;
  margin:0 auto;
  overflow:hidden;
}

运行项目

nmp run dev

运行后的效果如图（项目还未结束侧边栏导航组件：AsideCom.vue）,实现后可以通过点击侧边栏按钮跳转到不同的界面，渲染到main中。

总结

项目使用的是vue3+vite构建的。项目主要是通过使用Element-plus组件，目前已经搭建整体的框架，顶部由HeaderCom.vue组件实现，侧边栏也是组件这样满足前端的工程化开发。后续会继续写如何实现侧边导航栏和各个页面的实现，和调用网易云API获取数据，谢谢大家的阅读！