随着手机的发展，很多时候人们浏览网页都是在手机上进行。所以在实际工作过程中，经常有开发h5的需求。这个时候你就要能快速的搭建h5环境。
相信很多开发者第一时间想到了uni-app。uni-app着重于做混合开发，一套代码兼容到各个平台，只做纯h5项目的时候建议不要选择uni-app。vue是咱们的首要选择，我们只需要在它的基础配置一些移动端独有的东西即可。
图标库的引入也非常简单，我们选择阿里图标库。
// 全局的公共样式
import "@/assets/style/main.scss"
css推出了变量，我们可以使用css变量配合属性选择器实现主题色控制。思路如下
// :root代表根节点
// 默认主题的样色变量
:root {
// 定义css3变量， 全局注入
--base-color: #ffcc33;
}
// 灰色主题的变量
:root [theme="gray"] {
--base-color: #ccc;
}
import '@/assets/style/theme.scss'
.goods-title {
color: var(--base-color)
}
<template>
<!-- 此时就为灰色的主题 -->
<div id="app" theme="gray" >
<router-view/>
</div>
</template>
思路： 设计师只会给一份手机端项目设计稿（375px 750px）,但是手机的机型非常多。
例子： 假设设计稿的宽度为750, 在设计稿上量出一个div的宽度为375px
真机的宽度 | 实际宽度 | 屏幕占比 | vw |
375px | 187.5px | 50% | 50vw |
414px | 207px | 50% | 50vw |
912px | 456px | 50% | 50vw |
结论：在不同的机型下实际宽度有所变化，转换为vw是不变的，所以将px单位转换为vw单位，就能够适配到各个手机端。 px转换为vw不需要开发者自己去算，有第三方插件： postcss-px-to-viewport。配置思路如下：
module.exports = {
plugins: {
// 插件： 将px转换为vw
'postcss-px-to-viewport': {
// 设计稿宽度，你在设计稿上量出的宽度，不用自己换算，直接写。
viewportWidth: 750,
}
}
}
移动端有很多ui库，这次咱们选择vant。配置方法如下：
import {Button} from 'vant'
Vue.use(Button)
至此，一个h5环境就搭建完毕了。如果有新的需求，在此之上迭代即可。
关注微信
