1.前端Vue3小兔鲜企业级电商实战项目
2.web前端开发学习_掘金前端课程(小册)推荐
3.vue.js(vuejs前端开发实战课后答案)
4.2022年全网最全web前端项目实战课程(含项目实战+源码)
5.Vue 组件库实战(三)：Vue3 TSX
6.vue3基础教程（1）——nodejs环境搭建

前端Vue3小兔鲜企业级电商实战项目

       本课程面向群体：

       1. 已掌握Vue2，催学希望提升至Vue3的社v实战开发者

       2. 已有Vue3基础，寻找实战项目的源码学员

       3. 感兴趣了解Vue3与Vue2开发差异者

       4. 直接上手Vue3的开发者

       5. 欲快速学习Vue技术栈的后端人员

       课程内容以Vue3为基础，逐步构建电商购物流程，催学涵盖9大模块：

       1. Vue3入门

       2. Pinia和项目启动

       3. Home页与一级分类

       4. 二级分类与商品详情

       5. 登录与购物车管理

       6. 接口购物车与支付

       7. 用户中心与拓展课程

       具体课程安排如下：

       入门阶段：

       1. Vue3基础介绍

       2. 使用create-vue创建Vue3项目

       3. setup语法糖应用

       4. ref和reactive的社v实战使用

       5. computed的特性

       6. 生命周期管理

       7. 组件间通信

       Pinia集成与项目启动：

       1. Pinia快速入门

       2. create-vue与项目初始化

       3. element-ui集成与主题配置

       4. scss共享文件自动导入

       5. 吸顶导航功能实现

       6. Pinia优化重复请求

       Home模块与一级分类实现：

       1. 左侧分类数据获取

       2. 轮播图功能实现

       3. 面板组件封装

       4. 新鲜好物与人气推荐

       5. 懒加载指令

       6. goodItem组件封装

       7. 路由缓存问题解决

       8. 业务逻辑函数拆分

       二级分类与商品详情：

       1. 筛选功能

       2. 无限滚动分页

       3. 预览组件

       4. 热榜组件

       5. 全局组件注册

       登录与购物车管理：

       1. 表单校验

       2. Pinia管理用户数据

       3. 用户数据持久化

       4. 请求拦截token

       5. 退出登录

       6. 加入购物车

       7. 头部购物车

       接口购物车与支付：

       1. 本地列表与接口购物车

       2. 接口购物车操作

       3. 合并购物车

       4. 订单生成

       5. 支付功能

       6. useCountDown函数封装

       用户中心与拓展课程：

       1. 三级路由拆分

       2. 订单列表渲染

       3. 手写Sku组件

       课程共分7章，从Vue3基础到电商全流程实战，源码无惧恐惧源码涵盖余节课程内容，催学帮助学员快速掌握Vue3全家桶开发中型项目技能。社v实战

web前端开发学习_掘金前端课程(小册)推荐

       大家好，源码以下是催学推荐的前端掘金课程（小册）列表，适合前端初学者及工作几年的社v实战开发者，内容详细且由一线大厂员工编写。源码

1. React 进阶实践指南

       本课程深入讲解 React 基础与高级用法，催学结合实践示例，社v实战帮助您克服技术瓶颈，源码实现进阶。内容将随 React 版本更新而持续更新，包括 React 系列。

       作者：在一线互联网大厂工作七年，有六年 React 开发经验，通读 React 源码，撰写多篇《React 进阶》系列文章。

       点击进入学习

2. 前端面试之道

       构建全面的前端知识体系，深入探究技术原理，掌握大厂面试中常考知识点。一年磨一剑，精心打造。

       作者：yck，四年前端工程师，经历了从小厂到大厂的面试过程，专注于前端基础设施及架构领域，目前在新加坡某公司任职 Senior Software Engineer。

       点击进入学习

3. 剖析 Vue.js 内部运行机制

       以简单易懂的方式带领读者探索 Vue.js 的世界，通过小 Demo 抽象原理，形成简易版 Vue.js 实现，帮助理解核心概念。

       作者：某外企前端 Leader，前阿里巴巴、滴滴出行和创业团队的前端工程师。

       点击进入学习

4. 前端性能优化原理与实践

       深入理解前端性能优化的原理，将晦涩的知识转化为实践技能，建立个人优化技能库。

       作者：一线电商集团前端工程师，拥有丰富的研发、面试和性能优化经验。

       点击进入学习

5. JavaScript 设计模式核心原理与应用实践

       以易于理解的方式介绍编程“套路”，引导读者深入理解设计模式原理，并在实际场景中应用。

       作者：修言，曾为《前端性能优化原理与实践》小册作者，现为一线电商集团前端工程师。

       点击进入学习

6. 小程序云开发入门到实践

       零基础学习小程序开发和腾讯云云开发知识，实践完成完整小程序项目，适合初学者。

       作者：李东bbsky，腾讯云云开发布道师，致力于普及互联网技术技能。

       点击进入学习

7. Taro 多端开发实现原理与项目实战

       详细解析 Taro 多端开发框架，燕窝溯源码编号通过电商核心项目的实战，帮助开发者快速上手多端项目。

       由凹凸实验室的多名开发工程师联合编写，他们来自 Taro 核心开发者、多款小程序的开发者。

       点击进入学习

8. 前端算法与数据结构面试：底层逻辑解读与大厂真题训练

       面向实战的前端算法面试教学，通过接地气的解释和大量图解，构建算法能力体系。

       点击进入学习

9. Web 前端面试指南与高频考题解析

       适合应届毕业生和计划跳槽的前端开发者，提供面试技巧和高频考题解析。

       点击进入学习

. React Hooks 与 Immutable 数据流实战

       以实战为导向，深入探索 React 开发中的设计模式与性能优化策略，打造完整前端工作流。

       点击进入学习

. babel 插件通关秘籍

       深入学习 babel 编译原理，掌握编写任何 babel 插件的技能，包括基础、进阶、实战和简易 babel 实现。

       作者：某一线大厂前端工程师，公众号[神光的编程秘籍]维护者，对编译原理有深入研究。

       点击进入学习

. 大厂 H5 开发实战手册

       由京东凹凸实验室的资深前端工程师编写，提供 H5 开发和 UI 开发的实战技巧，适合应聘大厂 H5 开发或 UI 开发职位的开发者。

       点击进入学习

. TypeScript 全面进阶指南

       深入探讨 TypeScript 的应用，提高代码的健壮性、可读性，提升开发效率和体验。

       作者：阿里巴巴前端开发工程师，热衷于分享和推广 TypeScript 相关知识。

       点击进入学习

. 玩转 CSS 的艺术之美

       深入 CSS 技巧，提供大量骚操作示例，提升审美标准和艺术创作能力。

       作者：资深前端工程师，网易互动娱乐事业群成员，负责前端工程化和架构设计。

       点击进入学习

. 深入浅出 Vite

       系统学习 Vite 构建工具，提升前端工程化能力，全面掌握构建生态和底层原理。

       作者：前端工程化领域专家，曾将 Vite 应用于抖音直播等大型业务，同时也是 Vite Contributor。

       点击进入学习

. TypeScript 类型体操通关秘籍

       掌握 TypeScript 类型体操的六大技巧，成为类型编程高手，涵盖类型系统和实战案例。

       作者：前阿里架构组前端工程师，对前端编译原理有深入研究。

       点击进入学习

. React 实战：设计模式和最佳实践

       深入了解 React 应用设计模式和最佳实践，包括 Suspense 和 Hooks 的应用。

       点击进入学习

. 前端调试通关秘籍

       掌握 VSCode Debugger、Chrome DevTools 和 Charles 等调试工具，提升调试能力。

       点击进入学习

. Webpack5 核心原理与应用实践

       从工程搭建、构建性能优化到 Loader 和 Plugin 开发，深入剖析 Webpack 执行原理。

       作者：字节跳动前端工程师，重度帝王蟹爱好者，口袋娃娃机 源码对前端工程化有深入研究。

       点击进入学习

. WebGL 入门与实践

       介绍 WebGL 和 CSS 3D 开发技巧，演示 3D 数学库在 Web 开发中的作用。

       点击进入学习

. Vue3 企业级项目实战

       围绕 Vue3、Element Plus 和 Spring Boot 开展的完整企业级项目开发实战。

       点击进入学习

. 基于 Vite 的组件库工程化实战

       探索 Vite 在组件库工程化中的应用，提升项目开发效率。

       点击进入学习

. 从前端到全栈

       通过 Node.js 从前端角度体验全栈开发，涵盖工具脚本、HTTP 服务、工程化和跨平台开发。

       点击进入学习

. NestJS 项目实战

       学习使用 NestJS 构建高效、可扩展的 NodeJS 服务端应用。

       点击进入学习

. Vue 商城项目开发实战

       完成一个完整 Vue 商城项目的开发，包含技术讲解和实战。

       点击进入学习

. 基于Node的DevOps实战

       通过实践项目深入 DevOps 工程，包括开发、测试、构建和部署。

       点击进入学习

. 区块链开发入门：从0到1构建基于以太坊智能合约的ICO DApp

       为前端开发者提供区块链开发基础，通过 DApp 实战掌握区块链技术。

       点击进入学习

. Uniapp从入门到进阶

       全面讲解跨平台应用开发，包含 Uniapp 常用知识点、基础 API、前端交互、组件封装、后端 Nodejs 开发、前后端联调和优化部署。

       点击进入学习

. 现代 Web 布局

       基于 Web 开发需求，探索现代布局技术，适应不同设备和场景。

       点击进入学习

. 深入剖析 Node.js 底层原理

       从源码角度解读 Node.js 设计，实现简易 JS 运行时，提升 Node.js 技能。

       点击进入学习

vue.js(vuejs前端开发实战课后答案)

       Vue.JS入门篇--列表渲染

       1、Vue.js给被观察数组添加了两个便捷方法：$set()和$remove()。你应该避免直接通过索引来设置数据绑定数组中的元素，比如demo.items[0]={ }，因为这些改动是无法被Vue.js侦测到的。

       2、和model绑定到一起。说白了，就是你js中的绑定值变了。你dom中的内容就跟着一块变了。vue是通过解析{ { 文字..}}来生成内容的。后面绑定方法，输出内容的时候都会讲到。

       3、vue的常用指令v-bind：用于绑定属性，通过v-bind：绑定过的属性，可以直接在属性值写表达式。可以简写为：v-on：用于绑定事件，通过v-on：绑定过的事件，可以指定vue实例定义的方法。

       4、“虚拟DOM”是我们对由Vue组件树建立起来的整个VNode树的称呼。接下来你需要熟悉的图片编辑网页源码是如何在createElement函数中使用模板中的那些功能。

       5、Vue.js列表渲染绑定jQuery插件的正确姿势使用v-for绑定列表时，有时候需要绑定如select2之类的jQuery插件。需要在Vue根据数组内容生成dom元素之后，去找到该dom元素，然后$().xxx绑定jQuery插件。

       6、删除对应的dom节点。如果index作为key，删除后当第二项删除的时候，第三项的下标2会变成1，index在改变，没有办法准确定位到需要删除的DOM节点。

Vue.js入门教程(三)双向绑定和数据渲染

       1、和model绑定到一起。说白了，就是你js中的绑定值变了。你dom中的内容就跟着一块变了。vue是通过解析{ { 文字..}}来生成内容的。后面绑定方法，输出内容的时候都会讲到。

       2、Vue.js（读音/vju/，类似于view）是一个构建数据驱动的web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

       3、木子解释用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

前端里面node.js和vue.js区别是什么?

       1、服务环境的不同nodejs一个是前端框架，vuejs一个是服务端语言。nodejs是js运行时，运行环境，类比java中jvm。

       2、nodejs一个是前端框架，vuejs一个是服务端语言。nodejs是js运行时，运行环境，类比java中jvm。

       3、Node.js和Vue.js的区别一个是前端框架，一个是服务端语言。Node.js是一个基于ChromeV8引擎的JavaScript运行环境。Node.js使用了一个事件驱动、非阻塞式I/O的模型，使其轻量又高效。

       4、Node.js是一个JS服务器，它可以将JS代码直接翻译成机器码在本地执行，让JS也可以进行服务端编程。myeclipse登录界面源码Vue.js是一个前端框架，利用它可以很方便地构建出复杂的前端逻辑和漂亮的界面。

       vue.js是什么

       Vue.js：（读音/vju/，类似于view）是一个构建数据驱动的web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

       Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。

       vue.js：是一套用于构建用户界面的渐进式JavaScript框架。jquery：是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。特点不同vue.js：Vue被设计为可以自底向上逐层应用。

       Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue从根本上采用最小成本、渐进增量的设计。Vue的核心库只专注于视图层，并且很容易与其他第三方库或现有项目集成。

       Vue.js是一个交互性较强的前端框架，去Vue.js官方中文网，首页会展示一段小视频，里面说明了Vue.js的简单又基本的用法。登录前端库或GitHub，Vue的热门度，正义极快的速度增长，成为目前最流行的框架，没有之一。

vue.js的优点和缺点在哪?

       1、AngularJS的学习成本高，比如增加了DependencyInjection特性，而Vue.js本身提供的API都比较简单、直观。在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。Vue.js使用基于依赖追踪的观察并且使用异步队列更新。

       2、缺点：新生儿：Vue.js是一个新的项目，没有angular那么成熟。影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库不支持IE8。

       3、渐进式构建能力是vue.js最大的优势，vue有一个简洁而且合理的架构，使得它易于理解和构建。vue有一个强大的充满激情人群的社区，这为vue.js增加了巨大的价值，使得为一个空白项目创建一个综合的解决方案变得十分容易。

       4、Vue的优缺点：易于使用：Vue.js包含基于HTML的标准模板，可以更轻松地使用和修改现有应用程序。更顺畅的集成：无论是单页应用程序还是复杂的Web界面，Vue.js都可以更平滑地集成更小的部件，而不会对整个系统产生任何影响。

年全网最全web前端项目实战课程(含项目实战+源码)

       今天，我向大家推荐一套全网最全的web前端项目实战课程，旨在帮助前端学习者提升实战经验。课程内容丰富，涵盖了多个项目实战，旨在满足不同阶段学习者的需求。以下是课程中的精选项目，帮助你构建全面的前端技能。

       项目一：小米官网

       选取小米官网作为实战案例，旨在为初学者提供一个实践目标，学习如何构建类似布局。通过模仿其设计，练习div+css布局，掌握网页结构与视觉设计的基础。

       项目二：响应式设计

       本项目包含多种特效，旨在通过实践增强学生对CSS3过渡、动画等新功能的理解与运用。通过构建子站点，进一步巩固div+css布局技能。

       项目三：米课网

       作为响应式站点，米课网的实践有助于学习者了解响应式设计的过程和实现方法，适用于需要支持响应式布局的现代站点。

       项目四：美食网(移动端)

       专注于移动设备布局的项目，涉及店铺展示、餐饮列表、视频详情等页面，通过此项目学习如何构建移动端网站，掌握M站布局技巧。

       项目五：IMMERSE音乐播放器

       音乐播放器项目集中练习Vue框架的应用，包括主Vue应用程序、组件构建、项目测试等，帮助学习者熟悉Vue生态。

       项目六：登录注册认证系统

       作为每个项目的基础组件，登录系统提供独立实践机会，熟悉react、redux、react-router等技术栈，为项目整合打下基础。

       项目七：Ego商城后台管理系统

       深入后台管理领域，学习添加、删除、查看等功能的实现，涉及Vue、Vuex、Vue-Router等技术栈，强化管理系统开发能力。

       项目八：微信小程序-蓝莓派社区

       微信小程序阶段，基于前期学习成果，实践项目功能开发，掌握微信小程序技术，实现项目需求。

       项目九：推广类移动端页面

       专注于分析与展示运势结果，利用Swiper、jQuery、REM、Less等技术，实现场景化应用，增强移动端用户体验。

       项目十：蓝莓派社区

       音乐社区项目，包括交互功能如滑动门、精灵贴图、模态框架等，通过JavaScript、jQuery、REM等技术实现，提升前端交互能力。

       项目十一：宜居租房类WebApp

       租房类WebApp项目，涵盖登录注册、城市选择、搜索等功能，使用React、React-Router、Redux、Fetch等技术栈，实现全面功能。

       以上项目为前端学习者提供了全面的实战经验，涵盖从基础到进阶的技能培养。赶快加入学习，提升你的web前端实战能力吧！

Vue 组件库实战(三)：Vue3 TSX

       这是 Vue 组件库实战的第三篇文章，主要讲述了 JSX/TSX 技术及其在 Vue3 中的特殊写法。

       JSX 是由 Facebook 提出的一种用于组件开发的语法扩展，它将 ECMAScript 语法进行扩展，并将其转换为标准的 ECMAScript。虽然 JSX 在 React 中得到了广泛的应用，但 Vue 也对其进行了吸收和改进，使其更易于理解组件代码，但也带来了一些限制。

       我们可以通过 HTML 到 JSX 的转换工具来快速了解 JSX 的基本概念。

       TSX 则是在 JSX 的基础上，提供了 TypeScript 的支持。使用 TSX 时，需要将文件保存为 tsx 后缀，并在配置中启用对 JSX 的支持。TypeScript 的众多功能，如 as 关键字、类型检查、内建元素等，都可以在 TSX 中使用。具体细节可以参考 TypeScript JSX 文档。

       对于 Vue3 中的 TSX，建议阅读官网的渲染知识章节来了解背景知识。

       在推荐写法中，Composition API 的写法是最为推荐的。

       在 Vue3 TSX 中，我们需要理解事件修饰符、传递插槽（slot）、指令、emit 等概念。这些概念在渲染函数案例中有对应的 JSX 写法，可以通过逐个练习来加深理解。

       在练习时，需要安装 @vue/babel-plugin-jsx 并在 tsconfig.json 中配置 "jsx": "preserve"。也可以直接在 Playground 在线进行练习。

       本文为 8 月 Day 的学习笔记，内容来源于极客时间《前端进阶特训营》，强烈推荐该课程！

vue3基础教程（1）——nodejs环境搭建

       本系列文章由浅入深，从基础知识到实战开发，非常适合入门同学。

       零基础读者也能成功由本系列文章入门，但如果您具备以下基础，将会事半功倍：

       HTML基础

       CSS基础

       JS基础

       当然，即使从未接触过前端代码的小白，也能轻松学习本系列课程，因为我会在文章中简略穿插前端基础知识。

       为什么学习Vue要下载Node？这是因为Vue有自己的一套语法，但是最终显示到页面上的，其实还是HTML+CSS+JS。Vue语法是如何变成HTML三件套的呢？答案就是Node。Node是一个环境，它主要的作用就是把Vue的语法编译成HTML语法。任何框架的产生与流行，一定是因为他能解决某些问题，降低编码的工作量、难度等等。所以不要有畏难情绪，Vue想要正常运行，需要一个环境，那就是NodeJS。

       新手不要多想，选择这个最稳定版本即可。对于有一定基础的同学，可以下载nvm或者博主自主开发的Node版本管理工具，只适配Windows系统。登录上面小程序首页后，可以获取工具最新版本下载链接。

       下载链接：nodejs.com.cn/。新手推荐使用这个安装包的形式，能简化很多工作。

       对于Vue开发，选择合适的前端编辑器至关重要。最广泛的有三个：VSCode、WebStorm和HBuilderX。VSCode是免费的代码编辑器，背靠微软，信誉有保障。WebStorm是付费的代码编辑器，功能强大，使用丝滑，但网上有破解方案。HBuilderX是国产唯一能打的前端编辑器，但与前两者相比，还是有缺陷，但uniapp官方指定编辑器，基于uniapp开发小程序时只能使用HBuilderX。如果目前只是入门Vue3，建议从VSCode或WebStorm中选一个。

Vue3网易云音乐项目实战教程三、项目启动前做一些初始化工作

       前言

       前两节只是对我们即将要做的项目进行初步的介绍与分析，从这一节开始，我们就要正式进入到项目代码的开发过程中了。当然了，在正式进入到代码开发中，我们还是要做一些初始化的工作，这能够让我们在后期的开发过程中，更加轻松、方便。

项目代码初始化配置Vite.config.js1、alias别名设置

       平常我们在项目中引入目标模块的时候，会这样写../../../views/index/index相对路径，抑或者是/src/views/index/index这样的绝对路径。但是在实际的项目开发中，这样的写法不仅难看，还臃肿，一不小心就有可能会写错路径，后期项目若是进行重构，需要更改路径或者名称等情况，就会令人抓狂。如果我们设置了项目路径别名，如@views/index/index，就可以用来提高代码的可读性和可维护性。

//Vite.config.jsimport{ resolve}from'path'exportdefaultdefineConfig({ //...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和类型支持。

exportdefaultdefineConfig({ //...resolve:{ extensions:['.less','.js','.ts','.jsx','.tsx','.json']}})3、开发服务器选项配置exportdefaultdefineConfig({ //...server:{ host:0.0.0.0,//设置为`0.0.0.0`或者`true`将监听所有地址，包括局域网和公网地址port:,//自定义开发服务器端口，适合多个项目同时启动，导致端口号被占用proxy:{ }}})Element-Plus的引入

       因为element-plus的UI组件库，我们并不会是全部使用，所以我喜欢是按需引入，根据官方提供的文档，我摘抄如下：

       首先你需要安装unplugin-vue-components?和?unplugin-auto-import这两款插件

$npminstall-Dunplugin-vue-componentsunplugin-auto-import//vite.config.jsimportAutoImportfrom'unplugin-auto-import/vite'importComponentsfrom'unplugin-vue-components/vite'import{ ElementPlusResolver}from'unplugin-vue-components/resolvers'exportdefaultdefineConfig（{ plugins:[//...AutoImport({ resolvers:[ElementPlusResolver()],}),Components({ resolvers:[ElementPlusResolver()],}),],}）CSS样式初始化

       这是老生常谈的问题，作为一个前端开发应该都知道，各大浏览器都内置了HTML元素默认样式表，为了考虑到浏览器的兼容问题，节省开发时间，我们就需要重置一下CSS样式，以获得更好的跨浏览器兼容。

:root{ --t-primary-color:#f7be;--t-text-color:#2d2d2d;--t-muted-color:#;--t-light-color:#ccc;--t-highlight-color:var(--t-primary-color);--t-container-background:rgba(,,,.8);--t-modal-shadow:inset1px1pxhsla(0,0%,%,.5),px8px0#a;}*{ padding:0;margin:0;}html,body{ height:%;font-size:px;font-family:PingFangSC,Arial,MicrosoftYaHei,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:vw;height:%;}项目结构划分页面布局

       上一节课我们已经将页面布局简单地画了一下，这一节我们就这边实现。

//App.vue<template><!--页面主体边框--><el-container><!--页面左侧导航--><Sidebar/><!--页面内容主体--><el-main><!--主体部分，顶部搜索及登录部分--><Header/><!--主体部分，页面渲染区域--><router-view></router-view></el-main><!--音乐播放条--><!--<play-bar></play-bar>--></el-container></template><scriptsetup>importSidebarfrom'@components/Sidebar.vue';importHeaderfrom'@components/Header.vue';</script><style></style>左侧sidebar组件

       左侧导航部分，效果图如下所示：

       实现的效果，切换导航，根据路由渲染数据，当前导航高亮。

顶部fixed

       主体区域顶部，准备实现搜索、用户登录注册退出等功能，后续如果还有其他功能，可以继续添加。

//Header.vue<template><el-header><!--搜索框--><divclass="search">搜索</div><!--用户操作：登录注册退出--><divclass="user-info">登录/注册</div></el-header></template><scriptsetup></script><stylescoped></style>音乐播放条play-bar

       页面底部的音乐播放条，功能比较多而复杂，后期会专门有所讲解，我们目前只是需要知道要实现的效果即可。

       依次展示当前播放歌曲的封面海报、歌曲名、演唱者、当前播放时长、音乐总时长、上一首、播放/暂停、下一首、音量条、音乐播放模式、歌曲、播放列表、mini播放器......

项目路由配置

       我们需要将我们的组件映射到路由上，点击后会渲染不同的页面数据。

import{ createRouter,createWebHistory}from'vue-router';//定义一些路由,每个路由都需要映射到一个组件constroutes=[{ path:'/',redirect:'/index'},{ path:'/index',name:'index',component:()=>import('@views/index/Index.vue')},];//创建路由实例并传递`routes`配置constrouter=createRouter({ history:createWebHistory(),routes});exportdefaultrouter;

       路由的具体用法，在后期课程会有所涉猎，还没看过的，可先自行到官网查阅。

axios的封装

       Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。封装起来，就不用每次都要引入调用了，减少不必要的代码量。

//instance.jsimportaxiosfrom'axios';//自定义配置//新建一个axios实例constinstance=axios.create({ //`timeout`指定请求超时的毫秒数(0表示无超时时间)//如果请求话费了超过`timeout`的时间，请求将被中断timeout:*,//`withCredentials`表示跨域请求时是否需要使用凭证withCredentials:true,//`validateStatus`定义对于给定的HTTP响应状态码是resolve或rejectpromise。//如果`validateStatus`返回`true`(或者设置为`null`或`undefined`)，//promise将被resolve;否则，promise将被rejectevalidateStatus:status=>{ returnstatus>=&&status<;//default},baseURL:'DOMIAN'});//拦截器//添加请求拦截器axios.interceptors.request.use(function(config){ //在发送请求之前做些什么returnconfig;},function(error){ //对请求错误做些什么returnPromise.reject(error);});//添加响应拦截器axios.interceptors.response.use(function(response){ //对响应数据做点什么returnresponse;},function(error){ //对响应错误做点什么returnPromise.reject(error);});//请求时使用的方法constajaxMethod=['get','post']constapi={ }ajaxMethod.forEach(method=>{ api[method]=function(uri,data,config){ returnnewPromise(function(resolve,reject){ instance[method](uri,data,config).then(response=>{ resolve(response)}).catch(error=>{ reject(error)})})}});exportdefaultapi;

       通过封装后，设置全局变量，挂载到#app。具体设置，可以自行下载代码查阅。

课后总结

       看到这里，我们终于已经开始着手了代码的开发，目前项目的初始重置、页面结构的划分以及页面路由等都已经配置完成，若是后期在开发过程中有所变化，我们会随时进行调整。在这节课我们也学到了稍微那么有点儿用的东西了吧。

       下节课，我们计划要实现项目首页左侧导航条、登录/注册、轮播图、热门歌单功能。

       好了，下节课见。

       一键三连，努力变得更强！！！

原文：/post/