前言

随着手机的发展，很多时候人们浏览网页都是在手机上进行。所以在实际工作过程中，经常有开发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
375px	187.5px	50%	50vw
414px	207px	50%	50vw
912px	456px	50%	50vw

结论：在不同的机型下实际宽度有所变化，转换为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环境就搭建完毕了。如果有新的需求，在此之上迭代即可。