《华为音乐播放器项目》——1.项目简介与环境搭建

绝地灬酷狼 2022-02-12 20:58 412阅读 0赞

## 华为音乐播放器项目 ##

项目简介：做出一个华为音乐播放器项目，涉及技术有JS、SVG、SCSS

最终效果预览：[点击查看][Link 1]

目的：自己JS基础太差了，需要熟悉JS，CSS

## 具体环境搭建过程 ##

**一、首先肯定是创建一个 HUAWEI-MUSIC 文件夹**

然后电脑里面下载好 node ，没有的话直接去官网下一个就好了

**二、因为后面需要使用到一些工具包，所以需要先进行初始化**

git bash 进入到 HUAWEI-MUSIC 目录后输入

npm init -y	///初始化命令，一定要在 HUAWEI-MUSIC 目录下，会下一大堆东西，要耐心等待一下

![在这里插入图片描述][20190426173640791.png]  
初始化完成后用编辑器打开 HUAWEI-MUSIC 会发现里面有一个 package.json 的文件，打开看不懂，不管他放那里。  
![在这里插入图片描述][20190426173431411.png]  
**三、安装打包工具，也要在 HUAWEI-MUSIC 目录下**

npm install --save-dev parcel-bundler		//再次耐心等待一下

安装好之后会多出 node\_modules 文件夹和 package-lock.json 文件，打开还是看不懂，不管放那里。  
![在这里插入图片描述][20190426174828575.png]

**四、创建其他文件，按照次序结构放好：**

1、源文件放到 src 文件对应的文件夹下，然后随便先创建一个 index.html

js文件   	./src/javascript	
     css文件	./src/scss
     svg文件	./src/svg

2、编译好的可以上线的到 dist 目录下，./HUAWEI-MUSIC/dist 按照这个目录创建好就对了  
使用 vs code 打开后的文件整体预览：  
![在这里插入图片描述][20190426175124780.png]

**五、测试环境配置是否搭建成功**

随便在 html 和 js 里面写点能运行的东西，比如：

html:
    	<h2>孙笑川的狗粉丝</h2>
    	<p>有本事去找物管啊！</p>
    js:
    	console.log('人人都是孙笑川！')

然后返回到 HUAWEI-MUSIC 目录下输入以下命令

npm parcel index.html		//相当于给出一个测试的服务器，会给一个地址

得到以下结果  
![在这里插入图片描述][20190426213025340.png]  
如果浏览器输入这个地址后即可看到写在 html 和 js 里面的内容，那就表示环境搭建成功，可以用了

**六、引入 scss ，需要用到 sass 模块**

不会用，怎么办？看[parcel官网文档（https://parceljs.org/assets.html）][parcel_https_parceljs.org_assets.html]，很简单

输入以下命令行安装 sass 模块

npm install sass

用法与CSS很像，在 html 页面引入，点击查看 [sass模块官网文档（https://www.sasscss.com/getting-started/）][sass_https_www.sasscss.com_getting-started]  
在 ./src/scss/style.scss 文件下输入（看了文档就知道为什么是 .scss 文件）：

$bodycolor: blue;
    body{
    	color: $bodycolor;	//body内部的文字颜色就变成蓝色了
    }

但是实际上浏览器是看不懂 .scss 写法的，你还能看到这个效果是因为这里被 parcel 处理过，改为了浏览器能看懂的写法。  
这时候就需要输入以下命令：

npm parcel build index.html	//自动编译为浏览器看的懂的写法然后放到 dist 文件内

然后能在 vs code 内看到这个 dist 文件内多了很多看不懂的文件：  
![在这里插入图片描述][20190426214330805.png]  
保存代码后之前打开的 localhost 网页会自动刷新并看到字体变为蓝色的效果，环境搭建完成！

[Link 1]: https://static.xiedaimala.com/xdml/image/f40ceb64-df08-4420-9226-7f76dbff15d5/2019-2-21-11-37-59.pic.jpg
[20190426173640791.png]: /images/20220213/481357de582e4dd28d3b575fd351aaa3.png
[20190426173431411.png]: /images/20220213/f6fe1698852c493eb3e4a5aaebdc3141.png
[20190426174828575.png]: /images/20220213/05bc47db2eed449d9e8f4195cc44ca4c.png
[20190426175124780.png]: /images/20220213/15f277b02e28464caf0bf7c81d8cdcb0.png
[20190426213025340.png]: /images/20220213/cb52d33820ae4d0e9325d281cc6d0bc1.png
[parcel_https_parceljs.org_assets.html]: https://parceljs.org/assets.html
[sass_https_www.sasscss.com_getting-started]: https://www.sasscss.com/getting-started/
[20190426214330805.png]: /images/20220213/da37522836744d60bec3248d3cc6db3e.png