前言
在接下来的一段时间，我会仿照网易云音乐，利用Vue开发一个移动端的网易云音乐项目。在做这个项目之前，需要做一些准备工作。
一、获取网易云API
因为这个项目是基于网易云音乐的，数据都是从网易云获取的，所以我们有必要先拿到网易云API
1. 安装 node 环境
在获取网易云API之前我们必须先搭建好 Node 环境，有关 Node.js 的介绍和 Node 环境搭建请移步到这两篇文章。
2. 将网易云API下载到本地
进入到网易云API的 GitHub 界面，直接将整个项目下载到本地并解压。
3. 在解压后的文件目录中输入cmd，进入终端窗口。
4. 在cmd中输入 npm install 指令下载相关依赖
5. 在cmd中输入 npm app.js 指令部署服务器
当你看到 server running 就代表整个服务器已经部署好了
6. 在浏览器地址栏输入 localhost:3000
或者输入 127.0.0.1:3000
能进入这个界面就说明我们将网易云服务器部署到本地了，我们已经可以拿到网易云API了
二、初始配置
1. 创建Vue项目
借助Vue-Cli来创建，更详细的Vue-Cli创建Vue项目流程请移步到： 15-Vue-CLI4基本使用
-
在命令行中输入指令
vue create music -
选择手动方式创建
- 选择相关配置项
- 是否需要使用router--选择是(y)
- 选择哪一种CSS预处理器--选择第一个
- 选择哪一种代码规范--选择第三种(标准规范)
- 选择什么时候进行代码规则检测--两种都选
- 选择如何存放配置--选择第一个(放到单独的文件中)
- 是否保存当前配置--选择否(n)
- 敲回车后等待项目创建，显示如下内容就表示项目创建成功了
2. 删除默认文件
在Vue-Cli创建的项目会默认生成很多文件，但是与我们的项目无关，譬如favicon.ico、logo.png、HellodWorld.vue...
我们可以把这些文件删掉
然后我们在把router文件夹下的index.js文件的多余代码删掉
删除后的文件长这样
3. 初始化HTML中的代码
index.html
<!--可以让部分国产浏览器默认采用高速模式渲染页面-->
<meta name="renderer" content="webkit">
<!--为了让 IE 浏览器运行最新的渲染模式下-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--SEO三大标签-->
<title>网易云音乐</title>
<meta name="keywords" content="网易云音乐，音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，移动站，music.163.com">
<meta name="description" content="网易云音乐是一款专注于发现与分享的音乐产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。">
<!--
apple-touch-icon: 是苹果私有的属性
作用: 指定将网页保存到主屏幕上的时候的图标
-->
<link rel="apple-touch-icon" href="./apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="114x114" href="./apple-touch-icon114.png">
<link rel="apple-touch-icon" sizes="152x152" href="./apple-touch-icon152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon180.png">
<!--网页快捷图标-->
<link rel="icon" href="./favicon.ico">
还需要将上面代码用到的图标放到public目录中
4. 利用rem+视口缩放的方式来适配移动端
<head>
...
<script>
let scale = 1.0 / window.devicePixelRatio;
let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
document.write(text);
document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
document.documentElement.setAttribute('data-dpr', window.devicePixelRatio + '');
</script>
</head>
注意：
- 如果在HTML文件中用到了字符串模板, 字符串模板中用到了变量, 那么html-plugin是无法处理的, 所以会报错
- 如果想解决这个问题, 那么我们需要再借助一个loader,
html-loader - 安装 html-loader
npm install --save-dev html-loader
- 配置 html-loader
在项目目录(music)下新建一个vue.config.js文件
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.(html)$/,
exclude: /node_modules/,
use: {
loader: 'html-loader',
options: {
minimize: true
}
}
}
]
}
}
}
5. 借助postcss-pxtorem实现自动将px转换成rem
- 安装 postcss-pxtorem
npm i -D postcss-pxtorem
- 配置 postcss-pxtorem
在项目目录下新建一个postcss.config.js文件
module.exports = {
plugins: {
autoprefixer: {},
'postcss-pxtorem': {
rootValue: 100, // 根元素字体大小
propList: ['*']
}
}
}
- 排除不需要转换为rem的样式
小技巧：只需要将样式的px改为大写的Px即可 例如：
font-size： 15px; --> font-size： 15Px；
6. 借助webpack实现CSS3/ES678语法的兼容
CSS3/ES678语法的兼容在Vue-cli创建项目的时候已经帮我们实现了
如果需要指定兼容哪些浏览器，可以在项目目录下的 .browserslistrc 文件中配置
例如：我需要兼容 IE8及以上版本，火狐3.5及以上版本...
ie >= 8
Firefox >= 3.5
chrome >= 35
opera >= 11.5
7. 借助fastclick解决移动端100~300ms的点击事件延迟问题
- 安装 fastclick
npm install fastclick
- 初始化 fastclick main.js
import fastclick from 'fastclick'
fastclick.attach(document.body)
8. 初始化默认的全局样式
- 在assets目录新建一个css目录
- 将准备好的文件放到css目录中
- 在main.js中导入base.scss
import './assets/css/base.scss'
注意：
在移动端开发中, 一般情况下我们不需要让字体大小随着屏幕尺寸的变化而变化
由于我们是通过视口缩放来适配移动端的, 所以我们不能直接设置字体大小, 否则字体大小就会随着屏幕尺寸的变化而变化
如何解决？
根据像素比设置字体大小
比如：屏幕放大两倍，那么就让字体大小就放大两倍
mixin.scss
@mixin font_dpr($font-size){
font-size: $font-size;
[data-dpr="2"] & { font-size: $font-size * 2;}
[data-dpr="3"] & { font-size: $font-size * 3;}
}
9. 纳入版本控制
- 在工具栏中找到VCS并选中里面的 Enable Version Control
- 在弹出的窗口中选择 Git
- 选择右上角的提交按钮
-
选择全部提交
描述信息：初始化项目 -
创建Develop分支
点击右下角的 Git：master选择New Branch
- 创建编写业务代码的分支
暂时先创建home分支编写首页相关代码
学前端跟江哥不迷路：@ 知播渔教育
