React + Vite 实现一个音乐网站（项目搭建篇）

最新推荐文章于 2024-10-10 07:54:52 发布

转角已陌路

最新推荐文章于 2024-10-10 07:54:52 发布

阅读量1k

点赞数

分类专栏： es6 文章标签： javascript 前端 react

本文链接：https://blog.csdn.net/qq_44417818/article/details/122692051

版权

最近找工作屡屡碰壁，突然不想努力了…

最初想搭建一个个人博客，技术栈确定为React + TS + Vite，一方面是为了学习新知识，一方面是实在闲着。但是由于之前做过个人博客所有觉得个人博客可能没啥意思。主要是设计也是一大麻烦，毕竟前端嘛做的东西还是得好看点的。

1.界面情况（目前）

完成了主界面
图片如下
请添加图片描述

2.功能实现之vite搭建React项目

第一种方法
1.初始化项目
npm init -y
2.引入vite
yarn add vite -D
3.加入命令脚本
“scripts”: {
“dev”: “vite”
}
(package.json文件)
4.根目录创建index.html,index.jsx文件

index.html文件内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

转角已陌路

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

React + Vite 实现一个音乐网站（aplayer音乐播放器）

qq_44417818的博客

01-30

1332

react学习，制作音乐网站，又是充实的一天呢 ^-^

react-music-webApp:音乐网站

05-06

React + Redux 简易版QQ音乐webApp 项目查看运行： $ git clone https://github.com/guixianleng/react-music-webApp.git $ cd react-music-webApp $ npm install $ npm run start 功能：推荐专辑歌曲列表专辑详情排行榜 QQ排行榜全球榜(假数据) 歌手列表条件搜索搜索功能热门搜索自定义搜索播放器迷你播放器歌曲列表歌曲播放模式上一首下一首暂停进度条换肤功能演示： 1.推荐 2. 排行榜 3. 歌手 4. 搜索 5. 播放器 6. 换肤功能实现介绍： 1. 换肤功能该项目使用的是styled-components样式化组件，可以去官网了解优点：可以通过编写实际CSS代码来设计组

参与评论您还未登录，请先登录后发表或查看评论

React搭建Vite项目及各种项目配置

越陌度阡

07-23

2233

创建Vite项目，在操作系统的命令终端，输入以下命令：yarn create vite，输入完成以后输入项目名称、选择开发框架，选择开发语言，如下图所示，即可完成项目创建。注意事项：1. Node版本必须符合要求，否则安装过程中会提示版本不对；2. 由于上面是使用的yarn来安装的，所以需要首先通过npm来全局安装yarn......

react+vite+ts搭建框架及配置路由

2401_85859147的博客

09-11

323

4.基本框架的搭建实现一个可以路由跳转的功能。utills下的定义路由类型。App.tsx导入路由。页面写路由出口以供跳转。

react开发一个音乐网站

mannix_lei的博客

08-07

597

@[TOC](搞个娱乐网站耍耍点击这里访问) 使用react + redux + typescript + antd 首页登录页歌单列表部分代码片段去 github 查看所有源码。 <div> {newsTypeList.map((item) => ( <span> <Button type="link" disabled={loading} onClick={() => handleChang

从0到1使用vite搭建react项目保姆级教程（持续更新中）

风中追风

06-19

8236

要使用Vite创建一个React项目，你需要按照以下步骤操作：1、确保你已经安装了Node.js（建议使用最新的稳定版本）。2、使用npm命令安装Vite CLI工具，再来创建项目3、运行上述命令后，按照提示选择“create-react-app”模板创建项目。4、输入项目名称，例如“my-react-app”。5、选择需要的选项，例如选择JavaScript或TypeScript作为项目的编程语言。

react中添加背景音乐

苟冬新

06-30

1189

先贴代码，有空整理 <script> //背景音乐 function playClicked(element) { $(this).toggleClass("rotate"); if (audio_player.paused) { audio_player.play(); newdisplay = "./Content/campuslife/musicplay

基于react+ts+vite的通用网站模板源码.zip

05-27

这是一个基于React、TypeScript和Vite构建的通用网站模板源码。这个模板为开发者提供了一个高效、现代化的前端开发环境，适用于快速启动新的Web项目。让我们深入了解一下这个模板中的关键技术和概念。首先，React...

vite+ts+react组件库，一套适合开发者使用的轻量级UI组件库，完美支持React18+TS+Vite.zip

02-09

总结来说，Vite+TS+React组件库是一个结合了现代前端技术的优秀解决方案，它利用React 18的高性能特性、TypeScript的安全性和Vite的开发效率，为快应用和企业级项目提供了优质的UI组件。通过深入理解和熟练运用这个...

react PC端项目构建TS，react@18.2.0+antd+vite+axios+redux+sass+ts

03-07

该架构已解决大部分坑，主要用于react@18.2.0PC端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、...

React + Vite：现代前端开发的利器

最新发布

gitblog_01151的博客

10-10

918

React + Vite：现代前端开发的利器 Mario-Bros.js A Mario Bros in 3D with React 项目地址: https://gitcode.com/gh_mirrors/ma/Mario-Br...

推荐开源项目：React + Vite - 快速开发新纪元

gitblog_00020的博客

06-26

474

【React】Vite创建React+TS项目

owo_ovo的博客

03-15

4325

【React】Vite创建React+TS项目

利用 Vite 快速构建 React 组件

codingpy的博客

02-22

1597

你好，我是坚持分享干货的 EarlGrey，翻译出版过《Python编程无师自通》、《Python并行计算手册》等技术书籍。如果我的分享对你有帮助，请关注我，一起向上进击。本文为编译文章，原文地址见文末。ReactReact 是一个免费开源的前端 JavaScript 库，用于构建基于组件的用户界面。它由 Meta 以及由个人开发者和公司组成的社区负责维护。React 可用于开发单页面、移动或服务...

vite和react有什么区别？

anguang1973的专栏

05-10

410

Vite是一个基于浏览器原生ES imports的开发服务器和构建工具，旨在弥合当前和下一代Web开发之间的差距。它使用原生ESM作为模块系统，利用浏览器对ESM的支持，在开发时无需打包，从而实现了极速的启动速度和热模块替换。而React则是一个用于构建用户界面的JavaScript库，其核心思想是将用户界面拆分成独立的组件，每个组件具有自己的状态和属性。React使用虚拟DOM来优化页面渲染性能，通过比较虚拟DOM和实际DOM的差异，只更新实际DOM中的变化部分，以减少不必要的DOM操作，提高性能。

react框架，使用vite和nextjs构建react项目

I_am_shy的博客

07-04

2690

React 是一个用于构建用户界面(UI)的 JavaScript 库,它的本质作用是使用js动态的构建html页面，react的设计初衷就是为了更方便快捷的构建页面，官方并没有规定如何进行路由和数据获取，要构建一个完整的react项目，我们需要借助一些其他的工具或者整合了react的框架，

React+vite3.x实战配置

qq_36529240的博客

07-29

2328

React+vite3.x实战配置

React + Vite 实现一个音乐网站（menu篇）

qq_44417818的博客

01-25

675

React + Vite 实现一个音乐网站 ( menu篇 )

React+Vite学习第一次笔记

qq_50658892的博客

05-28

1263

npm是node包管理工具，而npx是包的执行器。Node 的执行也可以 NPM 来完成，但是必须进行本地安装，通过定位本地路径或者配置 scripts 才能执行。NPX则可以直接运行尚未安装的 npm 包，它会将 Node 包下载到一个临时目录中，使用以后再删除。

react+ts+vite搭建一个项目

05-20

好的，下面是搭建 React + TypeScript + Vite 项目的步骤： 1. 安装 Node.js 和 npm 如果你还没有安装 Node.js 和 npm，请先去官网下载并安装。 2. 初始化项目打开终端，进入你想要创建项目的目录，运行以下命令： ``` npm init @vitejs/app my-react-ts-app --template react-ts ``` 这个命令会使用 Vite 提供的 React + TypeScript 模板来初始化一个项目，并将其命名为 `my-react-ts-app`。在命令执行过程中，你需要回答一些问题，比如项目名称、描述等。 3. 安装依赖进入项目目录，运行以下命令安装依赖： ``` cd my-react-ts-app npm install ``` 4. 运行项目运行以下命令启动项目： ``` npm run dev ``` 这个命令会启动一个开发服务器，并在浏览器中打开应用。你可以在项目文件夹中的 `src` 目录下修改代码，保存后浏览器会自动刷新。 5. 构建项目运行以下命令构建项目： ``` npm run build ``` 这个命令会将项目打包成静态文件，保存在 `dist` 目录下。以上就是使用 React + TypeScript + Vite 搭建项目的全部步骤。祝你成功！