1.初始化HTML中的代码
1-1
<!--可以让部分国产浏览器默认采用高速模式渲染页面-->
<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">
2.利用rem+视口释放的方式来适配移动端
2-1
将index.html中代码打包，会借助html-plugin将index.html中代码拷贝到dist目录
注意点: 如果在HTML文件中用到了字符串模板, 字符串模板中用到了变量, 那么html-plugin是无法处理的, 所以会报错
2-2
如果想解决这个问题, 那么我们需要再借助一个loader, html-loader
*先安装html-loader：npm install --save-dev html-loader
*由于项目使用Vue-CLI创建的，所以项目文件中没有webpack的配置文件，这时就需要创建vue.config.js文件并在其中配置html-loader需要的代码
2-3
3.借助postcss-pxtorem实现自动将px转换成rem
安装命令：npm i -D postcss-pxtorem
在music目录中创建postcss.config.js文件进行配置
3-1
4.借助webpack实现CSS3/ES678语法的兼容
CSS3/ES678语法的兼容问题在通过用Vue-CLI创建music项目时，Vue-CLI已经自动帮助实现了
想要兼容不同浏览器，需要添加不同的私有前缀，可以直接在.browserslistrc文件中配置，修改完配置文件后先Ctrl+C 关闭，然后重新打包npm run serve
ie>=8
Firefox >= 3.5
chrome >= 35
opera >= 11.5
5.借助fastclick解决:移动端100~300ms的点击事件延迟问题
*安装fastclick：npm install fastclick
*在main.js中初始化fastclick，导入一下fastclick，然后调用一下fastclick的attach方法
import fastclick from 'fastclick'
fastclick.attach(document.body)
6.初始化默认的全局样式
*在assets中新建css目录导入base.scss，mixin.scss,reset.scss,variable.scss四个文件
*并在main.js中引入base.scss文件
*在base.scss中导入了reset.scss文件，而reset.scss文件保存的是清空一些默认样式的代码
*在base.scss中导入了variable.scss变量文件，而variable.scss文件中定义的是scss中常用的一些规范变量
*在base.scss中导入了mixin.scss混合文件，而mixin.scss文件中定义的是scss中自定义的一些函数
网友评论