前言
前两节只是对我们即将要做的项目进行初步的介绍与分析，从这一节开始，我们就要正式进入到项目代码的开发过程中了。当然了，在正式进入到代码开发中，我们还是要做一些初始化的工作，这能够让我们在后期的开发过程中，更加轻松、方便。
项目代码初始化
配置 Vite.config.js
1、alias别名设置
平常我们在项目中引入目标模块的时候，会这样写../../../views/index/index相对路径，抑或者是/src/views/index/index这样的绝对路径。但是在实际的项目开发中，这样的写法不仅难看，还臃肿，一不小心就有可能会写错路径，后期项目若是进行重构，需要更改路径或者名称等情况，就会令人抓狂。如果我们设置了项目路径别名，如@views/index/index，就可以用来提高代码的可读性和可维护性。
// Vite.config.jsimport { resolve } from 'path' export default defineConfig({ // ... resolve: { alias: { '@': resolve(__dirname, 'src'), '@components': resolve(__dirname, 'src/components'), '@apis': resolve(__dirname, 'src/apis'), '@utils': resolve(__dirname, 'src/utils'), '@plugins': resolve(__dirname, 'src/plugins'), '@assets': resolve(__dirname, 'src/assets'), '@views': resolve(__dirname, 'src/views'), } }})2、extensions省略扩展名
默认['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']，导入时想要省略的扩展名列表。注意，不 建议忽略自定义导入类型的扩展名（例如：.vue），因为它会影响 IDE 和类型支持。
export default defineConfig({ // ... resolve: { extensions: ['.less', '.js', '.ts', '.jsx', '.tsx', '.json'] }})3、开发服务器选项配置
export default defineConfig({ // ... server: { host: 0.0.0.0, // 设置为 `0.0.0.0` 或者 `true` 将监听所有地址，包括局域网和公网地址 port: 1234, // 自定义开发服务器端口，适合多个项目同时启动，导致端口号被占用 proxy: {} }})Element-Plus的引入
因为element-plus的UI组件库，我们并不会是全部使用，所以我喜欢是按需引入，根据官方提供的文档，我摘抄如下：
首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
$ npm install -D unplugin-vue-components unplugin-auto-import// vite.config.jsimport AutoImport from 'unplugin-auto-import/vite'import Components from 'unplugin-vue-components/vite'import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig（{ plugins: [ // ... AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ],}）CSS样式初始化
这是老生常谈的问题，作为一个前端开发应该都知道，各大浏览器都内置了 HTML 元素默认样式表，为了考虑到浏览器的兼容问题，节省开发时间，我们就需要重置一下CSS样式，以获得更好的跨浏览器兼容。
:root { --t-primary-color: #f7be10; --t-text-color: #2d2d2d; --t-muted-color: #909090; --t-light-color: #ccc; --t-highlight-color: var(--t-primary-color); --t-container-background: rgba(250, 250, 250, .8); --t-modal-shadow: inset 1px 1px 0 0 hsla(0,0%,100%,.5),0 3px 8px 0 #555a64;}* { padding: 0; margin: 0; }html, body { height: 100%; font-size: 14px; font-family: PingFang SC,Arial,Microsoft YaHei,sans-serif; color: var(--t-text-color); background-color: var(--t-container-background);}a { text-decoration: none; color: var(--color-text-main);}a:hover { text-decoration:underline;}img { border:none;}ol,ul,li { list-style:none;}*,*:focus,*:hover, input{ outline:none; }// 滚动条样式::-webkit-scrollbar { width: 0px;}::-webkit-scrollbar-track { border-radius: 8px; background: transparent;}::-webkit-scrollbar-thumb { border-radius: 8px; background: var(--t-light-color);}::-webkit-scrollbar-thumb:hover { background: var(--t-muted-color);}// 页面布局的宽高#app, .el-container { width: 100vw; height: 100%; }项目结构划分
页面布局
上一节课我们已经将页面布局简单地画了一下，这一节我们就这边实现。
// App.vue<template> <!-- 页面主体边框 --> <el-container> <!-- 页面左侧导航 --> <Sidebar /> <!-- 页面内容主体 --> <el-main> <!-- 主体部分，顶部搜索及登录部分 --> <Header /> <!-- 主体部分，页面渲染区域 --> <router-view></router-view> </el-main> <!-- 音乐播放条 --> <!-- <play-bar></play-bar> --> </el-container></template><script setup>import Sidebar from '@components/Sidebar.vue';import Header from '@components/Header.vue';</script><style></style>
左侧sidebar组件
左侧导航部分，效果图如下所示：
实现的效果，切换导航，根据路由渲染数据，当前导航高亮。
顶部fixed
主体区域顶部，准备实现搜索、用户登录注册退出等功能，后续如果还有其他功能，可以继续添加。
// Header.vue<template> <el-header> <!-- 搜索框 --> <div class="search"> 搜索 </div> <!-- 用户操作：登录注册退出 --> <div class="user-info"> 登录/注册 </div> </el-header></template><script setup></script><style scoped></style>
音乐播放条 play-bar
页面底部的音乐播放条，功能比较多而复杂，后期会专门有所讲解，我们目前只是需要知道要实现的效果即可。
依次展示当前播放歌曲的封面海报、歌曲名、演唱者、当前播放时长、音乐总时长、上一首、播放/暂停、下一首、音量条、音乐播放模式、歌曲、播放列表、mini播放器......
项目路由配置
我们需要将我们的组件映射到路由上，点击后会渲染不同的页面数据。
import { createRouter, createWebHistory} from 'vue-router';// 定义一些路由, 每个路由都需要映射到一个组件const routes = [ { path: '/', redirect: '/index'}, { path: '/index', name: 'index', component: () => import('@views/index/Index.vue')},];// 创建路由实例并传递 `routes` 配置const router = createRouter({ history: createWebHistory(), routes});export default router;路由的具体用法，在后期课程会有所涉猎，还没看过的，可先自行到官网查阅。
axios的封装
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。封装起来，就不用每次都要引入调用了，减少不必要的代码量。
// instance.jsimport axios from 'axios';// 自定义配置// 新建一个 axios 实例const instance = axios.create({ // `timeout` 指定请求超时的毫秒数(0 表示无超时时间) // 如果请求话费了超过 `timeout` 的时间，请求将被中断 timeout: 1000 * 60, // `withCredentials` 表示跨域请求时是否需要使用凭证 withCredentials: true, // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。 // 如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)， // promise 将被 resolve; 否则，promise 将被 rejecte validateStatus: status => { return status >= 200 && status < 300; // default }, baseURL: 'DOMIAN'});// 拦截器// 添加请求拦截器axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 return config;}, function (error) { // 对请求错误做些什么 return Promise.reject(error);});// 添加响应拦截器axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response;}, function (error) { // 对响应错误做点什么 return Promise.reject(error);});// 请求时使用的方法const ajaxMethod = ['get', 'post']const api = {}ajaxMethod.forEach(method => { api[method] = function (uri, data, config) { return new Promise(function (resolve, reject) { instance[method](uri, data, config) .then(response => { resolve(response) }) .catch(error => { reject(error) }) }) }});export default api;通过封装后，设置全局变量，挂载到#app。具体设置，可以自行下载代码查阅。
课后总结
看到这里，我们终于已经开始着手了代码的开发，目前项目的初始重置、页面结构的划分以及页面路由等都已经配置完成，若是后期在开发过程中有所变化，我们会随时进行调整。在这节课我们也学到了稍微那么有点儿用的东西了吧。
下节课，我们计划要实现项目首页左侧导航条、登录/注册、轮播图、热门歌单功能。
好了，下节课见。
一键三连，努力变得更强！！！
原文：https://juejin.cn/post/7104218391795204109