前言

随着手机的发展，很多时候人们浏览网页都是在手机上进行。所以在实际工作过程中，经常有开发h5的需求。这个时候你就要能快速的搭建h5环境。

技术选型

相信很多开发者第一时间想到了uni-app。uni-app着重于做混合开发，一套代码兼容到各个平台，只做纯h5项目的时候建议不要选择uni-app。vue是咱们的首要选择，我们只需要在它的基础配置一些移动端独有的东西即可。

搭建步骤

• 使用vue-cli快速搭建项目
• 配置字体图标库
• 主题色策略
• 适配各个机型
• ui库配置

使用vue-cli快速搭建项目

• 安装vue脚手架： yarn global add @vue/cli
• 快速创建项目： vue create 项目名 选择vuex 选择vue-router 选择css预处理语言（sass、less都行） eslint选择

项目结构如上

图标字体库配置

图标库的引入也非常简单，我们选择阿里图标库。

• 创建项目
• 给该项目添加图标。
• 然后下载图标库到本地
• 解压文件后放入src/assets/font下
• 在入口文件：main.js中引入：

// 全局的公共样式
import "@/assets/style/main.scss"

主题色实现

css推出了变量，我们可以使用css变量配合属性选择器实现主题色控制。思路如下

• 定义主题色变量文件: assets/style/theme.scss

// :root代表根节点
// 默认主题的样色变量
:root {
    // 定义css3变量， 全局注入
    --base-color: #ffcc33;
}

// 灰色主题的变量
:root [theme="gray"] {
    --base-color: #ccc;
}

定义了两套主题色，一套是默认，一套是灰色主题

• 在入口文件中引入上诉文件

import '@/assets/style/theme.scss'

• 页面中使用var()，获取主题色

.goods-title {
    color: var(--base-color)
}

• 改变App.vue的根节点的属性theme即可实现主题色切换

<template>
  <!-- 此时就为灰色的主题 -->
  <div id="app" theme="gray" >
    <router-view/>
  </div>
</template>

移动端适配

思路： 设计师只会给一份手机端项目设计稿（375px 750px）,但是手机的机型非常多。

例子： 假设设计稿的宽度为750, 在设计稿上量出一个div的宽度为375px

结论：在不同的机型下实际宽度有所变化，转换为vw是不变的，所以将px单位转换为vw单位，就能够适配到各个手机端。 px转换为vw不需要开发者自己去算，有第三方插件： postcss-px-to-viewport。配置思路如下：

• 安装插件： yarn add postcss-px-to-viewport -D
• 在项目的根目录下创建文件： postcss.config.js
• 在postcss.config.js中编写配置

module.exports = {
    plugins: {
        // 插件： 将px转换为vw
      'postcss-px-to-viewport': {
        // 设计稿宽度，你在设计稿上量出的宽度，不用自己换算，直接写。
        viewportWidth: 750,
      }
    }
}

ui库选择

移动端有很多ui库，这次咱们选择vant。配置方法如下：

• 安装：yarn add vant@latest-v2
• 在main.js中引入组件样式文件： import 'vant/lib/index.css'
• 在main.js按需引入你需要的组件

import {Button} from 'vant'
Vue.use(Button)

• 具体的组件查看文档即可使用。

总结

至此，一个h5环境就搭建完毕了。如果有新的需求，在此之上迭代即可。